Color Contrast Explained: WCAG 4.5:1, 3:1 & 7:1

A plain-language guide to contrast ratios, and a game to feel what low contrast really costs.

Short answer: a contrast ratio compares the relative luminance (brightness) of two colors, usually text against its background. The Web Content Accessibility Guidelines (WCAG) set minimum ratios of 4.5:1 for normal text and 3:1 for large text at level AA, rising to 7:1 and 4.5:1 at the stricter level AAA. Higher ratios are easier to read.

Text color Background

Sample text: the quick brown fox

Contrast ratio: 4.54:1

Level	Normal text	Large text
WCAG AA
WCAG AAA

AA needs 4.5:1 (normal) or 3:1 (large, 18pt / 14pt bold); AAA needs 7:1 or 4.5:1.

What a contrast ratio actually measures

Contrast is written as a ratio from 1:1 (two identical colors, invisible against each other) to 21:1 (pure black on pure white, the maximum). It is computed from the relative luminance of each color, not from hue: a bright red and a bright green can look very different yet share almost the same luminance, which is exactly why colorful does not guarantee readable. The ratio describes what your eye needs to separate a shape, a letter, an icon or an edge, from whatever sits behind it, so it is really a measure of legibility rather than of prettiness.

How relative luminance is computed

The formula is precise, which is what lets any tool check a page automatically. Each color channel is first linearized from its sRGB value, then the channels are weighted and summed by how strongly the eye responds to them: luminance equals about 0.2126 of red plus 0.7152 of green plus 0.0722 of blue. Green carries most of the weight because the eye is most sensitive to it, and blue carries very little. The two luminances are then combined as (lighter plus 0.05) divided by (darker plus 0.05). The small added constant models a little stray light in real viewing, so the scale never quite reaches infinity.

The four WCAG thresholds

WCAG defines two conformance levels. AA is the practical baseline most sites and procurement rules target; AAA is the enhanced bar for critical or high-accessibility contexts.

Content	Level AA	Level AAA
Normal text	4.5:1	7:1
Large text (24px, or 18.66px bold)	3:1	4.5:1
Non-text UI and graphics	3:1	n/a

Large text is allowed a lower ratio because bigger letters carry more of their own shape, so the reader needs less contrast to resolve them.

Why these exact numbers?

The thresholds are not arbitrary. The 4.5:1 minimum was chosen to compensate for the loss of contrast sensitivity typical of roughly 20/40 vision, which is common with normal aging. The AAA 7:1 level models a more significant loss, around 20/80 vision. In other words, the numbers translate a visual-ability target into a concrete design rule that anyone can check, which is what makes them usable in law and procurement rather than only in theory.

Contrast beyond text

Text is only the start. Success Criterion 1.4.11 also asks for enough contrast on the meaningful parts of user-interface components and graphics, a 3:1 minimum for those non-text elements. Low contrast at an edge, where one shade meets another, is where readability quietly breaks down: a faint border, a barely-there focus ring, or a chart where two series blur together. Training your eye to notice those weak seams is a real and transferable skill, and it connects directly to why lightness rather than hue drives contrast.

The limits of the ratio

The WCAG ratio is deliberately simple, and that simplicity has costs. Because it uses only luminance, it ignores hue entirely, so two colors can pass the number yet still be hard to separate for some readers, and it can be too strict for light gray text on white while too lenient for some dark combinations. A newer method, the Advanced Perceptual Contrast Algorithm (APCA), is being explored for a future version of the guidelines to model perceived contrast more closely, weighing text size and weight as well as color. Until that lands, the current ratios remain the practical, testable standard, and clearing them is still the right first move. Readers who see color differently rely on it most, as the awareness guide explains.

Feel it: find the faint seam

Reading about contrast is one thing; catching it is another. In Hueseam, a wide color bar hides a faint vertical seam where the shade steps. Slide the marker to the edge you can just make out. It is a direct, hands-on way to sense how small a luminance difference the human eye can and cannot resolve.

Play Hueseam →

Frequently asked questions

What is a good color contrast ratio?

For normal body text, WCAG level AA requires a contrast ratio of at least 4.5:1. Large text (about 24px, or 18.66px bold) needs at least 3:1. The stricter AAA level asks for 7:1 for normal text and 4.5:1 for large text. Non-text elements such as icons and controls need at least 3:1.

What is the difference between AA and AAA contrast?

AA is the widely-adopted baseline: 4.5:1 for normal text and 3:1 for large text. AAA is the enhanced level: 7:1 for normal text and 4.5:1 for large text, meant to help readers with more significant contrast-sensitivity loss.

What counts as large text in WCAG?

Large text is at least 18 point (about 24px), or 14 point bold (about 18.66px). Larger text is easier to read at lower contrast, so it is allowed a lower minimum ratio.

Why 4.5:1 specifically?

The 4.5:1 figure was chosen to compensate for the contrast-sensitivity loss experienced by someone with roughly 20/40 vision, which is common with normal aging. The AAA 7:1 level corresponds to roughly 20/80 vision.

Does the contrast ratio account for color blindness or hue?

Not directly. The WCAG ratio is based only on relative luminance, the brightness of each color, so it ignores hue. That is intentional, because luminance contrast survives most forms of color vision deficiency, but it means two colors can pass the ratio yet still be hard to tell apart for some viewers. A newer method, APCA, is being explored for future guidelines to model perceived contrast more closely.