Color Contrast and WCAG: Complete Designer's Guide

Poor contrast is the single most common accessibility failure on the web. According to WebAIM's annual analysis of a million websites, over 80% have contrast problems. That's an enormous number of users struggling to read text every day.

The problem is often that contrast is checked too late in the process. Designers choose colors based on aesthetics, developers implement them, and only at review is it discovered that white text on light green background doesn't work. By then it's expensive to redo.

In this guide, we cover exactly what WCAG requires, what exceptions exist, and how to build contrast thinking into your design process from the start.

The magic numbers (AA level)

WCAG defines contrast as the ratio between foreground and background color's relative luminance. A ratio of 1:1 means identical colors (no contrast), while 21:1 is maximum (black against white).

To meet legal requirements (WCAG 2.1/2.2 Level AA), the following applies:

If you aim for AAA level (recommended for maximum readability), requirements increase to 7:1 for normal text and 4.5:1 for large text.

When contrast requirements DON'T apply

There are situations where contrast requirements aren't mandatory. Knowing these exceptions helps avoid unnecessary work:

1. Logos and brand text – Text that's part of a logo or brand name has no minimum requirement. Your company logo doesn't need to change.

2. Inactive elements – Buttons or form fields that are disabled and can't be interacted with are exempt. But be careful – don't overuse this!

3. Purely decorative text – Text that doesn't convey information, such as background patterns with repeated words.

4. Text in images containing other visual information – If an image shows a photo of a sign, and there's alt text describing the content, the text on the sign is exempt.

Important: Exceptions are narrow. If unsure, assume the requirement applies.

A common mistake: Placeholder text in forms is NOT exempt. It must also meet 4.5:1 – which often doesn't happen with standard gray.

Tools for testing contrast

There are many ways to check contrast. Here are the most used:

Design tools:

Web-based tools:

Automated scanners:

Remember that automated tools miss contrast on images, gradient backgrounds, and dynamically generated content. Manual review is always needed as complement.

Practical tips for designers

1. Test early in process. Before presenting a design to client, run contrast through a tool. Takes 30 seconds and saves hours later.

2. Build color pairs, not individual colors. Define which combinations are allowed: 'Primary blue text on white background: OK. Primary blue text on light gray: NOT OK.'

3. Keep text off images. Text over photographs is almost always problematic because background varies. Place text on a solid surface instead.

4. Be extra careful with gray. Gray shades are tricky – they often look like they have sufficient contrast but rarely meet 4.5:1 against white. #767676 is the limit.

5. Document approved combinations. Create a contrast matrix in your design system showing which colors can be combined.

Contrast for graphical elements (WCAG 2.1)

WCAG 2.1 introduced criterion 1.4.11 requiring 3:1 contrast for graphical elements necessary to understand content. This includes:

A common miss: Minimalist forms with just an underline as field marker. If underline is light gray on white background, it's barely visible.