The use of color in your web application can have a positive or negative impact on your users, depending on their ability to discern your color choices. Most issues relate to color differentiation and color contrast, and they can affect mobile users as well as those with vision-related disabilities.

Color Differentiation

The ability to see color accurately is occasionally a barrier to people with one of a number of forms of colorblindness. For example, one of the most common color combinations in user interfaces for Western users is red for stop/no/cancel and green for go/yes/OK—yet this same combination correlates strongly with protanopia, or red-green colorblindness, a condition that affects up to 4% of men of European descent. Color can also make things difficult for users whose mobile browsers are rerendering images as text or don’t have color displays.

These problems are easy to solve, without necessarily changing your color scheme. All you need to do is associate a textual label to anything that communicates its meaning purely by color. It’s sufficient to have, for example, “OK” in your green button (with alt text to match, naturally), in which case, you could refer to the button like so: “Click on the green OK button to proceed.” This avoids referring to the button color alone as in “Click on the green button to proceed.”

A growing number of tools simulate color deficiencies. See the section “Question 6: Nonsensory operation” in Chapter 11 for more information about them.

Color Contrast

Subtle contrasts between text and background are frequently a source of trouble for users. It may be tempting to put light blue text onto a medium blue background, or light gray on white, but that could make it difficult or impossible to read that text, especially on handheld devices. High contrast between foreground and background will make it that much easier for everyone.

There are tools available to test color contrast values. Again, see the section Question 6. Nonsensory operation” in Chapter 11 for more about them.

Get Universal Design for Web Applications now with the O’Reilly learning platform.

O’Reilly members experience live online training, plus books, videos, and digital content from nearly 200 publishers.