Color Contrast: How to Check Whether People Can Read Your Text
Color contrast is the difference in brightness between text and the background behind it, and enough contrast lets people read your words in any light.
Pale gray text on a white background can look elegant on a large, bright monitor. On a phone in the sun, on an older screen, or for someone with low vision, the same text can disappear. Low contrast is one of the most common barriers on the web, and it is one of the easiest to fix.
What contrast ratio does WCAG require?
The Web Content Accessibility Guidelines (WCAG) measure contrast as a ratio, from 1 to 1 (no difference) to 21 to 1 (black on white). At the AA level, which most laws and contracts point to, the guidelines ask for:
4.5 to 1 for regular text.
3 to 1 for large text, which means at least 18 point regular or 14 point bold.
3 to 1 for the parts of controls and graphics people need to see, such as a text field's border, a checkbox, or a line on a chart.
The stricter AAA level asks for 7 to 1 for regular text. Text that is purely decorative, and logos, are exempt.
How do you check color contrast?
Find the two colors. Use the color picker in your design tool or the browser's developer tools to read the text color and the background color.
Run them through a contrast checker. Free tools such as the WebAIM Contrast Checker show the ratio and tell you whether it passes.
Check every state. Test the placeholder text, the hover color, the disabled button, the error message, and the focus outline, not only the body text.
Check text on images. Text over a photo needs to pass against the lightest part of the image behind it. A dark overlay behind the text usually solves the problem.
Keep the lighter brand colors for backgrounds, borders, and large shapes.
Darken the shade used for body text and links until it passes.
Pair each background color with the one text color that passes on it, and write the pairs into your design system.
Never use color as the only signal. Add a word, an icon, or an underline, so a person who cannot tell red from green still sees the error.
How do you fix low contrast without losing your brand?
You rarely need new brand colors. You usually need to choose which colors do which job.
Where do contrast problems hide?
Contrast problems tend to hide in placeholder text inside form fields, in gray "helper" text under a field, in buttons that look disabled when they are not, in thin fonts, and in white text on bright brand colors. Check those first.
Why contrast matters to your business
Readable text helps everyone. It helps the customer reading your price on a phone outdoors, the employee on an old laptop, and the reader whose eyes are tired at the end of the day. When people can read the button, more of them press it.
Contrast is one of the checks in every A+ Audit, along with screen readers, keyboards, captions, and zoom.
Play an Aha Moments card
Aha Moments is my card game of short design exercises. Each card names one idea, such as Craftsmanship, explains why the idea matters, and gives you exercises you can finish with a timer, a pen, and whatever is in front of you.
You can play the sample cards free, and members play every card.