Contrast Ratio
The contrast ratio is a number between 1:1 and 21:1 that measures the brightness difference between two colors. WCAG relies on this ratio to set readability thresholds: 4.5:1 for normal text, 3:1 for large text and interface components. It is calculated from the relative luminance of the two colors being compared.
Gray text #777777 on a white background. Your eye reads it effortlessly. The contrast ratio says 4.48:1. Within two hundredths, it fails WCAG level AA. The entire principle of the ratio lies in this gap: replacing "I can read this" with an objective measurement.
#How is the ratio calculated?
The formula is short: (L1 + 0.05) / (L2 + 0.05). L1 is the relative luminance of the lighter color, L2 that of the darker color.
Relative luminance is calculated from the red, green, and blue components of each color, weighted according to human eye sensitivity: green accounts for 71.52%, red 21.26%, blue 7.22%.
The result ranges from 1:1 (two identical colors) to 21:1 (pure black on pure white). The 0.05 added to the numerator and denominator simulates the effect of ambient light.
#Why exactly 4.5:1?
WCAG criterion 1.4.3 sets this threshold for a precise reason. It corresponds to the point where a person with visual acuity of 20/40, a typical threshold for moderate low vision, can read text without assistive technology. Level AAA raises this to 7:1 to cover visual acuity of 20/80.
For large text (≥ 24 px, or ≥ 18.5 px bold), the threshold drops to 3:1: larger characters compensate for lower contrast.
#The trap of the "almost good" ratio
#777777 on white: 4.48:1. Non-compliant. #767676 on white: 4.54:1. Compliant. A shade invisible to the eye, a binary verdict in an audit.
This sharp threshold pushes some teams to aim for exactly the minimum. Real-world conditions (aging screen, direct sunlight, eye fatigue) degrade perceived contrast well below the calculated ratio. Aim for at least 5:1 to absorb these variables.
#What changes with WCAG 3
The current model has a known limitation: it treats white text on dark backgrounds the same as dark text on light backgrounds, even though perception differs. WCAG 3 plans a new algorithm, APCA (Accessible Perceptual Contrast Algorithm), which accounts for polarity and the typographic properties of text.
#In summary
The contrast ratio translates a brightness difference into a verifiable number. Remember 4.5:1 for text, 3:1 for interface components. Don't aim for the minimum: real-world conditions are always worse than your desktop screen.