The types, as the National Eye Institute describes them
The National Eye Institute defines color blindness, or color vision deficiency, as seeing colors differently than most people, which usually makes certain colors hard to tell apart. It groups the types into three families. Red-green is the most common, blue-yellow is less common, and complete color blindness is rare.
| Family | Type | What NEI says it does |
|---|---|---|
| Red-green | Deuteranomaly | Makes some greens look redder; the most common red-green type; mild |
| Red-green | Protanomaly | Makes some reds look greener and less bright; mild |
| Red-green | Protanopia, deuteranopia | No way to tell red and green apart |
| Blue-yellow | Tritanomaly | Hard to tell blue from green and yellow from red |
| Blue-yellow | Tritanopia | Blue and green, purple and red, yellow and pink look alike; colors look duller |
| Complete | Monochromacy | Rare; no color seen at all |
For design, the takeaway is practical. The pairs that collapse are red and green first, then blue and green, purple and red, yellow and pink. Any design that uses one of those pairs as the only difference between two things will fail for some readers. NEI also says men have a much higher risk than women, so an audience that is mostly male will include more people affected.
The two WCAG rules that apply
1.4.1 Use of Color, Level A. Color must not be the only visual means of conveying information, indicating an action, prompting a response or distinguishing an element. You can keep the color; you need a second cue next to it, such as text, an icon, a shape or a pattern. The W3C names "required fields are red" as an example of color-only meaning, and lists color-only marking of required or error fields as a failure. One detail helps designers: a color difference that also differs in lightness by a contrast ratio of at least 3:1 counts as an extra visual cue. The W3C also lists 3:1 contrast between inline links and the surrounding text as one sufficient technique.
1.4.11 Non-text Contrast, Level AA. Parts of graphics needed to understand the content, and the visual parts of controls, need a contrast ratio of at least 3:1 against adjacent colors. In a line chart the lines and the gridlines need 3:1 against the background. In a pie chart the slices must be distinguishable, and a darker border on a light slice can fix one that is not. If the same values are shown as visible labels or in a table, the graphic is not required for understanding and the rule does not apply to it. The threshold is not rounded: 2.999:1 fails.
A color-blind safe palette, with contrast
Paul Tol's page of color schemes for data graphics describes his bright qualitative scheme as color-blind safe. The table gives its seven colors, in his default order, with the contrast ratio of each against white and black, computed with the WCAG 2.2 formula.
| Color | Hex | On white | On black | 3:1 on white |
|---|---|---|---|---|
| Blue | #4477AA | 4.70:1 | 4.46:1 | Yes |
| Red | #EE6677 | 3.09:1 | 6.80:1 | Yes |
| Green | #228833 | 4.53:1 | 4.64:1 | Yes |
| Yellow | #CCBB44 | 1.95:1 | 10.76:1 | No |
| Cyan | #66CCEE | 1.84:1 | 11.44:1 | No |
| Purple | #AA3377 | 6.09:1 | 3.45:1 | Yes |
| Grey | #BBBBBB | 1.92:1 | 10.94:1 | No |
The numbers show the catch. A palette can be color-blind safe and still fail contrast. On a white background only blue, red, green, purple reach 3:1; yellow, cyan, grey do not. On black, 7 of the 7 pass. For lines or bars on white, give the light colors a dark outline, put values on them as text, or use fewer colors.
For three series on white, Tol's high-contrast scheme is a tighter choice: blue #004488 (9.62:1), yellow #DDAA33 (2.13:1), red #BB5566 (4.56:1). Its yellow is still below 3:1 on white, so it needs an outline or a label too. The chart maker has the bright scheme built in as its color-blind safe palette and draws a thin outline around any color under 3:1 against the background.
Rules for charts
- Label lines directly. A name at the end of each line beats a legend that asks the reader to match colors.
- Add a second channel. Solid, dashed and dotted lines; stripes, dots and hatching on bars; different marker shapes. The chart maker adds stripes, dots or hatching to bars and slices and makes lines dashed or dotted.
- Show the values. Value labels or a table next to the chart carry the information in text, which satisfies 1.4.1 and makes the chart readable in print.
- Never use red against green for good and bad. If a status scale needs two ends, pair blue with red or orange, and add an up or down arrow.
- Mind the gridlines. They count as graphics too: if a reader needs them, they need 3:1 against the background.
Rules for interfaces
- Errors and required fields: red plus an icon plus a message in words.
- Links in text: underline them, or give them at least 3:1 contrast with the surrounding text, the technique the W3C lists.
- States: a selected tab, a toggle that is on, a focused field need a change in shape, weight or a check mark, not only a new hue.
- Status dots: green, yellow and red dots on a dashboard need a word or a symbol beside them.
How to check a design
- Pull the real colors. Take a screenshot and use the color picker from image to get the hex value of every color that carries meaning.
- Check each pair that touches. Put each color against its background in the color contrast checker. Graphics and control borders need 3:1, normal text 4.5:1.
- Remove the color. View the screen or print the page in grayscale. Anything you can no longer tell apart is relying on hue alone.
- Cover the legend. If the chart is still readable from labels and patterns, it passes the spirit of 1.4.1.
- Build new palettes with the check in mind. The color palette generator lets you check contrast while you pick, so you can drop a color before it ends up in a chart.
None of this needs a special tool for color vision. The test is simple: if every piece of information has a second cue that is not hue, and every graphic has 3:1 against its neighbor, the design works for people who see colors differently, and usually reads better for everyone else too.
Frequently asked questions
What is the most common type of color blindness?
According to the US National Eye Institute, red-green color vision deficiency is the most common type, and deuteranomaly, which makes some greens look redder, is the most common form of it. That is why red against green is the pair to avoid first when color carries meaning.
How many people are color blind?
The National Eye Institute says about 1 in 12 men have color vision deficiency and that men have a much higher risk than women. In a group of 300 men, that is about 25 people who may not see a red and green chart the way you do.
Is it enough to use a color-blind safe palette?
No. A palette helps colors stay distinct, but WCAG 1.4.1 asks that color is not the only visual means of conveying information, so you still need labels, icons, patterns or text. Several colors in the safe palettes are also light, and fall below the 3:1 contrast for graphics on a white background.
What contrast do chart lines and bars need?
WCAG 2.2 success criterion 1.4.11 asks for a contrast ratio of at least 3:1 against adjacent colors for parts of graphics needed to understand the content. Lines in a line chart need 3:1 against the background. Graphics are exempt when the same information is also given as visible text, such as value labels or a table.
Does a red error message fail accessibility rules?
Red text alone does, if the color is the only thing that marks the error. The W3C lists identifying required or error fields by color only as a failure of 1.4.1. Add an icon and a text message such as "Enter a valid email" and the red becomes an extra cue rather than the only one.
Sources
- W3C: Understanding WCAG 2.2 Success Criterion 1.4.1 Use of Color (Level A; color not the only visual means; 3:1 lightness difference counts as an extra cue; required fields shown with red plus an icon; failure F81 for color-only required or error fields)
- W3C: Understanding WCAG 2.2 Success Criterion 1.4.11 Non-text Contrast (Level AA; 3:1 against adjacent colors for interface components and graphical objects; lines, gridlines and pie slices; exemption when the information is also in text)
- W3C: Web Content Accessibility Guidelines 2.2 (definitions of relative luminance and contrast ratio used for the ratios in the palette table; 4.5:1 for normal text under 1.4.3)
- National Eye Institute: Color Blindness (definition, red-green most common, about 1 in 12 men, men at much higher risk than women)
- National Eye Institute: Types of Color Vision Deficiency (deuteranomaly, protanomaly, protanopia, deuteranopia, tritanomaly, tritanopia, complete color vision deficiency)
- Paul Tol: Colour schemes and templates (the bright and high-contrast qualitative schemes with their hex values, described as colour-blind safe)