How contrast is calculated
WCAG defines contrast from the relative luminance (perceived brightness) of each colour:
Contrast ratio = (L1 + 0.05) ÷ (L2 + 0.05), where L1 is the lighter colour’s luminance
Ratios run from 1:1 (identical colours) to 21:1 (black on white). The requirements:
| Use | AA (minimum) | AAA (enhanced) |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text (24px+, or 18.66px+ bold) | 3:1 | 4.5:1 |
| Icons, borders of inputs and buttons (UI components) | 3:1 | – |
The suggested fix keeps the same hue and saturation and adjusts lightness until the text reaches 4.5:1 against your background, so it stays close to your brand colour.
Common contrast problems
- Light grey body text on white, used to look “clean”. Often around 2.5–3.5:1.
- White text over photos without an overlay.
- Brand colours (bright greens, yellows, oranges) used for text or buttons with white labels.
- Placeholder text in forms used instead of labels.
AA is the level most accessibility laws and guidelines refer to. Read website accessibility for small businesses for the wider picture.