A color contrast checker measures how readable a text color is against its background by computing a single luminance ratio using the formula (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 is the luminance of the darker one. The math comes straight from the Web Content Accessibility Guidelines, so a contrast checker is essentially a real-time implementation of the rule that a low-vision reader, a screen reader user, or a parent squinting at a phone in sunlight relies on when they try to use your page. Ratios always sit between 1:1 for identical colors and 21:1 for pure black on pure white, and WCAG maps those numbers onto two conformance levels. AA requires at least 4.5:1 for normal text and 3:1 for large text; AAA pushes that to 7:1 and 4.5:1 respectively, and a separate non-text rule asks for at least 3:1 on UI components, icons, and focus rings. That is why a contrast checker is part of almost every accessibility audit — it converts the abstract standard into a number you can act on for every color pair in your design system.
How the WCAG 2.x contrast formula works
The WCAG 2.x ratio formula needs three numbers: the linear-light value of each sRGB channel, a weighted luminance for each color, and then the ratio. Each color channel is treated as an integer from 0 to 255, divided by 255 to normalize it to a 0–1 value, and then run through the sRGB linearization curve. For any channel value c, if c is 0.03928 or smaller the linear value is c divided by 12.92; otherwise the linear value is ((c + 0.055) divided by 1.055) raised to the power 2.4. Those linear channel values are then multiplied by 0.2126 for red, 0.7152 for green, and 0.0722 for blue and summed to produce the relative luminance L of that color.
The two luminances are plugged into (L1 + 0.05) divided by (L2 + 0.05), where L1 is the lighter of the two colors and L2 is the darker. The 0.05 offset keeps the formula from blowing up to infinity when one color is pure black, and it produces the canonical 21:1 ceiling for black on white.
A worked example using #767676 on #ffffff, the W3C reference pair for borderline AA:
- Channel value: 118 ÷ 255 = 0.4627
- Linearize: ((0.4627 + 0.055) ÷ 1.055) raised to 2.4 = 0.1814
- Luminance (all three channels equal): 0.1814
- Lighter color (#ffffff): L1 = 1.0000
- Ratio: (1.0000 + 0.05) ÷ (0.1814 + 0.05) = 1.05 ÷ 0.2314 ≈ 4.54:1
That is the exact pair the W3C points to as a borderline AA pass — go any darker and you would dip below 4.5:1, any lighter and you would clear it comfortably. The full specification is on the W3C page for Contrast (Minimum).
WCAG AA and AAA thresholds at a glance
The ratio is only the input; the output is a pass or fail decision against each threshold WCAG defines. The numbers the W3C sets for text and non-text content per WCAG 2.1 Contrast (Minimum) are:
| Element | Level AA | Level AAA |
|---|---|---|
| Normal text | ≥ 4.5:1 | ≥ 7:1 |
| Large text (≥18pt regular or 14pt bold) | ≥ 3:1 | ≥ 4.5:1 |
| UI components and graphical objects | ≥ 3:1 | ≥ 3:1 |
Large text earns the lower threshold because thicker, larger strokes are perceptually easier to read, and WCAG defines large as at least 18pt (24px) at regular weight or 14pt (about 18.66px) when bold. The non-text rule at 3:1 covers form field borders, focus indicators, icons that carry meaning, and any other graphical object the user has to perceive to use the page. A separate AAA requirement also calls for enhanced contrast on text, which is what the 7:1 column reflects.
How to test a color pair with the Color Contrast Checker
The Color Contrast Checker runs the formula above locally in your browser, so you can iterate on brand palettes and design tokens without uploading anything. Three steps is all it takes:
- Set the foreground color using the color picker or by typing a hex value like #111111 — this is the color your text will be.
- Set the background color the same way, for example #ffffff — this is the surface the text sits on.
- Read the contrast ratio and the AA/AAA pass or fail badges for normal text, large text, and UI components, then adjust either color until you clear the level you need.
For a deeper walk-through of how the numbers map onto a real audit and where the formula comes from, see our practical guide to accessibility contrast ratio formulas and thresholds.
What the contrast ratio does and doesn't measure
The WCAG formula is precise about one thing — luminance — and silent about most others. Knowing its boundaries helps you avoid false confidence.
It measures luminance, not hue. Two colors that look obviously different, such as a saturated red on a saturated green, can still fail if their brightness values are close. That is why WCAG tells you never to rely on color alone to convey meaning: pair it with a text label, an icon, or an underline.
It assumes a solid, opaque background. Gradients, semi-transparent overlays, and text over images change the effective background across the element, so the safe move is to test against the lightest and darkest points a glyph could sit on, not just the average color of the surface.
It cannot grade readability on its own. A passing ratio does not save you if the text is 11px, all caps, or set in a thin decorative face. Placeholder text, disabled state labels, and small caption copy are common failure spots worth running through the checker even when the body copy passes.
Why contrast is more than a design preference
Roughly one in twelve men and one in two hundred women have some form of color vision deficiency, and millions more read with low vision, cataracts, or on cheap screens in bright sunlight. Sufficient luminance contrast is what keeps body copy, buttons, and error messages legible for all of them. A contrast checker is essentially the cheapest, fastest way to make sure the people reading your page are the same people you wrote it for.
It is also a regulatory requirement in many places. The Americans with Disabilities Act is routinely applied to websites in the United States, Section 508 mandates it for federal agencies, and the European standard EN 301 549 references WCAG directly for public-sector sites. A contrast failure on a form label, a checkout button, or an error message can become a complaint — and a remediation deadline — long before it becomes a design choice.
Practical tips for choosing safe color pairs
Contrast is symmetric. Because the formula always divides lighter by darker, swapping foreground and background produces the exact same ratio. The number describes the pair, not the role of either color, so passing on white and failing on near-black is a real possibility for the same hex value.
Treat AA as a floor, not a ceiling. AAA is unreachable for every brand palette, but hitting it for body copy and primary buttons gives the widest audience comfortable reading. Use the contrast checker to push toward AAA where you can and stay well above AA where you cannot.
Test at the actual text size. A pair that passes at 18pt can still fail at 14px body text, and the threshold you need depends on which row of the WCAG table the glyph actually triggers. Re-check after dark mode swaps, when the lighter and darker roles flip.
Run the checker over focus states and placeholder text. They are the spots that quietly fail in production even when the rest of the palette passes, and they tend to live in components that get audited last.