Contrast isn't about how colors look — it's about measured luminance
Two colors can look 'pretty different' to the eye while producing a contrast ratio that fails accessibility standards, because human color perception and the WCAG formula aren't measuring the same thing. WCAG 2.1 contrast is based on relative luminance — a calculated measure of how much light a color effectively reflects, weighted by how sensitive human vision is to each color channel. Green contributes far more to perceived brightness than blue does, which is why the luminance formula weights the channels unevenly rather than just averaging red, green, and blue.
This tool computes that formula directly rather than approximating it, which is why the live ratio it shows is the actual number auditors and automated accessibility checkers will compute too.
The actual formula, step by step
Relative luminance is calculated as L = 0.2126 × R + 0.7152 × G + 0.0722 × B, using sRGB-linearized values for R, G, and B — meaning the raw 0–255 color values are first converted through a gamma-correction step before being weighted and summed. Notice the weights: green (0.7152) contributes more than ten times as much to perceived luminance as blue (0.0722), which is why a pure blue and a pure green at the same raw brightness can have very different effective luminance.
Once both colors have a luminance value, the contrast ratio is: ratio = (L_light + 0.05) ÷ (L_dark + 0.05), where L_light is the higher of the two luminance values and L_dark is the lower. The +0.05 offset in both the numerator and denominator prevents the ratio from becoming undefined or extreme when one of the colors is pure black (luminance 0). The result is always expressed as X:1, ranging from 1:1 (identical colors, no contrast) up to 21:1 (pure black against pure white, the maximum possible).
WCAG thresholds by text size and conformance level
| Text type | AA minimum | AAA minimum |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text (≥18pt / 24px regular, or ≥14pt / 18.66px bold) | 3:1 | 4.5:1 |
| Non-text UI elements (icon borders, focus rings) | 3:1 against adjacent colors | Not separately defined |
Checking a color pair
Pick a foreground (text) color and a background color using the swatches or HEX inputs.
Read the live contrast ratio displayed at the top of the results panel.
Check the WCAG 2.1 results grid for AA and AAA pass/fail on both normal and large text.
Hit the swap button to flip the two colors and re-test — useful for checking both text-on-background and background-on-text scenarios quickly.
Why large text gets a lower bar
The lower threshold for large text isn't an arbitrary relaxation — it reflects that bigger glyphs are inherently easier to distinguish from their background even at lower contrast, since there's simply more pixel area per character for the eye to resolve shape from. The size cutoff itself is specific: 18pt (24px) or larger for regular weight, or 14pt (18.66px) or larger specifically when bold, since bold strokes add visual weight that partially compensates for the smaller size. Text that's bold but under 14pt, or regular-weight but under 18pt, still falls under the stricter normal-text thresholds — the exemption only applies at or above those specific size-and-weight combinations.
Getting a genuinely accessible result, not just a passing number
It's also worth testing pairs in both directions: light text on a dark background and dark text on a light background can produce different ratios in a design system where you're reusing a fixed set of theme colors across contexts, since the formula is not symmetric in every practical sense once you're choosing which color plays which role.
Common mistakes
Judging contrast by eye instead of checking the actual ratio — colors that look sufficiently different can still fail 4.5:1, especially with certain hue combinations like blue-on-black or dark red-on-black.
Applying the large-text exemption to text that's bold but under 14pt, or large but not actually bold or 18pt+ — the size-and-weight threshold is specific, not a general 'it looks big' judgment.
Checking only text contrast while ignoring non-text UI elements like icon borders and focus rings, which have their own 3:1 requirement under WCAG 2.1.
Testing a color pair once and assuming it holds everywhere it's reused — the same foreground color against a slightly different background shade in another part of a design system can produce a different, potentially failing ratio.
Real use cases
Verifying a brand's primary button color has sufficient contrast against its label text before shipping a design system.
Auditing an existing website's color palette for WCAG AA compliance ahead of an accessibility review.
Choosing between two similar accent colors by checking which one clears AAA for body text.
Testing icon or border colors against their background to confirm the 3:1 non-text contrast requirement.
Frequently asked questions
Q: What formula is used to compute contrast?
A: The standard WCAG 2.1 formula: relative luminance L = 0.2126×R + 0.7152×G + 0.0722×B (with sRGB linearization), then ratio = (L_light + 0.05) ÷ (L_dark + 0.05).
Q: What counts as 'large text'?
A: WCAG defines large text as 18pt (24px) or larger at regular weight, or 14pt (18.66px) or larger at bold weight. Large text gets a lower contrast threshold: 3:1 for AA, 4.5:1 for AAA.
Q: What ratios should I aim for?
A: AA normal text needs 4.5:1, AAA needs 7:1. Large text needs 3:1 for AA or 4.5:1 for AAA. Going AAA on body text is a strong accessibility win where your palette allows it.
Q: Does this work for buttons and UI components?
A: Yes — test the text color against the button's background color. For non-text contrast, like icon borders or focus rings, WCAG 2.1 asks for a minimum of 3:1 against adjacent colors.
Q: Are my colors sent to a server?
A: No. The ratio is computed entirely in your browser.
Q: Why does swapping foreground and background sometimes give a different-looking result even though the ratio number stays the same?
A: The ratio itself is symmetric — swapping the two colors doesn't change the number — but which color plays the text role versus the background role can change how a design reads visually, which is why checking the pairing in its actual intended context still matters beyond just the numeric ratio.
Check your colors now
Test your pair with the Contrast Checker. Need to convert a color between formats first? Try the Color Converter. Building a full palette? Use the Color Palette Generator, or explore gradients with the Gradient Generator.
