Color and contrast: what to remember when designing for readability

Color directly affects whether users can read your content. The color and contrast guide in web.dev’s Learn Accessibility course sums up what designers need to know.

WCAG contrast thresholds

Regular text, including text inside images, needs a minimum contrast ratio of 4.5:1 against its background. Large text (18pt/24px or larger, or 14pt/18.5px when bold) and important icons only need 3:1. Logos and decorative elements are exempt. The ratio is based on relative luminance, ranging from 1 to 21, where black text on white reaches the maximum of 21:1.

How to check

You can use Chrome DevTools (the color picker shows the contrast ratio), Color Contrast Analyzer, Adobe Color or Leonardo to calculate ratios and suggest compliant color pairs. Build this check into your design system from the moment you define the palette.

Don’t rely on color alone

Information, actions and states should not be conveyed by color alone. Add patterns, text or icons. A useful trick is to view the design in grayscale to catch problems early, and to use the prefers-color-scheme media query for dark interfaces and prefers-contrast for high-contrast ones.