WCAG Contrast Ratios Explained

What Is a Contrast Ratio?

A contrast ratio is a number between 1:1 and 21:1 that measures the difference in luminance between two colors. A ratio of 1:1 means the two colors are identical — no contrast at all. A ratio of 21:1 is the maximum, achieved only by pure black (#000000) against pure white (#FFFFFF). The higher the ratio, the easier it is to distinguish the foreground from the background.

WCAG 2.1 defines contrast ratio using the following formula:

Contrast Ratio = (L1 + 0.05) / (L2 + 0.05)

Where L1 is the relative luminance of the lighter color and L2 is the relative luminance of the darker color. The constant 0.05 prevents division by zero and reflects the ambient light reflected by a typical display.

Luminance Is Not Brightness

One of the most common misunderstandings is treating luminance as equivalent to brightness or lightness. They are related but not the same:

• →Brightness is a subjective perceptual experience — how light something appears to you.
• →Lightness (L in HSL) is a simple mathematical average of the RGB channels.
• →Relative luminance is a linearized, perceptually-weighted measure that accounts for how the human eye responds differently to red, green, and blue light.

Because the human visual system is far more sensitive to green light than to red or blue, two colors that appear equally "bright" to a lightness formula can have very different luminance values. Using HSL lightness to estimate contrast ratios will give you wrong answers. Always use the WCAG relative luminance formula.

How Relative Luminance Is Calculated

Relative luminance is calculated from the sRGB values of a color through a process called gamma correction. Here is the step-by-step process:

1. →Extract the red, green, and blue channel values from the hex color (0–255 each).
2. →Divide each channel value by 255 to normalize it to the range 0–1. These are your C_sRGB values.
3. →Apply gamma correction to each channel individually using this formula:
   • →If C_sRGB <= 0.04045, then C_linear = C_sRGB / 12.92
   • →Otherwise, C_linear = ((C_sRGB + 0.055) / 1.055) ^ 2.4
4. →Compute the luminance using the weighted sum of the linearized channels:

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

5. →The result is a number between 0 (absolute black) and 1 (absolute white).

Why Green Has the Highest Coefficient

The coefficients — 0.2126 for red, 0.7152 for green, and 0.0722 for blue — are not arbitrary. They reflect the spectral sensitivity of the human eye's cone photoreceptors. The L-cones (long wavelength, responding to red) and M-cones (medium wavelength, responding to green) dominate daylight vision, with M-cones contributing the most to perceived brightness. The S-cones (short wavelength, responding to blue) contribute only minimally to luminance perception.

This is why a bright green (#00FF00) has a luminance of approximately 0.7152, while a saturated blue (#0000FF) has a luminance of only 0.0722 — both at full saturation, but the blue looks far darker to the human eye.

Worked Example: Black and White

• →Black (#000000): All channels are 0. After normalization: R=G=B=0. After gamma correction: all 0. Luminance = 0.
• →White (#FFFFFF): All channels are 255. After normalization: R=G=B=1. Since 1 > 0.04045, apply the else branch: ((1 + 0.055) / 1.055)^2.4 = 1. Luminance = 0.2126(1) + 0.7152(1) + 0.0722(1) = 1.
• →Contrast Ratio: (1 + 0.05) / (0 + 0.05) = 1.05 / 0.05 = 21:1

WCAG 2.1 Contrast Requirements

WCAG 2.1 defines three conformance levels — A, AA, and AAA — and sets specific contrast thresholds for different types of content. The following table summarizes the requirements:

What Counts as Large Text?

WCAG defines large text as:

• →18 point or larger in regular weight — this equals approximately 24px at standard screen resolution (96 DPI).
• →14 point or larger in bold weight — this equals approximately 18.67px in CSS.

The type size is measured in rendered output, not in design specifications. If a heading is styled at 20px bold, it qualifies as large text. If the same text is set to 16px bold, it does not qualify — it must meet the normal-text threshold.

UI Components and Non-Text Contrast

Success Criterion 1.4.11 (Non-text Contrast), introduced in WCAG 2.1, extends the 3:1 minimum to user interface components. This covers:

• →The visible boundary of input fields, checkboxes, and radio buttons
• →Focus indicators and focus rings
• →Icons that convey information (a search icon, a close button icon)
• →Charts, graphs, and data visualizations
• →The active parts of sliders, toggles, and custom controls

A component's state changes — hover, active, focus, disabled — must also meet the 3:1 minimum against adjacent colors if those states convey meaning.

Why These Numbers Were Chosen

The WCAG contrast thresholds were not selected arbitrarily. They emerged from vision science research and represent meaningful calibration points on the spectrum of human visual capability.

The 4.5:1 AA Threshold

The 4.5:1 ratio was informed by research by Arditi and Faye (2006) on readers with moderately low vision. Their work demonstrated that readers functioning at approximately 20/40 Snellen visual acuity — a level common among people in their 50s and 60s without corrective lenses, and among users with mild vision impairment — could successfully read text at this contrast level under normal screen conditions.

20/40 vision means you can read at 20 feet what a person with normal vision reads at 40 feet. It is the threshold for passing a standard driving vision test in many jurisdictions. The 4.5:1 minimum is therefore calibrated to serve this large population segment, not just the most severely impaired.

The 7:1 AAA Threshold

The 7:1 ratio targets users functioning at approximately 20/80 Snellen visual acuity who are not using screen magnification or other assistive technology. At 20/80, a person can read at 20 feet what someone with normal vision reads at 80 feet. This group includes users with glaucoma, macular degeneration, or diabetic retinopathy at earlier stages.

Why Large Text Gets More Latitude

Large text receives a reduced threshold (3:1 for AA, 4.5:1 for AAA) because font size independently improves legibility beyond what contrast alone provides. Larger letterforms are easier to resolve even at lower contrast — the brain receives more visual signal per character, reducing the cognitive load of reading. This is a well-established finding in typography and low-vision research.

Common Mistakes When Measuring Contrast

Even developers and designers who understand WCAG frequently make errors in practice. Here are the most common pitfalls:

1. →Measuring hex values without checking rendered size. A color pair that passes for large text at 3.5:1 will fail if the element is actually rendered at 15px regular weight. Always verify the computed font size in the browser.
2. →Ignoring font weight. The 14pt bold threshold means bold weight is specifically what earns the large-text exemption at that size. A 14pt regular font does not qualify and must meet 4.5:1.
3. →Anti-aliasing at small sizes. Sub-pixel rendering at 11–13px can blur edges and reduce effective contrast below what a tool calculates. At very small sizes, aim for higher contrast headroom.
4. →Text on gradients or images. Contrast tools measure a flat background color. If your text sits over a gradient or photograph, you must check the contrast at the lowest-contrast point of that gradient, not an average.
5. →Not testing dark mode. A color scheme that passes in light mode can fail in dark mode if you simply inverted values without re-auditing. Dark mode requires its own full contrast audit.
6. →Assuming brand colors pass. Many well-known brand palettes include accent colors that fail WCAG AA on white. Yellow, medium-orange, and many pastels commonly fail. Never assume — always measure.

What WCAG Explicitly Exempts

"The success criterion does not apply to decorative text."

The following content types are exempt from contrast requirements:

• →Inactive or disabled UI components — a disabled button does not need to meet contrast minimums.
• →Logos and logotypes — brand identity marks are exempt, though best practice still encourages reasonable contrast.
• →Decorative images — images that are purely ornamental and convey no information.
• →Text within images — if text is embedded in a photograph or illustration for decorative purposes, it is exempt. However, text in images that conveys information is NOT exempt.

Practical Measurement Examples

The following table shows real-world color pairs, their hex values, calculated contrast ratios, and WCAG conformance levels:

Reading the Table

A few observations worth noting from these examples:

• →#767676 on white is the lowest-passing gray for AA normal text. Any lighter gray on white will fail.
• →#595959 on white achieves exactly the 7:1 AAA threshold. This is the darkest gray you can use for body text on white and still claim AAA for normal text.
• →#E11D48 (rose/crimson) is a popular UI color that fails for normal text on white. It can only be used at large text sizes under AA rules.
• →#2563EB (Tailwind blue-600) is one of the few medium blues that passes AA on white, making it a common choice for accessible link text.

Key Takeaways

• →A contrast ratio measures luminance difference, not color difference — two colors can look very different and still fail if they have similar luminance.
• →Always calculate contrast using relative luminance, not HSL lightness. Lightness-based estimates are inaccurate and will cause compliance failures.
• →WCAG AA (4.5:1 for normal text, 3:1 for large text and UI) is the legally required standard in most jurisdictions; aim for these as your baseline minimums.
• →Large text means ≥24px regular or ≥18.67px bold — these are computed CSS pixel values, not design spec points.
• →Text on images and gradients must be checked at the worst-case point, not the average — a single low-contrast region is enough to fail.
• →Dark mode requires its own contrast audit. Inverting a passing light palette does not guarantee a passing dark palette.