Color Contrast for Accessible Websites

Color contrast is the difference in brightness between text and its background. When contrast is too low, text becomes hard or impossible to read for many people, including those with low vision or color vision deficiency, and for anyone using a screen in bright light. It is one of the most common accessibility problems on the web, and one of the easiest to fix.

The numbers to know

The Web Content Accessibility Guidelines (WCAG) set minimum contrast ratios at Level AA:

• Normal text: at least 4.5:1 against its background.
• Large text: at least 3:1. Large means roughly 18 point (24 pixels) or larger, or 14 point (about 18.5 pixels) bold or larger.
• User interface components and graphics: at least 3:1 for things like button borders, form field outlines, and icons needed to understand content.

Level AAA asks for 7:1 for normal text. Logos and purely decorative elements are exempt.

Black on white has a ratio of 21:1, the maximum. Pale grey text on white often falls well short.

How to test

Free contrast checkers let you enter two colors and see the ratio. Browser developer tools also show contrast information when you inspect text. Test every text and background combination in your design, including:

• Body text and headings
• Text on buttons
• Links and their hover and focus states
• Placeholder text in form fields
• Text over images or gradients

Common problem areas

Light grey text. A popular style that often fails. Darken it.

Text on photos. Add a solid or semi-transparent overlay behind the text, or place text on a plain area. Check at the lightest part of the image behind the text.

Colored buttons. White text on a mid-tone brand color may fall short. Adjust the shade or switch to dark text.

Placeholder text. It needs sufficient contrast too, and should never replace a proper label. See accessible forms.

Disabled-looking elements. Be careful that active controls do not look inactive.

Do not rely on color alone

Use more than color to indicate links, errors, or status. Underline links in body text, and pair error colors with icons and text. See website color schemes.

Fixing a brand color that fails

You do not always have to abandon a brand color. Use it for large elements, backgrounds, or accents, and use a darker variant of it for text and small elements. Define both in your style guide.

Consider dark mode

If you offer a dark theme, check contrast there separately.

Focus indicators count

The visible outline around a focused element should itself contrast with its surroundings. See keyboard navigation and focus.

Contrast helps conversions too

Clear, readable calls to action get noticed. See calls to action.

The bottom line

Aim for at least 4.5:1 for normal text and 3:1 for large text and interface elements. Test every pairing, and start from your darkest text colors.