A contrast ratio chart maps the numerical relationship between two colors to the WCAG accessibility thresholds that decide whether text stays readable for most people. The ratio itself is the lighter color's relative luminance divided by the darker color's relative luminance, with a small 0.05 offset added to both sides of the equation so that identical colors yield 1:1 instead of zero. Ratios run on a fixed scale from 1:1 — the same color on itself — up to 21:1, the value produced by pure black (#000000) on pure white (#ffffff). Each threshold on the chart corresponds to a real consequence: WCAG Level AA asks for at least 4.5:1 on normal body text and 3:1 on large text, while Level AAA raises those floors to 7:1 and 4.5:1 respectively. A separate 3:1 minimum applies to UI components, icons, and graphical objects. Reading the chart correctly is the difference between shipping a usable site and shipping one that roughly one in twelve men and millions of low-vision readers cannot read.
How a Contrast Ratio Chart Is Built
The chart is grounded in a specific formula, not a feel-good estimate. The Web Content Accessibility Guidelines define a procedure that turns any two hex values into a single ratio number, and the same procedure has been used since WCAG 2.0.
Each color channel — red, green, blue — is first converted from sRGB into linear light. The three linear values are then combined into a relative luminance using the weights 0.2126 for red, 0.7152 for green, and 0.0722 for blue. Once both colors have a luminance, the ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color and L2 the darker.
Because the math only depends on the two colors, the ratio is symmetric. Swapping foreground and background gives the exact same number. That is why the chart can be read either way around and why "text on background" and "background under text" both refer to the same row.
A worked example: pure black (#000000) has a luminance of 0.0 because every channel is zero. Pure white (#ffffff) has a luminance of 1.0. Plugging into the formula gives (1.0 + 0.05) / (0.0 + 0.05) = 1.05 / 0.05 = 21. That is the top of the chart and the best contrast the formula can return.
WCAG Contrast Ratio Thresholds at a Glance
The chart is only useful if you know what each line on it means. WCAG draws three meaningful horizontal lines across the ratio scale — one for compliance levels and one for non-text elements — and reading the chart correctly means knowing which line you are aiming for.
| Standard | Normal text | Large text | UI components and graphics |
|---|---|---|---|
| WCAG AA | 4.5:1 | 3:1 | 3:1 |
| WCAG AAA | 7:1 | 4.5:1 | — |
Large text is defined as at least 18pt (24px) at regular weight, or at least 14pt (about 18.66px) when bold. Larger letters are easier to read, so the chart allows them to sit lower on the scale. UI components, icons, focus rings, and form-field borders are governed by the non-text contrast rule and need only 3:1 to be considered perceivable.
Anything below 3:1 fails every test on the chart. Anything that clears 7:1 clears everything except the AAA-only large-text bar — which is automatic at that point, because AAA's large-text threshold of 4.5:1 sits well below 7:1. The interesting band of the chart is therefore 3:1 to 7:1, where the pass or fail depends on which conformance level you are targeting and which kind of content you are styling.
Reading a Color Pair Against the Chart
Once you have a hex value for the text and one for its background, the chart works the same way every time: compute the ratio, then read across the row to see which boxes light up. The official procedure is documented at the W3C's Contrast (Minimum) understanding page, and the formula has not changed between WCAG 2.0 and 2.1. That stability is why a chart built today will still be valid against tomorrow's audits: the math is fixed, and only the thresholds for new content types get added.
A few practical reading rules worth keeping on hand:
- Identical colors land at 1:1 and fail every test on the chart.
- Pure black on pure white lands at 21:1 and passes every test on the chart.
- A pair between 4.5:1 and 7:1 passes AA on both text sizes but only AAA on large text.
- A pair below 3:1 fails every text rule but may still work for incidental decorative shapes.
Where Familiar Color Combinations Sit
Knowing the threshold lines is half the chart; the other half is knowing where real palettes land on it. A few common pairings, ordered from strongest contrast to weakest, give a sense of where everyday colors tend to sit:
- Pure black on white anchors the very top at 21:1 and clears every threshold on the chart.
- A dark navy text on a white background typically lands well above the AAA ceiling of 7:1, so it clears every line.
- A medium gray on white tends to sit somewhere in the middle — usually passing AA for normal text but rarely clearing AAA.
- A light gray placeholder on white usually falls below the 3:1 line, failing AA for body copy and even for large text.
- A bright brand color like sky blue on white often lands between 3:1 and 4.5:1 — fine for large headings and UI accents, but not enough for body text.
These are orientation points only. Small shifts in hue and lightness move a pair by more than one threshold band, which is exactly why a reference chart is more reliable than eyeballing a swatch. For the exact ratio on any specific hex value, measure it directly in the tool covered in the next section.
What the Contrast Number Misses
The chart measures luminance contrast, not hue. Two colors with very different hues but similar brightness — a deep red on a dark green, for example — can produce a ratio that fails AA even though they look distinct to some viewers. The reverse is also possible: a hue pair that fails for one viewer with color vision deficiency can pass for someone else. Roughly one in twelve men and one in two hundred women have some form of color vision deficiency, so any design that leans on hue alone to convey meaning will lose a meaningful slice of its audience.
The formula also assumes a flat background. Gradients, semi-transparent overlays, and text placed on photographic images make the effective background change under each letter, so the chart's single-number answer can hide real failures at the lightest and darkest points a glyph sits on. Placeholder text, disabled states, and very thin decorative fonts are common failure spots worth re-checking against the actual rendered pixels rather than the nominal hex value.
The chart does not assess readability in the linguistic sense — letter shape, font size, line height, and language all sit outside the formula. Treat the chart as a necessary floor, not the whole job.
Run Any Color Pair Through the Color Contrast Checker
A reference chart is the fastest way to read a known ratio, but most of the time you are starting from a brand color and need to know where it lands. The Color Contrast Checker is built for that exact task: you give it the two hex values and it returns the ratio plus a pass or fail badge for every WCAG threshold that matters.
- Set the foreground (text) color using the color picker or by typing a hex value like #111111.
- Set the background color the same way, for example #ffffff.
- Read the contrast ratio and the AA/AAA pass or fail badges, and adjust either color until it meets the level you need.
The tool reports AA and AAA for normal text, AA and AAA for large text, and the 3:1 non-text rule for UI components and graphics, all at the same time. That way the chart effectively surrounds your pair — you see which thresholds it crosses and which it falls short of, without having to compute the ratio yourself. For a deeper walkthrough of the math behind the chart, the Accessibility Contrast Ratio: Formula and Thresholds guide lays the same formula out step by step.
One last habit worth keeping. The chart is a floor, not a ceiling. Hitting AA is the legal and accessibility baseline in many places — the ADA in the United States, Section 508 for federal agencies, and EN 301 549 for public-sector sites across the European Union all reference WCAG directly — but aiming for AAA where the design allows gives the widest audience a comfortable read. Aim the contrast line higher than the minimum whenever you can, and recheck the chart against every new color you ship.