Which WCAG level do I actually need?

AA is the practical and legal baseline — 4.5:1 for normal text — and what most regulations and audits reference (they broadly point at WCAG 2.1 AA). AAA’s 7:1 is worth targeting for long-form reading, small text or low-vision audiences, but even WCAG doesn’t expect AAA across an entire site.

What counts as “large text”?

WCAG defines it as at least 18pt (24px) at normal weight, or at least 14pt (about 18.7px) bold. Large text only needs 3:1 at level AA — that’s the AA Large badge — because thicker, bigger strokes stay legible at lower contrast. Body copy, captions and UI labels are normal text and need the full 4.5:1.

How is the contrast ratio calculated?

Each color is converted to a relative luminance — the sRGB channels are linearized, then weighted 0.2126 red, 0.7152 green and 0.0722 blue — and the ratio is (L1 + 0.05) / (L2 + 0.05), lighter over darker. The scale runs from 1:1 (identical colors) to 21:1 (black on white). Only luminance matters: hue pairings that look vivid can still score poorly.

Do these thresholds apply to buttons and icons too?

Text inside a button follows the normal text rules against the button’s fill. The non-text parts — icons, input borders, focus indicators, chart strokes — need 3:1 against adjacent colors under WCAG 1.4.11. Disabled controls and purely decorative graphics are exempt.

My color fails by a hair — does it still count as a fail?

For conformance, yes: the thresholds are hard lines. On white, #767676 passes AA at 4.54:1 while the barely lighter #777777 fails at 4.48:1. Darken the color a touch, push the text into the large bracket (bigger or bold), or reserve the failing shade for decorative elements.

Does transparency change the result?

This checker compares two opaque colors, so semi-transparent text or overlays must be flattened first: work out (or eyedropper-pick) the color actually rendered on screen, then test that. The same goes for text over images or gradients — test the worst-case region.

Is anything uploaded?

No. The luminance math runs in your browser on every change; your color choices never leave the page.

Color Contrast Checker

Check the contrast ratio between two colors against WCAG AA and AAA standards.

Runs in your browser — files never leave your device

Text colorBackground

The quick brown fox jumps over the lazy dog.

Sample preview text at your chosen colors.

17.08:1AA Large ✓AA ✓AAA ✓

How it works

Choose a text color and a background color, and the tool reports the WCAG contrast ratio between them, renders a live text sample in that exact pairing, and grades it against three thresholds: AA Large, AA and AAA. The defaults — near-black #1C1B22 on white — score 17.08:1, and everything recomputes as you edit.

The math follows WCAG 2.x exactly. Each color is reduced to a relative luminance: its sRGB channels are divided by 255 and linearized (values up to 0.03928 divide by 12.92; larger ones apply ((c + 0.055) / 1.055)^2.4), then weighted 0.2126 red + 0.7152 green + 0.0722 blue — green dominates because human vision does. The ratio is (L1 + 0.05) / (L2 + 0.05), lighter luminance over darker; the 0.05 terms model ambient screen glare and cap the scale at 21:1 for pure black on pure white. The result is rounded to two decimals, and the badges are judged on that rounded value.

A worked example: #336699 has a relative luminance of 0.1251 and white is 1.0, so the ratio is (1.0 + 0.05) / (0.1251 + 0.05) = 6:1. That passes AA (4.5:1 for normal text) and AA Large (3:1) but fails AAA (7:1) — typical for a medium blue: fine as body text at AA, not enough for AAA body copy.

Which threshold you need: AA is the baseline referenced by most accessibility law and procurement rules — 4.5:1 for normal text, relaxed to 3:1 for large text (24px and up, or roughly 18.7px bold). AAA at 7:1 is a stretch target for long-form reading and low-vision audiences. Non-text elements — icons, input borders, focus rings — need 3:1 under WCAG 1.4.11, which you can also check here by entering the component color against its background.

The sharp edges: thresholds are hard cut-offs, and near-misses are common — #767676 on white is 4.54:1 and passes AA, while the barely lighter #777777 is 4.48:1 and fails. The checker compares two opaque HEX colors, so flatten any transparency onto its real background before testing; for text on gradients or photos, test the lightest and darkest spots. And a big hue difference alone — red on green — doesn’t guarantee contrast: only the luminance difference counts.

Frequently asked questions

Which WCAG level do I actually need?: AA is the practical and legal baseline — 4.5:1 for normal text — and what most regulations and audits reference (they broadly point at WCAG 2.1 AA). AAA’s 7:1 is worth targeting for long-form reading, small text or low-vision audiences, but even WCAG doesn’t expect AAA across an entire site.
What counts as “large text”?: WCAG defines it as at least 18pt (24px) at normal weight, or at least 14pt (about 18.7px) bold. Large text only needs 3:1 at level AA — that’s the AA Large badge — because thicker, bigger strokes stay legible at lower contrast. Body copy, captions and UI labels are normal text and need the full 4.5:1.
How is the contrast ratio calculated?: Each color is converted to a relative luminance — the sRGB channels are linearized, then weighted 0.2126 red, 0.7152 green and 0.0722 blue — and the ratio is (L1 + 0.05) / (L2 + 0.05), lighter over darker. The scale runs from 1:1 (identical colors) to 21:1 (black on white). Only luminance matters: hue pairings that look vivid can still score poorly.
Do these thresholds apply to buttons and icons too?: Text inside a button follows the normal text rules against the button’s fill. The non-text parts — icons, input borders, focus indicators, chart strokes — need 3:1 against adjacent colors under WCAG 1.4.11. Disabled controls and purely decorative graphics are exempt.
My color fails by a hair — does it still count as a fail?: For conformance, yes: the thresholds are hard lines. On white, #767676 passes AA at 4.54:1 while the barely lighter #777777 fails at 4.48:1. Darken the color a touch, push the text into the large bracket (bigger or bold), or reserve the failing shade for decorative elements.
Does transparency change the result?: This checker compares two opaque colors, so semi-transparent text or overlays must be flattened first: work out (or eyedropper-pick) the color actually rendered on screen, then test that. The same goes for text over images or gradients — test the worst-case region.
Is anything uploaded?: No. The luminance math runs in your browser on every change; your color choices never leave the page.

Color Contrast Checker

How it works

Frequently asked questions

Related tools