WCAG AA/AAA contrast ratio with lightness nudge. Free, private, runs in your browser.
100% private — your files never leave your browser. All processing happens locally on your device.
Contrast ratio
17.74:1
12px — Fine print and footnotes
16px — Normal body text. The quick brown fox jumps over the lazy dog.
24px bold — Large heading
Large text = 18pt+ (24px) regular or 14pt+ (18.66px) bold. UI components apply to focus indicators, form borders, and graphical objects per WCAG 2.1 SC 1.4.11.
Contrast ratio is a number between 1:1 and 21:1 derived from the relative luminance of two colors. Luminance is a weighted sum of a color's red, green, and blue components after a sRGB-to-linear gamma correction — greens contribute the most (≈72%), blues the least (≈7%). The ratio is `(L_light + 0.05) / (L_dark + 0.05)`. Pure black on pure white is the maximum at 21:1; identical colors give 1:1. WCAG uses this ratio because it correlates well with what users with common forms of low vision can actually read — it's not a subjective design preference, it's a psychophysical measurement.
WCAG 2.1 defines six practical thresholds. Normal text needs 4.5:1 for AA and 7:1 for AAA. Large text (18pt / 24px regular or 14pt / 18.66px bold) needs 3:1 for AA and 4.5:1 for AAA — bigger glyphs tolerate lower contrast. UI components and graphical objects (focus rings, form borders, chart keys, data-point markers) need 3:1 per SC 1.4.11. AAA isn't formally defined for non-text, but WCAG 2.2 recommends 4.5:1 there too, which is what this tool displays. Aim for AA on everything by default; reach for AAA on body text and critical interactive affordances.
Brand colors often fail WCAG on white. The lightness slider lets you shift a color along its lightness axis in HSL space without changing hue or saturation — so the color stays visually on-brand. Drag until the badges flip green. Typical moves: darken a mid-tone brand primary by 10-15% lightness to make body text pass on white; lighten a navy used on black to pass large-text AA. If a color won't pass without losing its identity, pair it with a neutral (white, near-black, mid-gray) for body copy and reserve the brand color for non-critical accents.
Light-gray-on-white placeholder text is the #1 audit fail — placeholders often render in 40-60% gray on white, which lands around 3:1 and fails normal-text AA. Disabled button states are excluded from contrast requirements by spec, but real users can't tell a disabled button from a badly-contrasted enabled one, so keep them legible anyway. Decorative icons are exempt; informational icons (status, alerts, data markers) need 3:1 against their background. And remember: hover/focus states need their own contrast check — a button that passes at rest can fail when focus outline and background blend together.
All contrast math runs locally. No colors, no brand palettes, no screenshots are sent to any server. This matters for agencies auditing unreleased designs, for designers working under NDA, and for anyone who just doesn't want brand colors ending up in a third-party analytics log. The tool is a single page of JavaScript that runs the WCAG 2.1 formula directly on your inputs.
WCAG defines large text as 18pt (24px) regular weight or 14pt (18.66px) bold and heavier. Large text uses relaxed thresholds (3:1 for AA, 4.5:1 for AAA) because bigger glyphs stay legible at lower contrast.
4.5:1 is the ratio at which typical users with 20/40 vision (a common form of mild vision loss) can still read body text comfortably. Above that, readability drops off quickly; below it, the tail end of the low-vision population starts to struggle.
Drag the lightness slider on either color to shift it lighter or darker while keeping hue and saturation constant. This is the fastest way to nudge a failing brand color into compliance without picking a whole new color.
No. All contrast math runs in your browser — the colors never leave your device.