skip to content

What does a color contrast ratio measure, and which text gets 4.5:1 versus 3:1?

level: juniorimportance: must knowfreq 78%

answer

  1. It always describes a pair
  2. Relative luminance, not hue
  3. The scale stops at 21 to 1
  4. Size and weight move the bar
  5. Four point five, or three for large

basics

~10 s

A contrast ratio measures how far apart two specific colors sit in relative luminance, on a scale from 1:1 to 21:1. WCAG's minimum-contrast criterion asks 4.5:1 for normal-size text and 3:1 for large text.

solid answer

~50 s

A **contrast ratio** compares the relative luminance of exactly two colors - the text color and whatever is rendered directly behind it - on a scale from **1:1** (identical) to **21:1** (black against white). Success criterion **1.4.3 Contrast (Minimum)**, level AA, requires **4.5:1** for normal-size text and **3:1** for **large text**, which the standard defines as at least 18 point, or 14 point and bold. Large type is allowed the lower figure because thicker, wider strokes stay legible at a luminance separation that would smear thin ones. A separate criterion, **1.4.11 Non-text Contrast**, also level AA, asks **3:1** for the visual parts that identify a control and for graphics needed to understand the content. Logos and incidental text are exempt. The ratio belongs to a *pair* of colors, never to one color and never to a design.

code

pseudocode · 11 lines
pseudocode
relative_luminance(color):
    linearise each of the red, green and blue components
    return 0.2126*R + 0.7152*G + 0.0722*B

ratio(a, b):
    L1 = max(relative_luminance(a), relative_luminance(b))
    L2 = min(relative_luminance(a), relative_luminance(b))
    return (L1 + 0.05) / (L2 + 0.05)

# identical colors -> 1.0
# pure black against pure white -> 21.0

go deeper

for a junior

Be ready to state the two figures and what each covers: 4.5:1 for normal-size text and 3:1 for large text, with large defined as 18 point, or 14 point and bold. Say out loud that a ratio needs two colors.

for a middle

An interviewer expects the mechanics underneath: relative luminance rather than hue, the 1:1 to 21:1 range, the separate 3:1 floor for the visual parts that identify a control, and the exemptions for logos and incidental text.

for a senior

Show how you keep pairs honest in a shipping product - measuring the color actually composited behind the glyphs, covering every visual state and every surface, and treating an exemption as a reason to look harder rather than a reason to stop.

for a principal

Own the position that a contrast figure is a property of a rendered pair, so any guarantee has to live where pairs get decided. Be ready to argue when a product should aim above the minimum rather than at it.

## What the number actually measures A **contrast ratio** is a single number describing how far apart two colors sit in perceived lightness. It is derived from each color's **relative luminance** - a weighted combination of the color's red, green and blue components after each component has been linearised - and the two luminances are then combined as `(lighter + 0.05) / (darker + 0.05)`. That small constant models a little ambient light bouncing off the display, which is why the scale runs from **1:1** for two identical colors up to **21:1** for pure black against pure white, instead of running to infinity. Two consequences fall straight out of the definition, and both of them catch candidates: - **Luminance is not hue.** The green component contributes far more luminance than the blue one. Two colors that look completely different - a strong red and a mid green, say - can land at almost the same luminance and score close to 1:1. *They look different* is not an argument about contrast. - **The number belongs to a pair.** Contrast is symmetric and pairwise. There is no such thing as an accessible color, only an accessible *pair*: this text color over that surface, at 5.2:1. ## The thresholds, side by side | Requirement | What it covers | Ratio | | --- | --- | --- | | 1.4.3 Contrast (Minimum), level AA | normal-size text and images of text | 4.5:1 | | 1.4.3 Contrast (Minimum), level AA | large text and images of large text | 3:1 | | 1.4.6 Contrast (Enhanced), level AAA | normal-size text | 7:1 | | 1.4.6 Contrast (Enhanced), level AAA | large text | 4.5:1 | | 1.4.11 Non-text Contrast, level AA | the visual parts that identify a control and its states, and graphics needed to understand the content | 3:1 | The standard defines **large text** as at least **18 point**, or **14 point and bold**. That is a typographic definition rather than a platform one, so it travels unchanged: the same rule decides a caption on a native mobile screen, a label on a self-service kiosk and a paragraph on a page. The minimum-contrast criterion also carves out two exemptions: 1. **Logotypes** - text that is part of a logo or a brand name carries no contrast requirement. 2. **Incidental text** - text that is part of an inactive control, purely decorative, invisible to everyone, or part of a picture that carries significant other visual content. Exempt means *unmeasured*, not *fine*. If the only place a user can read a value is inside an inactive control, that is a usability defect whether or not a criterion names it. ## Why large text is allowed less The eye's ability to resolve a luminance difference falls away as detail gets finer. A hairline stroke a few device pixels wide is smeared by the display, by anti-aliasing and by the optics of the eye itself, so it needs a larger luminance separation to stay crisp. Fatten and enlarge the stroke and the same separation reads comfortably. The 18-point / 14-point-bold boundary is the standard's blunt, checkable proxy for *the strokes are now thick enough*. It is deliberately crude. A very light weight at 18 point is still thin, which is one reason the enhanced criterion exists and one reason a team that aims only at the minimum will still collect readability complaints from real users. ## What the ratio does not cover - **Weight below the large-text boundary.** 4.5:1 in a hairline weight and 4.5:1 in a medium weight are not equally readable, and the number cannot tell them apart. - **Rendering and environment.** Anti-aliasing, display age, screen dimming, glare and viewing angle all cut effective contrast, and none of them appear in the figure. - **The other visual requirements.** Contrast says nothing about text size, line length, spacing, or whether meaning is carried by color alone. - **What is genuinely behind the glyphs.** The pair to measure is the text color against the color composited immediately beneath it - through any translucent layer, image or gradient - not the color of the outermost surface in the design file. ## Checking a pair in practice 1. Identify the exact two colors: the rendered text color, and the rendered color directly behind those glyphs at their worst point. 2. Classify the text. Is it at or above 18 point, or 14 point and bold? That decides whether the bar is 3:1 or 4.5:1. 3. Compute or look up the ratio, and record the pair. The number is meaningless without both colors written beside it. 4. Repeat for every visual state the control can enter and every surface it can sit on. Each combination is a different pair. Most of this is discipline rather than difficulty. The habit that separates a candidate who has shipped accessible work from one who has read about it is that they never say a color passes - they say a *pair* passes, and they say what the other color was.

  • Two colors look completely different to you but score 1.6:1. How is that possible?
    The ratio is built from relative luminance, not from hue, and the green component dominates the luminance sum. A strong red and a mid green can be far apart in hue and almost identical in lightness. That is exactly the pair that collapses for a user with a color-vision deficiency, on a dimmed display, or in print without color - so the low number is telling you something real, not being pedantic.
  • Which text does the minimum-contrast criterion exempt?
    Text that is part of a logo or brand name, and incidental text: text in an inactive control, pure decoration, text invisible to everyone, or text that is part of a picture carrying significant other visual content. Treat exempt as unmeasured rather than acceptable. If a value is only readable inside an inactive control, the user still cannot read it.
  • If a pair passes at 4.5:1, is the text guaranteed readable?
    No. The enhanced criterion asks 7:1 for a reason. Below the large-text boundary the figure ignores stroke weight entirely, so a hairline weight and a medium weight at the same ratio read very differently. It also ignores anti-aliasing, screen dimming, glare and the user's own vision. Passing is a floor, not a verdict on readability.

A contrast ratio is like the gap between a speaker's voice and the room noise. The same voice carries in a quiet room and vanishes in a loud one, so only the pair of levels tells you whether anyone can follow it.

saying these in an interview costs you the question

  • Calls a single color accessible without naming the second one
  • Applies 3:1 to all body text because it is easier to hit
  • Treats large text as anything that merely looks big
  • Assumes a strong hue difference implies strong contrast
  • Measures against the outer surface, not the layer behind the text
  • Thinks the logo exemption covers brand colors used for body text