Colorful Surprises

I consciously skipped over reading about color and contrast when I first waded into accessibility issues years ago. I could see enough back then to think the issue is obvious: You cannot put dark things on dark backgrounds or light things on light backgrounds and achieve an accessible result.

What else is there to know, right?

The answer: plenty.

This is a tricky subject. The do’s and don’ts are not what I expected.

Thankfully, software tools greatly simplify achieving compliance with standards

Here is a quick look at some of my surprises.

Surprise #1: The Audience is Huge

Many web developers see accessibility as benefiting only a small audience. That notion is misinformed.

An estimated 20 percent of American adultss have some degree of vision loss. Most of these have enough vision that they do not need to use a screen reader. They may have cataracts, night blindness, color blindness, or another issue.

The medical problems are diverse, but on the Web these users share struggles with low contrast between foreground and background colors. A charcoal log-in button on a black banner or silver text on a white page can be real road blocks.

Addressing their needs benefits a huge audience.

Surprise #2: Compliant Pages can be attractive

Many designers fear that their pages must be dull if they comply with color and contrast standards. I believe this is a major obstacle to achieving broader support for accessibility.

But adhering to color and contrast standards does not mean your pages will be unattractive. There are no forbidden colors in accessibility standards. The combinations are what matters.

Surprise #3:What is True for One Color Does not Necessarily Apply to the Next

Providing sufficient contrast can seem confusing and counter-intuitive. This is partly due to the complex nature of color, not accessibility rules.

For example, you can put pure blue (#0000FF) text on a white background and achieve ample contrast. Pure green (#00FF00) text on the same white background fails the minimum threshold. You must darken the green considerably to achieve the minimum contrast ratio of 4.5:1. The named color green is dark enough to be accessible in body text.

Examples

The following color samples illustrate how light a color cam bee on body text with a white background.

The first column shows named colors that come close to the threshold. No named colors provide a contrast ratio of exactly 4.5:1. So in column 3 I show the hexadecimal value for a shade of color that does match this ratio.