Let me confess you something. I don’t see “properly”. But don’t get me wrong, my eyesight is perfect and I don’t need to wear any glasses. I am one of those who have problems distinguishing between certain colors. Yes, I’m colorblind. Let’s see what Wikipedia says about it:
Color blindness, or color vision deficiency, is the inability or decreased ability to see color, or perceive color differences, under normal lighting conditions. Color blindness is usually a sex-linked condition. The genes that produce photopigments are carried on the X chromosome; if some of these genes are missing or damaged, color blindness will be expressed in males with a higher probability than in females because males only have one X chromosome (in females, a functional gene on only one of the two X chromosomes is sufficient to yield the needed photopigments). About 8 percent of males, but only 0.5 percent of females, are color blind in some way or another, whether it is one color, a color combination, or another mutation.
Color blindness may make it difficult or impossible for a person to engage in certain occupations. Persons with color blindness may be legally or practically barred from occupations in which color perception is an essential part of the job (e.g., mixing paint colors), or in which color perception is important for safety (e.g., operating vehicles in response to color-coded signals).
If you had not heard of it before and want to check whether you also belong to this exclusive club, you just have to do one of the many online tests to determine if you are colorblind. For example, you may want to try if you are able to see the numbers inside these typical colored balls (Ishihara color test) correctly:
The numeral “74” should be clearly visible to viewers with normal color vision. Viewers with dichromacy or anomalous trichromacy may read it as “21”, and viewers with achromatopsia may not see numbers. Well, I’m not able to see any number here 🙂
Curious, isn’t it? First of all I’d like to calm you down in case you’ve not seen either the 74 or the 21. Colorblind people can lead a normal life. Moreover, you now have an interesting topic of conversation for your chats with friends.
I guess you’re wondering why I introduced this topic when the aim of this blog is to spread the word of WordPress. We know that one thing that makes us (colorblind people) suffer is a bad graphic design. Good graphic design avoids using only color-based codes to express information. Additional visual clues do not only help color blind people, but also aids understanding by normally sighted people.
For example, choosing color palettes that combine red and green is a bad idea. Also, writing text in red over blue backgrounds is something that makes it impossible to read anything (I remember a default template for PowerPoint, which was quite popular many years ago, that had this combination of blue and red—each time I was in a presentation that used it I went crazy trying to read something!).
Usability is a key to make our visitors understand the message we want to transmit with our web designs. And remember, this is not something I’m making out, there exist usability guidelines from recognized organizations such as W3C or BBC, among others.
Nelio Forms
A fantastic contact plugin using the block editor. In its simplicity lies the true power of this plugin. I love it, very versatile and it worked perfectly for me.
Wajari Velasquez
Color blindness and WordPress
The WordPress scenario is very interesting. Both the dashboard interface and the default themes that come with WordPress are a delight for the colorblind community. They use high-contrast colors and do not mix the meaning of the elements with color coding. For example, you may find quite logical to to identify published posts with the green color and drafts entries with red, don’t you? But if you look at WordPress, you’ll realize it does not use these colors! It looks like WordPress developers have been focused in usability and accessibility from the very beginning. Good for them!
Believe me when I say that WordPress design is of high quality in terms of color usage (and I tell you that from my own experience). However, the problem arises when you install third-party plugins and themes that change the default appearance of your site. In many situations, developers and designers of these plugins and themes fail to not considering accessibility for people with color blindness as a key factor for their products. And we’re not just talking about small and unknown developers. We can even find bad designs developed by great empires in the WordPress world, as I found reading the Colourblind Nerd blog (which uses WordPress, by the way).
Here at Nelio, we use the SEO plugin by Yoast for WordPress. Plugin‘s performance is excellent. Just note that it has been downloaded almost 10 million times. However, when it comes to usuability, it is not that good. Note that in order to identify the quality of the entries, the plugin uses a color scale ranging from red to green, through brown, gray, blue or yellow. Each color indicates a different meaning, the green being the best.
Adding keywords in the entry and these appearing in the URL, content, or title, are aspects that will help us get the coveted green for our entry, indicating that the SEO is good. However, I had to suffer many times this color code! I mean, if you have an entry with a poor SEO, the plugin will mark it with brown color, but in my case I am unable to distinguish the brown ball with the green one. So it’s hard to tell if the input is perfect or if, on the contrary, has a poor SEO.
How can we improve it? Well, tremendously simple. Just upload into /wp-content/plugins/wordpress-seo/images/ of your WordPress installation the following image to replace the existing score_buttons.png file used by Yoast:
After that, we can see how the color scale changes in a more colorblind-friendly way:
Much easier to interpret for colorblind people because of the symbols used! It’s a shame that so may well-recognized developers in WordPress, such as the Yoast team, still have not taken this into account (even though it was already mentioned in their code repository 5 months ago, but nothing has changed). At least you can change the default image as aforementioned.
The conclusion is clear: if we want our visitors to be happy (all of them) we must consider all these scenarios. Accessibility does not only help your visitors with problems, but it can also help improve your website in other ways, such as SEO.
Leave a Reply