Image Accessibility: Colour Blindness and Alt Text

The scale of it

In a team of twenty-five, one or two people. On a site with ten thousand monthly visitors, several hundred. Most of them have never been formally diagnosed, most have spent their lives working around it, and almost none will tell you that your status dashboard is unreadable — they will just treat it as one more thing that does not work properly.

The four types, and what each confuses

Protanopia deserves special attention because it darkens reds as well as confusing them. Red warning text on a dark background can disappear almost entirely, which is why that particular habit is worth breaking.

The one rule

Never let colour be the only thing carrying meaning. Add a second signal and nearly every problem disappears without changing your palette at all.

• Status dots — pair red and green with a cross and a tick.
• Line charts — give each line a distinct dash pattern, and label lines directly instead of relying on a colour key off to one side.
• Bar and pie charts — vary the fill pattern, or order and label segments so the legend is not load-bearing.
• Maps and heatmaps — use a palette that varies in lightness as well as hue, so it still reads in greyscale.
• Form errors — an icon and a written message, not just a red border.
• Links in body text — underline them. The oldest example of this rule and still the most broken.
• Required fields — the word "required", not a red asterisk alone.

The thirty-second check

Set the simulator to achromatopsia and look at your design in pure greyscale. If two things that need to be distinguishable are now the same shade, they were relying on hue alone and will fail for a lot of people. This single check finds most real problems faster than working through each deficiency in turn.

It also catches a related issue that has nothing to do with colour vision: anything printed on a mono printer, viewed on a failing screen, or photocopied hits the same wall.

Contrast is a separate test

Passing a colour blindness check says nothing about contrast, and vice versa. Colour vision deficiency is about distinguishing hues; contrast is about distinguishing light from dark. A design can have perfect contrast and still be unusable if the only difference between two states is red versus green.

The Web Content Accessibility Guidelines ask for a contrast ratio of at least 4.5 to 1 between body text and its background, and 3 to 1 for large text — 18.66 pixels bold, or 24 pixels regular, and above. Non-text elements that convey information, such as chart lines and icons, want 3 to 1 as well.

Alt text, briefly and properly

• Describe the information, not the picture. For a chart, that means the finding — "Sales rose 40% between March and June" — not "a bar chart".
• Skip "image of" and "picture of". Screen readers already announce that it is an image.
• Decorative images get alt="", an empty attribute, so screen readers skip them. Omitting the attribute entirely is not the same thing and is worse.
• Text in an image needs to be in the alt text, or better, not be an image at all.
• Keep it to a sentence or two. If the image needs a paragraph, put that paragraph on the page where everyone benefits.

Testing a live page rather than an image

For a static image — a chart, a poster, a screenshot of a dashboard — dropping the file into the simulator is quickest. For an interactive page, Chrome and Edge simulate these deficiencies live: open developer tools, open the Rendering panel from the three-dot menu, and choose an option under "Emulate vision deficiencies". That lets you click through a whole flow rather than checking one frame at a time.