Check color contrast. Fix it in one click.
Test any text and background pair against WCAG AA and AAA — and when it fails, get the nearest color that actually passes. Everything runs in your browser.
Colors
Accepts #rgb, #rrggbb or rgb(). The picker and the field stay in sync.
Common presets
Result
—Large text sample
Normal body text sample — the size most content actually uses.
Small print / captions at 12px
Nearest accessible color
CSS output
How WCAG contrast actually works
Contrast ratio is a property of a pair of colors, not of one color. That is why a palette can look fine in Figma and still fail an audit: the same grey is readable on your page background and unreadable on a card, because the card is a different color.
The ratio ranges from 1:1 (identical colors) to 21:1 (pure black on pure white). It is calculated from relative luminance, which is not the same as brightness: sRGB channels are linearised first, because human vision does not respond linearly to light. Green contributes far more luminance than blue, which is why a saturated blue on black almost always fails.
What the numbers mean
AA — 4.5:1 for normal text. AA — 3:1 for large text (18pt, or 14pt bold) and for UI components and graphical objects. AAA — 7:1 and 4.5:1 respectively. WCAG 2.2 also applies the 3:1 threshold to focus indicators, which is the requirement most sites silently fail.
Why "just darken it" is not enough
Darkening a brand purple until it passes usually destroys the brand. The suggestion engine here keeps the hue and saturation and moves lightness only as far as the target requires, then tells you the exact hex. If a brand color cannot pass without changing character, that is information worth having early — before it is baked into a design system.
Frequently Asked Questions
Is a passing contrast ratio enough for accessibility?
No. It is necessary but not sufficient. It says nothing about color-blind users distinguishing meaning carried only by color, about text over images, or about reduced-motion and keyboard navigation. Treat contrast as the cheapest, highest-yield check — not the whole audit.
Does a gradient background count?
You must check the worst case across the gradient, not the average. Test both extremes; if either fails, either lower the gradient's range or add a solid scrim behind the text.
Why does the same color pass in one tool and fail in another?
Almost always because one tool linearises sRGB and the other does not, or because one is comparing against a slightly different background. This tool follows the WCAG 2.2 relative-luminance formula exactly, including the sRGB linearisation step.
Are my colors sent anywhere?
No. The whole calculation is a few lines of JavaScript running locally. There is no upload, no logging and no account.
Related tools
Open Graph image generator · Meta tag inspector · All MousyTools
Hecho por MousyDev
Creo herramientas web que respetan tu privacidad: tus datos se procesan en tu propio navegador y nunca pasan por mis servidores.