WCAG contrast ratio 4.5:1: where the number comes from and what implementations miss

“Contrast ratio between text and background should be at least 4.5:1” is one of the first accessibility rules people encounter. Where does that number come from, and how is it actually calculated? This article digs into WCAG’s contrast requirement.

Where 4.5:1 comes from: WCAG 2 success criterion 1.4.3

The 4.5:1 figure is the AA-level threshold for success criterion 1.4.3 (“Contrast (Minimum)“) in WCAG 2.0/2.1/2.2.

Level	Normal text	Large text	Criterion
AA	4.5 : 1	3 : 1	1.4.3
AAA	7 : 1	4.5 : 1	1.4.6

“Large text” is defined as:

• 18pt (24px) or larger for regular weight, or
• 14pt (18.66px) or larger for bold.

Anything below those sizes counts as normal text and needs the 4.5:1 ratio.

Why exactly 4.5

WCAG bases the threshold on “people with average vision (around 20/40) being able to read comfortably”. 20/40 is about half the acuity of normal vision and is common with age or mild visual impairment.

Research shows that loss of acuity also reduces contrast sensitivity. To match the comfort of a 20/20 reader, a 20/40 reader needs roughly 3 to 4.5 times more contrast. WCAG rounded up to the conservative end, landing on 4.5.

The contrast ratio formula

“Contrast ratio” is not a simple difference of brightness. It is a ratio of relative luminance:

contrast = (L1 + 0.05) / (L2 + 0.05)

• L1 — relative luminance of the lighter color
• L2 — relative luminance of the darker color
• +0.05 — empirical adjustment for ambient light reflection

Relative luminance L is a weighted sum of linearized sRGB components:

sRGB → linearized:
  C_linear = ((C_srgb / 255 + 0.055) / 1.055)^2.4   if C_srgb / 255 > 0.04045
  C_linear = C_srgb / 255 / 12.92                    otherwise

L = 0.2126 * R_linear + 0.7152 * G_linear + 0.0722 * B_linear

Green dominates the weights (0.7152) because the human eye is most sensitive to green. Pure red and pure green that look the same brightness to a quick glance actually have very different relative luminance.

It’s not “average brightness”

Worth restating: contrast ratio is not the ratio of HSL lightness, nor the ratio of average RGB values. The hue-dependent weighting changes everything.

Three pairs that look “similar enough in brightness” but rate very differently:

• Black (#000) vs White (#FFF) → 21 : 1
• Black (#000) vs Pure yellow (#FF0) → 19.56 : 1
• Pure red (#F00) vs Black (#000) → 5.25 : 1

Pure red on black is surprisingly low. It clears AA but fails AAA, and at small sizes it can already feel hard to read.

Implementation pitfalls

1. Hover and focus states need to pass too

A button at rest can be 4.5:1, but the hover state often dims or shifts colors enough to fall under. Check each state, not just the default.

2. Placeholders are subject to a different criterion, but they aren’t exempt

WCAG 2.1 added 1.4.11 (“Non-text Contrast”, 3:1) for UI components, which covers placeholders and similar form affordances. “It’s just a placeholder, illegible is fine” doesn’t hold.

3. Translucent layers should be evaluated against the composited color

rgba(0, 0, 0, 0.5) over a background is, for contrast purposes, the resulting blended color. Stacking semi-transparent layers can pass the calculation in isolation while failing in actual rendering.

4. Truly decorative text is exempt — but be conservative

Letters inside a logo, or purely ornamental text, are outside 1.4.3. Whether something is “decorative” depends on whether users need to read it; when in doubt, treat it as content.

5. Distinguishing links from surrounding text

If a link is identified by color alone, the link color and the body text color need at least 3:1 contrast between them (WCAG 1.4.1, “Use of Color”). Underlining links is the safest fix.

The numbers worth remembering

• 4.5 : 1 — normal text, AA, the workhorse threshold
• 3 : 1 — large text AA, and UI components
• 7 : 1 — normal text AAA, the stricter target

WCAG sets the floor on “is this potentially readable”, not the ceiling. Aiming for AAA when you can will help users beyond just those with visual impairments.

When you need to check whether a specific color pair clears the bar, the contrast checker on this site will rate the AA / AAA / large-text levels at once. Useful when a design review hangs on a single color choice.