Colour Accessibility

Accessibility is often treated as a compliance checklist — get the ratio above 4.5:1 and move on. This misunderstands the goal. The contrast ratio exists because some people have reduced colour vision sensitivity, low vision, or conditions that reduce contrast perception. Designing for those users doesn’t just help them — it makes the experience better for everyone using the interface in bright sunlight, on a low-quality display, or while tired.

The contrast ratio formula

WCAG (Web Content Accessibility Guidelines) defines contrast ratio as the relationship between the relative luminance of two colours. Luminance is a measure of how much light a colour appears to emit, accounting for the fact that green contributes more to perceived brightness than red, and red more than blue (reflecting how human cone cells work).

The ratio is expressed as X:1 — a ratio of 1:1 means identical colours (no contrast), and 21:1 is the maximum (black on white). The formula is available in every contrast checker tool; you don’t need to calculate it manually. What matters is knowing the thresholds.

WCAG AA and AAA

WCAG 2.1 defines two conformance levels for text contrast. Level AA requires a minimum of 4.5:1 for normal text and 3:1 for large text (18pt or larger, or 14pt bold). This is the legally required minimum in most accessibility regulations. Level AAA requires 7:1 for normal text and 4.5:1 for large text — substantially higher.

AA is the practical target for most interfaces. If you can achieve AAA without sacrificing the design, do so — the reading experience is meaningfully better. Where AAA creates design problems (it often requires very dark text on very light backgrounds), AA is the defensible minimum.

Non-text elements — icons, borders, focus rings, form field outlines — are covered by a 3:1 minimum under WCAG 2.1 guideline 1.4.11. This is frequently missed: an icon at 2.8:1 contrast fails, even if no text is involved.

Colour alone cannot convey meaning

The most important rule in colour accessibility is not about contrast ratios — it is about relying solely on colour to communicate. WCAG 1.4.1 states that colour must not be the only means of conveying information. An error state communicated only by turning a border red fails users who are red-green colour blind (approximately 1 in 12 men). The error needs an icon, a text label, or a change in shape in addition to colour.

This applies broadly: don’t indicate required form fields with red labels only; don’t show activity on a chart using colour coding alone; don’t mark selected state only through a colour change. Every meaning conveyed by colour should also be conveyed through at least one other channel — text, icon, position, shape, or label.

Designing beyond minimum compliance

Passing WCAG AA is necessary but not sufficient. Consider: contrast requirements apply to static text, but interactive states introduce contrast problems that static review misses. A button’s default state may pass 4.5:1, but its hover state, focus ring, and disabled state each need to be checked independently. A disabled state at 2:1 is inaccessible even if it’s “intentionally low contrast.”

Focus indicators deserve particular attention. The browser’s default blue outline is frequently overridden by CSS that provides no visible replacement, effectively breaking keyboard navigation entirely. WCAG 2.2 introduced a new Focus Appearance criterion requiring focus indicators to have at least 3:1 contrast against adjacent colours and a minimum area. Pair high contrast ratios for text with visible, high-contrast focus indicators, and you’ve addressed the bulk of colour accessibility concerns. See colour and type for how these principles apply specifically to typographic colour choices.

Designing for colour vision deficiency

Colour vision deficiency (CVD) affects perceived colour relationships, not colour itself. The most common form is red-green deficiency (deuteranopia/protanopia), where red and green appear similar. The practical design implication is not to avoid these colours — it is to never use colour alone to distinguish them.

Design patterns that remain clear across CVD:

• Add shape or icon to colour — a status system using red/amber/green circles is inaccessible; the same system with ✕/⚠/✓ icons is not
• Use luminance contrast rather than hue contrast — a dark red and a light green remain distinguishable when the hue difference is not perceived
• Label chart series — colour-coded chart legends need text labels or pattern fills alongside the colour
• Test in greyscale — if the interface communicates its distinctions in greyscale, it works for most CVD users

Testing colour accessibility

Manual inspection is insufficient — colour relationships that appear correct to a designer with typical colour vision will fail for other users. A reliable testing workflow:

1. Contrast checker — test every text/background pair and UI component border (icons, inputs, focus rings). Tools: browser DevTools, Colour Contrast Analyser (desktop app), or the APCA calculator for nuanced analysis.
2. Greyscale test — desaturate a screenshot of the interface. Status differences, chart series, and state changes should remain distinguishable without colour.
3. CVD simulation — Figma, Stark, and browser extensions (Colour Blindness Simulator) can render the interface as it appears under the most common CVD types.
4. All interactive states — check not just the default state but hover, focus, disabled, and error states independently. A default button that passes 4.5:1 may have a hover state at 2.8:1.