The Science of Contrast: How Contrast Ratios Are Calculated

What Is Contrast?

In vision science, contrast is the difference in luminance or color between an object and its background. High contrast makes text legible; low contrast makes it hard to read. This is not merely aesthetic preference — the legibility of text depends physically on the signal-to-noise ratio between foreground and background luminance, and this relationship has been studied extensively in psychophysics and ophthalmology.

Different contrast models exist for different purposes. The WCAG contrast model, based on work by Aries Arditi and Ken Knoblauch in the 1990s, is a simplified model designed to be calculable from RGB color values and to capture enough of the perceptual reality of contrast to be useful as an accessibility guideline. It is not the most sophisticated model of perceptual contrast available — but it is simple, deterministic, and usable by designers without specialist knowledge.

Step 1: Convert sRGB to Linear Light

Screen colors are typically specified in sRGB, which applies a gamma correction (a non-linear curve) to the raw RGB values. Gamma correction was originally designed to compensate for the non-linear response of CRT monitors and has been maintained for perceptual reasons — it allocates more code values to darker tones, where human vision is more sensitive to differences.

To calculate luminance, the sRGB values must first be linearised — converted back to linear light values. For each channel (R, G, B), where the value is scaled to 0–1:

• If the 8-bit value is 0–255: divide by 255 to get the sRGB value (0.0–1.0)
• If sRGB ≤ 0.04045: linear = sRGB / 12.92
• If sRGB > 0.04045: linear = ((sRGB + 0.055) / 1.055)^2.4

The non-linear formula for values above 0.04045 is the inverse of the sRGB gamma encoding — it undoes the gamma compression applied when the color was encoded.

Step 2: Calculate Relative Luminance

Once linear RGB values are obtained, relative luminance is calculated as a weighted sum of the three channels. The weights reflect the human eye's unequal sensitivity to different wavelengths:

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

The coefficients (0.2126, 0.7152, 0.0722) are the luminance coefficients defined in the ITU-R BT.709 standard for HDTV, derived from the sRGB color primaries and the CIE 1931 color matching functions. They reflect the fact that the human eye is most sensitive to green (71.52% of luminance), moderately sensitive to red (21.26%), and least sensitive to blue (7.22%).

Relative luminance L ranges from 0 (absolute black) to 1 (absolute white).

Step 3: Calculate the Contrast Ratio

Given two colors with relative luminances L1 (lighter) and L2 (darker):

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

The 0.05 offset is added to both values to account for the ambient light reflected by a real display surface — even a "black" screen reflects some light in typical viewing conditions. This prevents the ratio from reaching infinity for pure white on pure black.

The range of the contrast ratio:

• Minimum: 1:1 (identical colors)
• Maximum: (1 + 0.05) / (0 + 0.05) = 21:1 (pure white on pure black)

The WCAG Thresholds: 4.5:1 and 7:1

WCAG 2.0 defines these contrast ratio thresholds:

• 3:1 — Minimum for large text (AA) and for non-text interface components
• 4.5:1 — Normal text (AA) and large text (AAA)
• 7:1 — Normal text (AAA)

"Large text" is defined as at least 18pt (24px) regular weight, or at least 14pt (approximately 18.67px) bold. These thresholds are based on research showing that 4.5:1 provides adequate legibility for the median user with moderately reduced contrast sensitivity, such as that produced by aging, colour vision deficiency, or sub-optimal display conditions. The 7:1 threshold targets users with more significant contrast sensitivity loss.

The Limitations of the WCAG Formula

The WCAG contrast formula is a useful approximation, but it has known limitations that have motivated research into improved models:

Hue sensitivity

The formula considers only luminance, not hue. Two colors with identical luminance but different hues — for example, red on green — have a contrast ratio of 1:1 by the formula, despite being distinguishable to many trichromatic viewers. However, red-green contrast is invisible to deuteranopes (the most common form of color blindness), making the formula's exclusion of hue-based contrast partially correct from an accessibility standpoint.

Small text sensitivity

Research in low-vision ophthalmology suggests that the contrast requirements for very small text (8–10px) are higher than for the normal text range (14–18px). The WCAG formula uses a single threshold across all normal text sizes, which may underestimate the contrast needed for very small text.

Light text on dark backgrounds

Some research suggests that white text on dark backgrounds requires higher contrast than the formula predicts for some users — particularly those with certain types of low vision — while other research suggests dark-on-light is universally easier to read at equivalent contrast ratios. The formula does not distinguish between light-on-dark and dark-on-light at the same contrast ratio.

APCA: The Proposed Successor

The Accessible Perceptual Contrast Algorithm (APCA), developed by Andrew Somers for the WCAG 3.0 project, proposes a more sophisticated contrast model that accounts for text size, font weight, and the light-on-dark vs. dark-on-light asymmetry. APCA produces a score (Lc, Lightness Contrast) on a scale from -108 to +106, rather than a ratio.

APCA addresses several known limitations of the WCAG 2.x formula but is not yet an adopted W3C standard. WCAG 3.0 development (ongoing as of 2024) is expected to incorporate an improved contrast model, potentially based on APCA or a similar approach.

Check color contrast →