Low contrast is the most common accessibility issue on the web. It makes text hard to read for people with low vision, for anyone on a cheap screen or in sunlight, and for all of us as our eyes age. The good news: it is also the easiest one to measure and fix.
The numbers you need
WCAG compares the relative luminance of two colors and gives a ratio between 1:1 (no contrast) and 21:1 (black on white).
- AA, normal text: at least 4.5:1
- AA, large text (24px, or 18.66px bold): at least 3:1
- AA, UI components and icons (borders, focus rings, input outlines): at least 3:1
- AAA, normal text: 7:1 · AAA, large text: 4.5:1
AA is the level most laws and procurement rules reference. Aim for AA everywhere and AAA for long-form reading.
Why “make it darker” isn’t a plan
Darkening a brand color until it passes often turns a lively purple into a muddy one, and different designers darken by different amounts. The fix should change as little as possible and be repeatable.
A reliable way to fix a failing pair
- Decide which side is allowed to move. Usually the text color moves and the background (your brand surface) stays.
- Keep the hue and saturation and change only the lightness. That keeps the color recognizably “yours”.
- Move lightness the minimum amount needed to reach the target ratio — in the direction that increases contrast.
- Check the other states too: hover, pressed and disabled colors are often forgotten.
Common traps
- Placeholder text in inputs: it is real text and needs 4.5:1 if it carries meaning (better: don’t use placeholders as labels).
- Text on images or gradients: check the lightest area behind the text, or add a scrim.
- Light gray “secondary” text: #999 on white is only 2.85:1. #767676 is the lightest gray that passes 4.5:1 on white.
- Hover states that lighten a button behind white text — contrast drops exactly when users interact.
Contrast is necessary, not sufficient
Passing ratios won’t help someone who can’t tell your red error from your green success. Pair color with text or icons, and check your palette with a color-blindness simulator too.