WCAG 2.x defines color contrast as (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 of the darker, producing a ratio that runs from 1:1 (no contrast at all) to 21:1 (pure black on pure white). For CSS work, this number is the single most important accessibility measurement, because it tells you whether body copy, button labels, error messages, and form fields will be legible for the readers who need them most. The Color Contrast Checker computes that ratio the way the W3C specifies: each sRGB channel is linearized, the three channels are combined into a relative luminance using the weights 0.2126 for red, 0.7152 for green, and 0.0722 for blue, and the result is plugged into the formula above. The same number governs both everyday readability and legal compliance, so verifying it before a stylesheet ships prevents both embarrassing bugs and audit findings.
What the WCAG Contrast Ratio Actually Measures
The formula looks compact, but the math behind each side is precise. Each color channel is first normalized to a 0–1 range from its 8-bit value, then linearized so the math reflects how human eyes respond to light. If the normalized channel is 0.03928 or below, it is divided by 12.92; otherwise it is raised to a power of 2.4 after a small offset. The three linear channels are then weighted with the coefficients 0.2126 for red, 0.7152 for green, and 0.0722 for blue, matching the eye's stronger sensitivity to green wavelengths. The combined result is called relative luminance, and it is the number plugged into the contrast formula.
A simple end-to-end example makes this concrete. Pure white (#ffffff) yields a linear value of 1.0 for each channel, so its luminance L = 0.2126 × 1 + 0.7152 × 1 + 0.0722 × 1 = 1.0. Pure black (#000000) yields 0 for every channel, so L = 0. Their contrast ratio is therefore (1.0 + 0.05) / (0 + 0.05) = 1.05 / 0.05 = 21.0, which is the maximum possible score and the upper bound the checker will ever show. Two identical mid-gray values give L1 = L2 and a ratio of 1.0, the floor.
This matters for CSS code because the ratio depends only on the two color values, not on which one is text and which one is background. Swapping foreground and background in your stylesheet never changes the ratio. The number is a property of the color pair itself, which means the same checker output applies whether you set the value in color: or background-color:.
Why CSS Color Choices Need Contrast Testing
Contrast in CSS is not cosmetic. The Americans with Disabilities Act is routinely applied to websites in the United States, Section 508 mandates accessibility for federal agencies, and the European standard EN 301 549 references WCAG directly for public-sector sites. A stylesheet that ships with poor contrast is a compliance risk, not a minor design choice. Beyond the legal layer, contrast is what keeps body copy, button labels, and error messages legible for the readers who rely on them, including the millions who read with low vision, cataracts, or on cheap screens in bright sunlight, plus the substantial share of users with some form of color vision deficiency.
CSS makes it trivially easy to introduce contrast problems. A new theme color, a darker hover state, a subtle border on a focused form field, or a placeholder gray that seemed readable in design can each silently fail at runtime. The Color Contrast Checker catches these issues before they ship, because it returns a clear pass-or-fail badge for every WCAG level at once: AA normal text, AA large text, AAA normal text, AAA large text, and the 3:1 non-text rule for UI components and graphical objects.
Run a Color Pair Through the Checker
This is the core workflow for validating any CSS color combination before it lands in your stylesheet.
- Open the Color Contrast Checker in your browser.
- Set the foreground (text) color using the color picker, or type the hex value directly — for example #111111.
- Set the background color the same way; #ffffff is the standard white used in most CSS resets.
- Read the contrast ratio shown on screen, alongside the AA and AAA pass-or-fail badges for normal text, large text, and UI components.
- Adjust either color until the badges show the level you need, then copy the verified hex values into your stylesheet.
Because everything runs locally in your browser, you can test brand palettes and design tokens privately without uploading anything to a server.
Applying Results in CSS Code
Once you have a passing pair, the way it lands in CSS matters. A typical valid pair could be a near-black foreground like #1a1a1a on a white background, scoring well above 15:1 and comfortably clearing AAA for normal text. The stylesheet snippet might set color: #1a1a1a; and background: #ffffff; on the body element. Every value that came out of a passing checker can be dropped straight into a stylesheet, custom property, or design token without further math.
A few CSS-specific patterns deserve attention. First, button and link states often need separate pairs: a default state on white, a hover state on a darker background, and a focused state with a visible outline. Each pair needs its own contrast check. Second, custom properties (CSS variables) let you define colors once and reuse them, but the contrast number only makes sense for the pair that actually appears in the rendered DOM. If --text-color is paired with --surface-color in one section and --bg-color in another, both pairings must pass.
For larger text, WCAG relaxes the thresholds because thicker letters are easier to read. The same dark-on-white pair that scores above 15:1 will pass AA at body sizes and AAA at large sizes; the Color Contrast Checker shows both pass badges so you can see at a glance which level the pair clears at which size. That distinction lets you choose smaller body type only where contrast comfortably clears 7:1.
WCAG Thresholds at a Glance
Here are the official WCAG 2.x contrast ratios that the tool reports against, drawn directly from the W3C specification:
| Content type | AA (minimum) | AAA (enhanced) |
|---|---|---|
| Normal text | 4.5 : 1 | 7 : 1 |
| Large text (at least 18pt regular or 14pt bold) | 3 : 1 | 4.5 : 1 |
| UI components and graphical objects | 3 : 1 | — |
Passing AA is a floor, not a ceiling. The checker reports the precise decimal ratio, so if you are aiming for AAA you can see how much headroom you have. A pair that scores 7.4:1 clears AAA for normal text, while 6.9:1 only passes AA. That small gap is the difference between comfortable reading for the widest audience and a borderline pass.
Common CSS Color Pitfalls That Break Contrast
The contrast ratio covers luminance, not hue, so two colors with very different hues but similar brightness, such as red on green, can still fail even though they look distinct to some viewers. This is also why relying on color alone to convey meaning is discouraged: pair a color change with a text label, an icon, or an underline.
Several CSS patterns hide contrast failures and deserve extra attention:
- Gradients and semi-transparent overlays: the effective background changes across the element. Test against the lightest and darkest points a letter might sit on.
- Text on images: the background varies by pixel. Avoid placing text directly on busy images, or add a solid panel beneath the text and test that panel.
- Placeholder text: browser default placeholder colors are usually too light. Check the contrast of ::placeholder against the input background.
- Disabled states: browsers often render disabled controls at low opacity. Check the resulting rendered color, not the original token.
- Focus indicators: a 2px outline at 3:1 is required for UI components per the WCAG non-text rule. Check focus-ring colors against both light and dark surfaces.
Building a Verification Workflow
The fastest path to consistent accessible CSS is to test every new color pair the moment it enters the design system. A practical workflow looks like this: define every brand and neutral color as a CSS custom property, list the surface colors that pair with them, then run each pair through the checker. Any pair that does not clear the level you target gets adjusted before it touches a stylesheet. Per the W3C's Contrast (Minimum) understanding document, the formula and thresholds used here are the ones referenced by every modern accessibility standard, so the numbers you get will match what auditors and automated tools report.
Storing the verified pairs as variables means they can be reused with confidence, and any future theme change only needs re-checking the pairs that actually changed. If you build interactive prototypes or components in Chrome, you can also check color contrast for accessibility in Chrome to spot issues during development rather than after a build.
For a deeper look, see Gradient Generator: Drag Stops, Preview, Copy CSS.