WCAG Contrast Grid
Build a matrix of contrast ratios for every pair of colours in a palette, showing which combinations pass AA and AAA for normal text, large text and interface components.
Last reviewed by the Radiatus Cloud team
Need this done properly for your business?
Radiatus delivers secure cloud, DevOps & compliance engineering.
Palettes fail in the combinations nobody tested
A palette is usually checked one pair at a time, in the combinations the designer had in mind. The failures arrive later, in combinations nobody considered: a secondary label on a tinted card, a disabled state on a hover background, a border against a surface two levels down. A grid of every pair takes the same time to read as a single check and finds all of them at once, which is why it belongs at the point the palette is defined rather than during a review.
The thresholds and what they cover
Normal text needs 4.5:1 for AA and 7:1 for AAA. Large text, meaning 24px or 18.66px bold and above, needs 3:1 and 4.5:1. Interface components and meaningful graphics need 3:1 against adjacent colours, which covers form borders, icons and focus indicators. That last category is the one most often missed: a button whose label passes contrast while its own edge is invisible against the page still fails.
Contrast ratio is not the whole of legibility
The formula ignores font weight, size beyond the two bands, and the way thin light text on a dark background appears to bleed. Two pairs at an identical 4.5:1 can differ noticeably in readability. The ratio is a floor that catches the clear failures rather than a guarantee that anything above it reads well, and text at exactly the threshold in a light weight is worth looking at rather than accepting.
Related tools
- Color Converter — Convert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
- Accessibility Color Contrast Checker — Check foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
- Typography Scale Generator — Generate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.
- Design Token Generator — Generate design tokens as CSS variables, JSON or platform formats, structured in the layers that make them maintainable.
Frequently Asked Questions
What ratio does body text need?
4.5:1 for AA and 7:1 for AAA. Large text, which means 24px or 18.66px bold and above, needs 3:1 and 4.5:1. The large text allowance exists because bigger glyphs carry more of the colour difference.
What is the 3:1 component requirement?
Interface components and meaningful graphics need 3:1 against adjacent colours. That covers form field borders, icons, focus indicators and chart elements, and it is the requirement most often missed: a button with legible text and an invisible edge still fails.
Does a passing ratio guarantee readability?
No. The formula ignores font weight and size beyond two bands, and thin light text on dark backgrounds appears to bleed. Two pairs at an identical 4.5:1 can read quite differently, so treat the number as a floor rather than a verdict.
Do disabled controls need to pass?
The guidelines exempt them, and a disabled control nobody can read is still a usability problem. Common practice is to keep disabled states above 3:1 so their meaning stays visible even where the exemption applies.
What about text over an image?
The ratio must hold against the actual pixels behind the text, which vary across the image. A solid overlay or a scrim behind the text is the reliable fix, since it makes the background a known colour rather than whatever the photograph happens to contain.
Privacy & Security
Everything runs in your browser; nothing is uploaded.
How to Use
Paste your palette to see the contrast ratio of every possible pair at once.
Disclaimer: This tool is provided "as is" without warranty of any kind. Results are for educational and utility purposes.
Related Tools
Color Converter
DesignConvert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
Accessibility Color Contrast Checker
DesignCheck foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
Typography Scale Generator
DesignGenerate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.