Formula
ratio = (L₁ + 0.05) ÷ (L₂ + 0.05)L = 0.2126 R + 0.7152 G + 0.0722 B (R, G, B in linear light)
- L₁ is the lighter colour's relative luminance, L₂ the darker
- Ratios range from 1:1 to 21:1
How much brighter the lighter colour is than the darker one, with a small allowance for ambient light.
Worked examples
Mid grey on white
- Text colour
- #767676
- Background colour
- #ffffff
Contrast ratio
4.54:1
Normal text — AA (4.5:1): Pass
Large text — AA (3:1): Pass
Normal text — AAA (7:1): Fail
Light grey on white (fails)
- Text colour
- #aaaaaa
- Background colour
- #ffffff
Contrast ratio
2.32:1
Normal text — AA (4.5:1): Fail
Large text — AA (3:1): Fail
Normal text — AAA (7:1): Fail
How it works
The Web Content Accessibility Guidelines (WCAG) measure legibility with a contrast ratio from 1:1 (no contrast) to 21:1 (black on white). To meet level AA, normal text needs at least 4.5:1 and large text at least 3:1; level AAA asks for 7:1 and 4.5:1. User-interface components and meaningful graphics also need 3:1 against their surroundings. Grey #767676 on white is 4.54:1, the lightest grey that passes AA for normal text.
Each colour's relative luminance is computed after converting its sRGB channels to linear light, then the two are compared as (L₁ + 0.05) ÷ (L₂ + 0.05). The ratio shown is truncated rather than rounded, so a result just below a threshold is never displayed as a pass. Large text means at least 24 px regular or 18.66 px bold. A translucent colour is blended onto its background first, and a translucent background onto white.
Passing a ratio does not guarantee readability for every user, but it is the standard test. To convert a colour between formats first, use the Color Converter; the CSS Formatter tidies stylesheets once you have chosen your palette.
Assumptions and limits
- Follows the WCAG 2.x contrast formula (not the experimental APCA).
- Large-text sizes are 24 px regular or 18.66 px bold.