Colour Accessibility for Designers

Accessible colour choices make the difference between a design a lot of people can use and one that quietly excludes millions. This guide covers the two areas designers most commonly encounter — contrast ratios and colour-vision deficiency — and gives a short, practical checklist for building palettes that pass.

Why colour accessibility matters

Roughly 8% of men and 0.5% of women have some form of colour-vision deficiency. Age-related changes, glare on screens, low-quality displays, and bright outdoor light further reduce how much colour information reaches the eye. A colour palette that works perfectly on a calibrated monitor in a dim office might be unreadable on a budget laptop outside. Designing for accessibility is designing for reality.

Contrast ratios and WCAG

The Web Content Accessibility Guidelines (WCAG) define a measurable contrast ratio between two colours. The ratio is calculated from the relative luminance of each colour and ranges from 1:1 (identical colours) to 21:1 (pure black on pure white). WCAG sets two conformance levels:

• AA — the commonly targeted level. Requires at least 4.5:1 for normal text and 3:1 for large text (roughly 18pt regular or 14pt bold and above).
• AAA — a stricter level. Requires at least 7:1 for normal text and 4.5:1 for large text.

These thresholds also apply to graphical elements that convey information, such as icons and interactive-state indicators, which must meet at least 3:1 against their background under WCAG 2.1.

You can check any pair of colours quickly using the contrast checker on this site.

Common contrast mistakes

• Light grey on white for secondary text. Popular in minimal designs; almost always fails AA.
• Brand-primary on white when the brand colour is a mid-value yellow, orange, or green. These often just miss 4.5:1.
• Placeholder text, which designers sometimes style at very low contrast. WCAG doesn't exempt placeholders.
• Gradient backgrounds behind text. Contrast must be measured against the darkest point under the text, not an average.
• Text over images. Use a dark overlay or a solid panel behind the text to guarantee contrast.

Colour-vision deficiency (colour blindness)

The most common form, deuteranomaly, affects perception of green. Next most common is protanomaly (red perception). Rarer forms include tritanomaly (blue–yellow) and fully monochromatic vision. Designers can't fix this for users, but they can avoid designs that rely on colour alone.

Practical guidance:

• Don't rely on red-vs-green to communicate meaning. Charts, status indicators, and form validation should pair colour with icons, text, or patterns.
• Check charts in simulators. Browser dev tools (Chrome and Firefox) can simulate each type of colour-vision deficiency. Use them on any visualisation.
• Pick colour pairs across hue and value. "Different hue" is not enough; "different hue and different value" usually survives simulation.
• Use patterns as a backup. Solid / striped / dotted fills make charts readable even in total greyscale.

Accessible palette-building checklist

1. Pick one colour with very high contrast against your background (usually near-black for light designs, near-white for dark designs). Use it for body text.
2. Make sure your primary accent passes at least 3:1 against the background for icons and interactive states.
3. Make sure your primary accent passes at least 4.5:1 when used as a button colour with white or black text on top.
4. Avoid relying on two colours with similar luminance to communicate different meanings.
5. Test the whole palette in a colour-blindness simulator and at 200% zoom.
6. Review in direct sunlight or on a cheap display if that's what your users will have.

What accessibility isn't

Accessibility isn't a visual style — plenty of expressive, colourful brands meet WCAG AA. And it isn't a pass/fail trophy. Meeting AA is the floor: real usability comes from testing with actual users, especially those using assistive technology. For regulated contexts (public sector, healthcare, finance), consult an accessibility specialist who can audit the full interface, not just the palette.

Next steps

• Check specific pairs with the contrast checker.
• Generate accessible palettes with the palette generator and verify each combination.
• Read the colour theory basics guide for the building blocks behind these choices.