If you are like me, you are somewhat colorblind and having trouble telling the difference in the circles on the WordPress SEO by Yoast WordPress plugin.

When creating a new post and using the SEO plugin, I could not tell the difference between the OK and the Good circles.  I googled for a fix and found that there are others, of course, that have this same issue.  I found on the forums for Yoast that a request had been made to make the colors of the indicator colorblind-friendly, but it has not yet been implemented.

colorblind wordpress seo

Before

These are the indicators I am talking about.  When working with optimizing my site for SEO, I had read a lot of good review about this WordPress SEO plugin by Yoast.  I have begun using it and found that it really does help a lot in analyzing my posts and letting me know areas where I can improve.  But this color thing was really a problem.  To get around the issue, I was using the Google Developer Console (F12) and inspecting the circle elements and I saw that class that they were each assigned.  Seeing that each color had its own class, such as the class of OK was .wpseo-score-icon.ok.

 

I was looking through the plugin files and found the css stylesheets for the colored circles. The css files are located at /wp-content/plugins/wordpress-seo/css/metabox-tabs.css and /wp-content/plugins/wordpress-seo/css/metabox-tabs.min.css.  The first file isnt’ minimized, so it was easy to find the colors I needed to edit near the bottom of the file.

You also have to edit the minimized file.  It’s a little more difficult to work with, but you should be able to search and find which style(s) you want to update.

This is the minimized file, again, the colors you want to edit are near the end:

My fix for the colorblind WordPress SEO plugin.

colorblind wordpress seo yoast after changes

AFTER

I edited both files and only changed the values for the OK color.  I made the yellow a lot brighter, well I think it’s yellow, and now I can easily see the difference between the colors. I changed the OK color to #ffff00.  Being partially colorblind is always a challenge.

Keep in mind that any updates to the WordPress SEO plugin may overwrite your changes, so keep good notes of what you changed or bookmark this page in case you have to make the same changes again.