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 →