Answer 40 of 50
Designing for Color Blindness and Visual Impairments
About 8% of men and 0.5% of women have a red/green color vision deficiency, according to Colour Blind Awareness, and the most common form is deuteranomaly: a reduced sensitivity to green light rather than an inability to see it. The design rule that follows is simple to state. Color can carry meaning, but never on its own, and everything else about the page has to survive zoom, magnification, and reduced motion.
The types, and how common they are
Colour Blind Awareness divides the 8% of men with inherited color blindness approximately as follows:
| Type | What changes | Approximate share of men |
|---|---|---|
| Deuteranomaly | Reduced sensitivity to green light | 5% |
| Deuteranopia | No perception of green light | 1% |
| Protanomaly | Reduced sensitivity to red light | 1% |
| Protanopia | No perception of red light | 1% |
| Tritan types and monochromacy | Blue-yellow confusion, or no color at all | "perhaps 1 in 30-50,000 people" across these groups |
The same source notes that about half of color blind people have a mild anomalous deficiency and the other half moderate or severe conditions, and that rates vary by population, rising to about 10% to 11% of men in Scandinavia. WebAIM’s article on color blindness describes the practical effect: in red deficiencies “The greens tend to look like the reds” and green deficiencies produce a very similar result, which is exactly the pairing a red-and-green status palette relies on.
Never let color carry information alone
WCAG 2.2 success criterion 1.4.1, Use of Color, is a Level A requirement: “Color is not used as the only visual means of conveying information,” indicating an action, prompting a response, or distinguishing a visual element. In practice:
| Element | Color-only version | What to add |
|---|---|---|
| Form error | Red border on the field | An error icon and a text message next to the field |
| Success state | Green check | The word "Saved" or "Sent" |
| Link in body text | Blue text | An underline, or another visual cue besides color |
| Chart series | Red and green lines | Different line styles or markers, and labels at the end of each line |
| Status badge | Colored dot | A text label inside or beside the badge |
| Required field | Red label | The word "required" |
Chart lines, bars, and icons that people need in order to understand the content also need contrast: WCAG 1.4.11, Non-text Contrast, asks for “a contrast ratio of at least 3:1 against adjacent color(s)” for graphical objects and user interface components. Text has its own thresholds, 4.5:1 for normal text and 3:1 for large text at Level AA; how to measure them, the exceptions, and what to do when a brand color falls short are covered in how to achieve and test contrast ratio standards.
Low vision: zoom and reflow
Color is only one part of visual impairment. Two WCAG criteria at Level AA decide whether a layout works for people who enlarge the page:
- 1.4.4 Resize Text. “Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality” (Understanding 1.4.4).
- 1.4.10 Reflow. Content has to work as “Vertical scrolling content at a width equivalent to 320 CSS pixels”, which the Understanding page for Reflow equates to “a starting viewport width of 1280 CSS pixels wide at 400% zoom.”
That is why the zoom test belongs at 400%, not just 200%: at 400% on a 1280-pixel-wide window, the page should reflow into a single column without horizontal scrolling for ordinary text. Line height, letter spacing, and other text spacing settings are covered in how insufficient whitespace harms user experience.
Keyboard users who can see the screen need a visible focus indicator. The Non-text Contrast page notes that, together with 2.4.7 Focus Visible, the focus indicator must have sufficient contrast against the adjacent background when the component is focused.
Motion and flashing
W3C’s explanation of animation from interactions notes that for people with vestibular disorders, “Triggered reactions include nausea, migraine headaches, and potentially needing bed rest to recover.” Flashing content is addressed by WCAG under its guideline on seizures and physical reactions.
- Respect the system setting. The
prefers-reduced-motionmedia feature, which MDN marks as Baseline widely available, tells you when a visitor has asked their operating system to reduce motion. - Flashing is a Level A rule. WCAG 2.3.1, Three Flashes or Below Threshold, requires that pages “do not contain anything that flashes more than three times in any one second period,” or that the flash stays below the defined thresholds.
- Let people turn off interaction-triggered motion. At Level AAA, 2.3.3, Animation from Interactions, asks that such animation can be disabled unless it is essential.
@media (prefers-reduced-motion: reduce) {
.parallax, .auto-carousel { animation: none; transition: none; }
}Dark mode is a second palette, not an inversion
A dark theme brings its own color relationships: a blue that reads well on white may not on near-black. The prefers-color-scheme media feature, documented on MDN, lets a site follow the visitor’s system preference. Check every functional color pair in both themes against the same thresholds rather than assuming the inverted version passes.
Testing
- Simulate. Chrome DevTools includes an Emulate vision deficiencies option, so no extension is needed for a first pass; design tools offer similar previews. Check the key screens with the red and green deficiency filters at minimum.
- Check in grayscale. If a status, chart, or link becomes impossible to read in grayscale, color is doing work alone.
- Zoom to 400% on a 1280-pixel-wide window and use the page.
- Test with people. Simulation approximates; sessions with participants who have color vision deficiencies or low vision show how they work around problems you did not predict.
Brand colors
A brand palette does not have to be abandoned to meet these rules. Keep signature colors for logos and decoration, add darker or lighter variants for text and controls, and document which pairs are approved for which use. The measuring and the approved-pair approach are covered in the contrast guide linked above.
Pair every color signal with a shape, label, or pattern, test at 400% zoom and with reduced motion on, and check both light and dark themes before calling a palette finished.