In general—but particularly in the design world—color is a powerful tool. It conveys moods and emotions, adds presence to designs, and builds brand identities. All too often, however, users who suffer from any color deficiencies struggle to navigate their way through our color-drenched world.
For their sake, I often advise designers to have accessibility in mind and test web pages in gray scale format to ensure usability remains in tact when colors aren’t viewed in the intended way.
Users who suffer from any color deficiencies will have difficulties to distinguish the differences between certain colors. The most common type of color deficiency is red-green color-blindness, where red and green are seen as the same color.
Below is an illustration of the most common forms of color-blindness taken from Color Matters.
Looking at this chart, one must consider the visibility (or lack of it) of red error messages to users with this type of color-blindness when completing online forms.
The high contrast of the red error message has been lost and instead, replaced with green color text that nearly blends in with the black content on the page and is very easy to overlook.
Red colors are lost and replaced with light green colors. The green copy does not carry enough contrast to attract any attention and the field’s border no longer appears highlighted at all.
Don’t rely on color alone to deliver your messages online. Instead, combine color with other design fundamentals such as typography, shapes, grids, and spaces and allocate more weight to important elements.
Test out your pages with Colblindor or simply change your settings to gray scale to ensure usability does not break when colors go away.