Color Contrast Checker
Pick a text color and a background color — see the WCAG contrast ratio, AA/AAA pass/fail badges, and a live preview update instantly. Works with hex or RGB, and suggests an accessible shade if it fails.
Enter a valid text color (hex or rgb).
Enter a valid background color (hex or rgb).
Normal text (16px)
The quick brown fox jumps over the lazy dog.
Large text (24px bold)
Large text example
Suggested accessible shades
Already passes AA · Normal text — no adjustment needed.
All colors are checked locally in your browser — nothing is uploaded or sent to a server.
This tool checks the WCAG 2.1 contrast-ratio math only. It doesn't replace a full accessibility audit — font choice, spacing, icons and non-text elements matter too.
Why color contrast matters
Low-contrast text is one of the most common accessibility failures on the web — and one of the easiest to fix once it's measured. People with low vision, color blindness, or who are simply reading on a dim screen outdoors all rely on enough separation between text and background to read comfortably. A color contrast checker turns a subjective "does this look readable?" into an objective pass/fail number: enter your text color and background color, and get the exact WCAG contrast ratio along with which conformance levels it clears.
How the contrast ratio is calculated
WCAG 2.1 defines contrast in terms of relative luminance — roughly, how bright a color appears, weighted the way human eyes perceive red, green and blue differently:
- Each channel (0–255) is normalized to 0–1, then linearized: divide by 12.92 if the value is very small, otherwise apply
((c + 0.055) / 1.055) ^ 2.4. - Relative luminance: L = 0.2126R + 0.7152G + 0.0722B (green contributes the most, blue the least, matching human sensitivity).
- Contrast ratio: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance and L2 the darker one's.
The result ranges from 1:1 (identical colors, no contrast at all) to 21:1 (pure black on pure white, the maximum possible). This tool runs that formula the moment you type a hex code, paste an rgb() value, or drag a color picker.
Example 1 — a near-miss. Gray #777777 text on a white #ffffff background comes out to about 4.49:1 — just short of the 4.5:1 needed for AA normal text, but comfortably past the 3:1 bar for large text. A single shade darker and it clears both.
Example 2 — the maximum. Pure black #000000 on pure white #ffffff gives exactly 21:1, the highest ratio possible, passing every WCAG level for any text size.
Example 3 — a common brand-color trap. A vivid blue link color like #3b82f6 on white measures around 3.7:1 — enough for large text and UI components, but not enough for normal body text, which is why many design systems use a darker blue for paragraph links.
WCAG AA vs. AAA thresholds
| Text size | AA (minimum) | AAA (enhanced) |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text (≥18pt, or ≥14pt bold) | 3:1 | 4.5:1 |
AA is the level referenced by most accessibility regulations worldwide, including the ADA, Section 508 and EN 301 549; AAA is a stricter, recommended-but-not-required target for maximum readability. This checker shows all four badges at once so you know exactly which promises your color pair can make.
Fixing a color pair that fails
If your ratio comes up short, the suggestion panel searches your text color's lightness in both directions — lighter and darker — and shows the nearest shade in each direction that reaches 4.5:1 against your chosen background, so you can pick whichever fits your palette better. Because pure black or pure white against any background always reaches at least one of these thresholds, a passing shade always exists; sometimes it's just further from your original color than you'd like, which is a signal to reconsider the background instead.
Common mistakes
- Judging contrast by eye: two colors can look similarly "dark" or "light" while differing hugely in relative luminance once you account for how the eye weighs red, green and blue — always check the number.
- Only testing the happy path: remember to check placeholder text, disabled states, and hover/focus colors, not just the default text color.
- Confusing large-text and normal-text thresholds: a heading that passes at 3:1 will still fail as body copy at a smaller size — check the size you actually intend to use.
Sources & further reading
Frequently asked questions
What is the WCAG contrast ratio formula, and how does this checker calculate it?
The WCAG 2.1 formula first converts each color's red, green and blue channels into linear values (channel ÷ 255, then channel ÷ 12.92 if it's very dark or ((channel + 0.055) ÷ 1.055)^2.4 otherwise), then combines them into relative luminance: L = 0.2126R + 0.7152G + 0.0722B. The contrast ratio is (L1 + 0.05) ÷ (L2 + 0.05), using the lighter color's luminance as L1, which ranges from 1:1 (identical colors) to 21:1 (pure black on pure white). This color contrast checker runs that exact formula on the hex or RGB values you enter, entirely in your browser.
What contrast ratio do I need to pass WCAG AA and AAA?
WCAG defines four thresholds this tool checks at once: AA requires 4.5:1 for normal text and 3:1 for large text (at least 18pt, or 14pt bold); AAA is the stricter tier, requiring 7:1 for normal text and 4.5:1 for large text. Most accessibility laws and guidelines — including the ADA, Section 508 and EN 301 549 — reference the AA level as the baseline, while AAA is recommended for extra readability. A color pair can pass the large-text thresholds while failing the normal-text ones, which is why all four badges are shown side by side.
Can you walk through a worked example of the contrast ratio calculation?
Take gray #777777 text on a white #ffffff background. Each 119-out-of-255 channel linearizes to about 0.1845, giving a relative luminance of 0.1845 for the gray and 1.0 for white; the ratio is (1.0 + 0.05) ÷ (0.1845 + 0.05) ≈ 4.49:1. That's just under the 4.5:1 AA threshold for normal text, so it fails by a hair — but it clears 3:1, so it passes for large text. This is exactly the kind of near-miss the suggestion feature is built to fix, offering the nearest lighter or darker shade that reaches 4.5:1.
What happens with identical colors or other edge cases?
Checking a color against itself always gives a 1:1 ratio — the minimum possible — because there's no luminance difference at all, so every level fails. Very similar colors, or colors with the same lightness but different hues, can also produce a surprisingly low ratio, since contrast depends on luminance rather than how different two colors look at a glance. If your pair fails, use the swap button to check the reverse direction, or apply one of the suggested shades, which nudge your text color lighter or darker in fixed steps until it clears the AA normal-text threshold.
Is my color data uploaded or tracked?
No. Every calculation — parsing the hex or RGB values, computing relative luminance and contrast ratio, and generating suggested shades — runs locally in your browser's JavaScript. Nothing is sent to a server, there's no account, and no color values are logged anywhere. Your last two colors are saved only in your browser's local storage so they're there the next time you open the tool, and you can clear that at any time by clearing your browser data. This tool checks the contrast-ratio math only; a full accessibility audit also considers font choice, spacing and non-text elements.