Test any text and background pair against WCAG AA and AAA, then auto-fix a failing color to the nearest compliant shade that still looks on-brand. Grade your whole palette at once. All in your browser.
We keep the hue and nudge the lightness until the pair passes, then pick the shade closest to your original color.
Paste your brand colors, one hex per line. We grade every foreground and background pairing against WCAG AA and show which combinations are safe for text.
Contrast is one of dozens of accessibility details we build into every site so it works for everyone and ranks well. Get a free mockup or audit.
Get a free mockup or audit →If your text and background do not have enough contrast, a real share of your visitors cannot read it, and search engines notice a poor experience too. This checker grades any color pair against the official WCAG ratios, auto-fixes a failing color to the nearest compliant shade that still looks like your brand, and grades a whole palette in one grid. Everything runs in your browser, so nothing is uploaded.
WCAG measures contrast as a ratio between the relative luminance of two colors. Each color is converted to linear light, weighted by how the eye perceives red, green, and blue, and combined. The ratio is the lighter value plus 0.05 divided by the darker value plus 0.05. It runs from 1:1 (no contrast, same color) to 21:1 (pure black on pure white). We verified our implementation against that known pair: black on white returns exactly 21.00.
For normal text, WCAG AA requires 4.5:1 and the stricter AAA requires 7:1. Large text (around 24px regular or 18.66px bold) only needs 3:1 for AA and 4.5:1 for AAA. The tool shows a clear PASS or FAIL badge for each of those four levels so you know exactly where a color pair stands.
Most free checkers stop at a red FAIL. Ours suggests a fix. When a pair fails AA, we keep the foreground hue and saturation and only nudge its lightness up or down until it clears 4.5:1, then pick the version closest to your original color. You get a hex that still reads as the same color family, just light or dark enough to be readable. Click apply to load it back into the checker or copy the hex straight into your CSS.
UserWay bundles contrast into a paid accessibility widget, and most standalone checkers will tell you a single pair fails but will not suggest an on-brand compliant fix or grade your whole palette. This tool is free, suggests the nearest passing color, and includes a palette matrix that checks every combination of your brand colors at once. No signup, no account.
The Pro service audits every color, font size, and component on your site for accessibility and delivers a compliant design system.
Get early access, book a free call →Pick a text color and a background color. The tool grades that pair with the official WCAG method: each color is converted to linear light, its red, green, and blue channels are weighted by how the eye perceives them (red 0.2126, green 0.7152, blue 0.0722), and combined into a relative luminance. The contrast ratio is the lighter luminance plus 0.05, divided by the darker luminance plus 0.05. Ratios run from 1 to 1 for two identical colors up to 21 to 1 for pure black on pure white, and we checked the math against that known pair, which returns exactly 21.
It then shows a plain PASS or FAIL for each threshold. Normal text needs 4.5 to 1 for AA and 7 to 1 for AAA. Large text, roughly 24px regular or 18.66px bold, needs 3 to 1 for AA and 4.5 to 1 for AAA. When a pair fails, the auto-fix holds your foreground hue and saturation steady and only nudges its lightness until it clears the target, then picks the version closest to your original, so the fix still reads as the same brand color. A palette matrix grades every combination of your colors at once, and all of it runs in your browser.
What it will not do: it cannot tell you whether a color pairing looks good, only whether it is readable enough to meet the standard. It checks the colors you enter, not your whole live site in context. If you want every color, font size, and component checked across a real build, that is where our custom web design work comes in.
For normal text, WCAG AA requires 4.5 to 1 and the stricter AAA requires 7 to 1. Large text, about 18.66px bold or 24px regular, only needs 3 to 1 for AA and 4.5 to 1 for AAA. Pure black on pure white is the maximum at 21 to 1.
It holds your foreground hue and saturation steady and only changes the lightness, moving it up or down until the pair meets the target ratio, then picks the smallest change from your original color. The result stays in the same color family, just light or dark enough to be read.