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 grey 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.
Let’s take a look at the home page reservation form Avis gives us. I simply clicked “Continue” without filling anything out, and the error message I received to “Please enter a Pick-up Location” was presented in plain red text.
Another example comes from the Budget home page reservation form, where again I simply clicked “Continue as guest” to receive an error message. In this case, the red error message is presented with red copy over the field’s label and a red border around the actual field.
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.
The Home Depot account registration form is utilizing shapes in addition to color to indicate where problems arise. An exclamation point presented in a square shaped box precedes the error message copy in addition to an “x” near the relevant field to indicate an error has taken place.