Guides Colors

How to Choose an Accessible Color Palette: Tools, Contrast, and Color Blindness

Colors: A Major Accessibility Issue

"So we have to make everything black and white?" No. That's the first misconception I have to correct in every color accessibility training. RGAA Theme 3 has two fundamental rules: sufficient contrast between text and background, and information must not be conveyed by color alone. When you know that about 4% of men are color blind (3.2 million people in France alone), you understand why this matters.

WCAG Contrast Ratios

Keep this cheat sheet handy -- you'll need it regularly. Normal text (under 18px): 4.5:1 minimum for AA, 7:1 for AAA. Large text (18px+ or 14px+ bold): 3:1 AA. UI elements and graphics: 3:1. Inactive or decorative text: no requirement.

Verification Tools

Here's my toolkit -- pick the one that fits your workflow. Colour Contrast Analyser: free desktop app with a color picker, my go-to. WebAIM Contrast Checker: quick online check for any two colors. Chrome DevTools: the CSS color picker already shows contrast ratios, no extension needed. Stark for Figma/Sketch: essential for designers. RGAA Test: auto-detects contrast issues on your live site.

Don't Convey Information by Color Alone

Here are the classic traps everyone falls into: links that only differ by color (underline them!), form errors marked only in red (add an icon and text message), charts with color-only series (add patterns -- stripes, dots), status indicators like green "online" / red "offline" (add text or icons).

Designing for Color Blindness

Color blindness isn't one condition -- it's a family. Red-green (protanopia/deuteranopia) affects 8% of men. Avoid pairing red with green, green with orange, or blue with violet. Want to see your site through color-blind eyes? Chrome DevTools has built-in vision deficiency emulation (Rendering > Emulate vision deficiencies). Sim Daltonism on Mac filters your entire screen in real time -- it's eye-opening.

Creating an Accessible Palette

Here's the practical method in 5 steps: pick your brand colors, verify text/background contrast for every combination, create light and dark variants, test with a color blindness simulator (takes 2 minutes), and document allowed combinations in a design system.

An accessible palette is not a boring palette. I've seen gorgeous brand identities that are perfectly accessible. Vibrant, saturated colors can absolutely meet contrast ratios. Accessibility is a creative constraint, not a limitation.
4.5:1 for normal text (under 18px) and 3:1 for large text (18px+ or 14px+ bold). These are WCAG AA requirements adopted by RGAA criterion 3.2. In practice, this means your #999 gray on white doesn't pass (2.85:1 ratio). Darken it a bit and you're good.
Easiest way: Colour Contrast Analyser (free, desktop) -- point the eyedropper at your text and background, and it tells you pass or fail. WebAIM Contrast Checker does the same online. If you're a developer, Chrome DevTools already has a contrast ratio indicator in the CSS color picker -- no extra installation needed.
Don't panic, this happens a lot. The solution: create darker or lighter variants of your brand colors for text use. Keep the original colors for large decorative surfaces (backgrounds, banners) and use contrasted variants for text and interactive elements. A good designer can tweak hues by a few points while preserving the visual identity -- I've seen beautiful palettes born from this constraint.

Test your site's compliance

Scan your site and get a detailed report with AI recommendations.

Scan my site - €15