Color Contrast Checker
Add the colours in your design palette and instantly check every foreground/background combination against accessibility standards. See which pairs pass or fail, get suggested fixes, and export a full report. Nothing uploaded.
Your Palette (max 12 colours)
Paste Tailwind Config (extracts hex values automatically)
Filter
Contrast Matrix - click any cell to preview
Preview
Export
All colour pairs with contrast ratio and WCAG pass/fail status.
Learn more: contrast ratios and WCAG levels
How the ratio is calculated
Each colour becomes a single relative luminance number before anything is compared. The tool linearises the red, green and blue channels first: a channel below 0.04045 is divided by 12.92, and anything above it goes through the sRGB curve with an exponent of 2.4. The linearised channels are then weighted 0.2126 red, 0.7152 green and 0.0722 blue, with green carrying most of the weight because human vision is most sensitive to it.
The two luminance values then go into (lighter + 0.05) / (darker + 0.05). That 0.05 offset is what bounds the scale: black on white comes out at exactly 21:1, and any colour against itself is 1:1.
What the matrix grades
Every colour is tested against every other colour in both directions, so a palette of n colours produces n(n-1) scored pairs. The six starting colours give 30 of them, and the 12-colour limit gives 132. That is the figure the pair count above the matrix reports, and it is why doubling the palette more than quadruples the work.
Each cell is scored against two numbers only: 4.5:1 for AA and 7:1 for AAA. Those are the normal-text thresholds from WCAG 1.4.3 and 1.4.6. Large text gets an easier target in the standard (3:1 at AA, 4.5:1 at AAA), and the matrix does not apply that relaxation for you.
The default grey #6c757d on white shows how tight the margins can be. It scores 4.69:1, clearing AA by about a fifth of a point and missing AAA by more than two.
How the suggested fix picks a colour
Click a failing cell and the tool converts your foreground to HSL, then holds the hue and saturation where they are. It walks the lightness down one percentage point at a time, re-testing the ratio at each step, and returns the first value that reaches 4.5:1.
The search always goes darker first. Only when lightness reaches 0 without passing does it start again from your original colour and walk upwards instead.
That order shows up on dark backgrounds. The same grey on the dark navy #1a1a2e scores 3.64:1, and darkening it never helps, so the search runs all the way to black, restarts, and comes back with #7e878f at 4.67:1, roughly seven points lighter at the same hue.
FAQ
Why do I get the same ratio when I swap the foreground and background?
The formula puts the higher luminance on top and the lower one underneath before dividing, so the order you picked them in makes no difference to the number. Both cells still appear in the matrix because the preview behind them is not symmetric, even though the ratio is.
My text is 20pt. Does the 3:1 large-text allowance apply?
WCAG counts 18pt, or 14pt bold, as large text, so 20pt qualifies and AA only asks for 3:1 there. This tool grades every cell at 4.5:1 regardless, so treat a failing cell behind large text as a prompt to check rather than a verdict.
Do disabled buttons need to pass?
No. WCAG 1.4.3 exempts text that is part of an inactive user interface component, along with pure decoration and logotypes. Keeping disabled controls legible is still worth doing, but it is not something the matrix can judge for you.