Picking a color is a design decision, but making sure text can be read is a requirement. Low contrast is one of the most common accessibility problems on the web, and it hurts everyone: people with low vision, people in sunlight, anyone on a cheap screen.
The numbers to remember
The Web Content Accessibility Guidelines (WCAG) measure contrast as a ratio from 1:1 (no difference) to 21:1 (black on white).
| Text | Minimum ratio (level AA) |
|---|---|
| Normal body text | 4.5 : 1 |
| Large text (about 24px, or 19px bold) | 3 : 1 |
| Icons and borders of form fields | 3 : 1 |
See the difference
index.html
HTML
<style>
p { padding: 10px; margin: 4px 0; font-size: 18px; }
</style>
<p style="background:#fff; color:#ccc">Light grey on white (about 1.6:1). Hard to read.</p>
<p style="background:#fff; color:#767676">Mid grey on white (4.5:1). Just passes.</p>
<p style="background:#fff; color:#1c1b1f">Near-black on white (about 17:1). Easy.</p>
<p style="background:#d94a00; color:#fff">White on burnt orange (about 4:1). Fine for big text only.</p>How to check
- The browser developer tools show the contrast ratio when you inspect a color.
- Search for “WCAG contrast checker”: several free sites let you paste two colors and see the ratio.
If your brand color fails
Keep the brand color for large shapes and buttons, and use a darker shade of it for small text. With HSL you can lower the lightness a few points until the ratio passes.
dangerous
Do not rely on color alone
Never use only red and green to mean “error” and “ok”. About 1 in 12 men have some form of color vision difference. Add an icon or a word as well.