WCAG Contrast Checker

What WCAG Contrast Standards Mean

The Web Content Accessibility Guidelines (WCAG) set minimum contrast ratios to ensure text is readable by people with visual impairments. These standards matter because approximately 1 in 12 men and 1 in 200 women have some form of color vision deficiency. Many more people have low vision that makes low-contrast text difficult to read.

Understanding Contrast Ratios

Contrast ratio compares the brightness of two colors. The scale runs from 1:1 (no contrast, same color) to 21:1 (maximum contrast, pure black on pure white). Higher numbers mean more contrast and better readability.

WCAG Levels Explained

Level AA (The Standard)

This is what most websites need to meet. Requirements:

• Normal text: 4.5:1 minimum ratio
• Large text (18pt+ or 14pt+ bold): 3:1 minimum ratio

Level AAA (Enhanced)

Stricter requirements for maximum accessibility:

• Normal text: 7:1 minimum ratio
• Large text: 4.5:1 minimum ratio

Common Mistakes This Catches

Light Gray Text on White

Designers love light gray text for aesthetics, but #999999 on white fails AA. You need at least #767676 gray on white to pass. Even darker grays are better for body text.

Brand Colors That Don't Work

Company brand colors often look great but fail contrast requirements. A vibrant yellow or light green might be on-brand but unreadable as text on white backgrounds.

Text Over Images

White text on photos often lacks sufficient contrast in lighter image areas. This tool helps you pick overlay colors that maintain readability.

Placeholder Text

Form placeholders are often light gray. While there's debate about whether WCAG applies to placeholders, making them readable is good practice.

How to Fix Failing Colors

If your colors fail:

• Darken light colors - Make light text darker
• Lighten backgrounds - Make dark backgrounds lighter
• Increase font size - Large text has lower requirements
• Add contrast overlays - For text on images, add semi-transparent backgrounds

Legal Requirements

Many countries require WCAG compliance:

• US - ADA and Section 508 reference WCAG
• EU - EN 301 549 requires WCAG 2.1 AA
• UK - Public sector websites must meet WCAG 2.1 AA

Even where not legally required, WCAG compliance reduces liability risk and makes your site usable by more people.