Free Color contrast checker
Enter a foreground (text) and background hex color — or use the picker — and this WCAG color contrast checker shows the contrast ratio and a PASS/FAIL for AA and AAA, plus the 3:1 rule for UI components, updated live, as you type.
On this page12 sections
Grades color contrast against the WCAG 2.1 thresholds — a passing ratio is the minimum, not a guarantee of readability. Nothing you enter is stored or sent; the check runs in your browser.
Results are estimates. Consult a professional.
What a color contrast ratio is, and why accessibility needs it
Color contrast is the difference in brightness between text (or an interface element) and the background behind it. WCAG measures it as a single number — the contrast ratio — that runs from 1:1, when the two colors are identical and the text is invisible, up to 21:1, the maximum, which is pure black on pure white. The higher the number, the easier the text is to read.
It matters because not everyone sees color the same way. People with low vision, color-vision deficiencies, or simply aging eyes — and anyone reading on a dim phone in bright sun — rely on adequate contrast to make out words. Low-contrast text, like light gray on white, is one of the most common and most preventable accessibility failures on the web. The Web Content Accessibility Guidelines (WCAG) set minimum ratios so that designs work for the widest possible audience, and many accessibility laws point directly at those thresholds.
The checker above measures the ratio between any two colors and grades it against every WCAG 2.1 level at once. Enter a foreground (text) color and a background color — type a hex code or use the color picker — and it reports the ratio plus a PASS or FAIL for AA, AAA, and the 3:1 rule for user-interface components.
How the contrast ratio is calculated
The contrast ratio is not a simple subtraction of the two hex values — it is built on relative luminance, the perceived brightness of a color once you account for how human eyes respond more strongly to green than to red or blue. WCAG defines the calculation in two stages: first the relative luminance of each color, then the ratio between them.
Step 1 — Relative luminance of each color
Each red, green, and blue channel (0–255) is first turned into a fraction and "linearized" to undo the sRGB gamma curve, then the three are combined with luminance weights. Green counts for roughly 72%, red 21%, and blue just 7%, mirroring the eye's sensitivity.
Step 2 — The contrast ratio
With both luminances known, the ratio puts the lighter color on top and the darker on the bottom, adding 0.05 to each so the formula never divides by zero:
What to enter
- Foreground (text) color — the color of the text or icon you want to read. Enter a hex code such as
#2e7d32, or click the swatch to pick visually. Three-digit shorthand like#fffand codes without the#both work. - Background color — the color directly behind the foreground. For text, that is the page or container color the words sit on.
A worked example using the contrast checker
Say you want to use a brand green, #2e7d32, for body text on a white page (#ffffff). Will it pass WCAG? We'll work the two colors through the formula, then confirm against the checker.
Step 1 — Relative luminance of each color
White is the maximum, so its relative luminance is L = 1.0000. Linearizing the green #2e7d32 (R=46, G=125, B=50) and applying the weights gives L ≈ 0.1548.
Step 2 — Apply the ratio formula
White is lighter, so it is L1 and the green is L2: (1.0000 + 0.05) / (0.1548 + 0.05) = 5.13. The checker reports a ratio of 5.13:1 for #2e7d32 on #ffffff.
Step 3 — Read the PASS / FAIL grades
5.13:1 clears 4.5:1, so it passes AA for normal text and (being above 3:1 and 4.5:1) also passes AA large and AAA large. It falls short of the 7:1 needed for AAA normal text, so that one shows FAIL. The green is a safe choice for ordinary body text under AA — the level most projects target.
The WCAG AA and AAA contrast thresholds
WCAG sets different minimums for different content. Larger text needs less contrast because the strokes are thicker and easier to resolve. "Large text" means at least 18pt (about 24px), or 14pt bold (about 18.5px); anything smaller counts as normal text. AA is the level most organizations aim for and that accessibility laws typically reference; AAA is a stricter, enhanced level.
| Content | AA (minimum) | AAA (enhanced) |
|---|---|---|
| Normal text (< 18pt / < 14pt bold) | 4.5:1 | 7:1 |
| Large text (≥ 18pt or ≥ 14pt bold) | 3:1 | 4.5:1 |
| UI components & graphical objects | 3:1 | 3:1 |
Text minimums from WCAG 2.1 SC 1.4.3 (AA) and SC 1.4.6 (AAA). The 3:1 minimum for user-interface components and meaningful graphics is SC 1.4.11 Non-text Contrast, a separate criterion with no higher AAA tier.
The 3:1 requirement for user-interface components and graphical objects is WCAG 2.1 Success Criterion 1.4.11 (Non-text Contrast), distinct from the text-contrast criteria.When to use a contrast checker
- Designing accessible text. Before settling on body, heading, or caption colors, check them against their background so you ship at AA (or AAA) rather than discovering a failure in an audit later.
- Checking brand colors. Brand palettes are chosen for identity, not legibility. Test your brand color as text on white and on your brand background to see where it works and where you need a darker variant.
- Link, button, and hover states. Each interactive state has its own foreground and background. A button that passes at rest can fail on hover or when disabled — and per SC 1.4.11 the button's edge or fill needs 3:1 against its surroundings to be perceivable at all.
- Form fields and placeholders. Placeholder and helper text are often the lightest gray on the page and the most likely to fail; check them explicitly.
Limits and common mistakes
The ratio is exact math, but knowing what it does and does not promise keeps you from misusing it.
- The range is 1:1 to 21:1. 1:1 is identical colors (invisible text); 21:1 is the absolute maximum, black on white. No real pair exceeds 21:1, so treat a result near that as black-and-white.
- "Large text" has a specific definition. It is ≥ 18pt, or ≥ 14pt bold — not just "looks big." Using the 3:1 large-text allowance for text that does not meet the size definition is a common audit failure.
- Passing contrast is not guaranteed readability. The ratio is a minimum, not a ceiling. A thin, condensed font at 4.5:1 can still be hard to read; weight, size, letter-spacing, and line length all matter beyond the number.
- Alpha and opacity are not handled. The formula assumes fully opaque sRGB colors. If your text or background uses transparency, first flatten it against whatever shows through, then check the resulting solid colors.
- It only checks two colors at a time. Text over a photo, a gradient, or a busy background has many effective backgrounds; check against the lightest and darkest regions the text actually crosses.
Is this contrast checker private?
Yes. The colors you enter and the ratio are computed entirely in your browser with plain arithmetic. Nothing is stored, logged, or sent to any server — there is no network request, so the tool works the same offline. Colors are not sensitive data, but the page is built so there is nothing to send in the first place.
Frequently asked questions about the free Color contrast checker
About this Color contrast checker
This WCAG color contrast checker runs entirely in your browser. The colors you enter are never stored, logged, or sent to any server — the relative-luminance and ratio math is computed locally, so the tool works the same offline. It grades two opaque colors against the WCAG 2.1 thresholds; alpha/opacity is not handled.
Pairs well with our color converter for turning hex into RGB and HSL. Browse the rest of our dev tools, or see the full library on the all calculators page.