Check and fix color contrast against WCAG 2.1 — real ratios, honest verdicts and accessible color suggestions. Everything runs locally in your browser.
Your favourites
Recently used
Start from what you are trying to do
- Build a palette that stays accessibleA palette with its contrast checked and its behaviour under colour blindness known.4 steps, starting with Online Color Picker
- Fix text that fails contrastA text colour that meets WCAG on your background, chosen rather than guessed.3 steps, starting with WCAG Contrast Checker
Accessibility Color Tools
- WCAG Contrast CheckerCheck any text/background color pair against WCAG 2.1 — exact contrast ratio, AA and AAA verdicts for normal and large text, plus a same-hue fix suggestion when it fails.
- Accessible Text Color GeneratorPick a background and get text colors that actually pass WCAG — black, white and same-hue tints ranked by real contrast ratio, with AA/AAA marked on each.
Color Accessibility Tools
- Palette Contrast MatrixCheck every color in a palette against every other in one table.
- Accessible Background Color FinderFix a text color and find backgrounds that pass WCAG with it.
- Color Blindness SimulatorSee your colors as people with protanopia, deuteranopia or tritanopia see them, using the peer-reviewed Machado (2009) simulation matrices with adjustable severity.
- Color Vision Safe Palette GeneratorGenerate palettes that stay distinguishable under color-blindness.
- WCAG Link Contrast CheckerCheck link colors properly: links must pass 4.5:1 against the background like any text, and un-underlined links additionally need 3:1 against the surrounding body text plus a non-color cue.
- UI Component Contrast CheckerCheck non-text contrast under WCAG 1.4.11: input borders, icons, focus rings and state indicators need 3:1 against adjacent colors.
- Accessible Color Pair GeneratorGenerate ready-made foreground/background pairs in your brand hue that genuinely measure AA or AAA.
- APCA Contrast CalculatorCalculate APCA lightness contrast (Lc) — the polarity-aware perceptual model being developed for WCAG 3.
Frequently asked questions
How is contrast ratio calculated?
By the WCAG 2.1 formula: relative luminance of each colour, then (lighter + 0.05) / (darker + 0.05). It runs from 1:1 for identical colours to 21:1 for black on white. The implementation is pinned against independently computed reference values.
What ratio do I actually need?
Normal text needs 4.5:1 for AA and 7:1 for AAA. Large text — 18.66px bold or 24px regular and above — needs 3:1 and 4.5:1. User interface components and meaningful graphics need 3:1. The tools report each separately rather than one verdict.
Does passing contrast make a design accessible?
No. Contrast is one measurable requirement among many. Keyboard access, focus visibility, sensible heading structure, labels on form controls and not relying on colour alone all matter, and none of them is a contrast ratio.
Why does my colour pass on one background and fail on another?
Because contrast is a property of the pair, never of a single colour. There is no such thing as an accessible colour; there are accessible combinations, which is why these tools always ask for both.
What if my brand colour fails?
Keep the hue and change the lightness. The accessible-text tool finds the nearest passing shade of the same hue, so the result still reads as the brand colour rather than as an unrelated one. Reserve the failing shade for large text or decoration.
Does WCAG 3 change this?
It proposes a different contrast model that accounts for factors this formula ignores, but it is not a finished standard and is not what conformance is assessed against today. These tools implement WCAG 2.1, which is what applies now.
Can I check a whole palette at once?
Yes. Give it a palette and it reports every foreground and background pairing against the thresholds, which is normally the point at which two or three combinations turn out to be unusable.
Real ratios, honest verdicts
Color contrast is the most measurable accessibility requirement — and the most commonly failed. These tools compute exact WCAG 2.1 contrast ratios using the specification’s own luminance formula (the same math Lighthouse and axe use), score every threshold that matters — AA and AAA, normal and large text, UI components — and, where a pair fails, suggest fixes that keep your hue instead of defaulting to black-on-white.
Contrast is necessary, not sufficient
Passing ratios do not by themselves make a UI accessible: meaning conveyed by color alone, focus visibility and text over images need their own attention. These tools handle the measurable part and say so plainly.
They pair naturally with the Design Token Tools — check your palette’s text pairs before the tokens ship.
