WCAG Color Contrast Guide

Understanding Web Content Accessibility Guidelines for color contrast. Make your designs inclusive and compliant.

Level A

Minimum

Level A sets no contrast ratio. Its color rule is 1.4.1 Use of Color: color must not be the only way information is conveyed (add text, icons or patterns).

Contrast ratio: none required

Use of color: required

Level AA

Standard (Recommended)

The industry standard and what most organizations aim for. Provides good accessibility for most users.

Normal Text: 4.5:1

Large Text: 3:1

UI Components: 3:1

Level AAA

Enhanced

The enhanced level (1.4.6). Recommended for long-form reading and audiences with low vision; few sites meet AAA everywhere.

Normal Text: 7:1

Large Text: 4.5:1

UI Components: 3:1 (same as AA)

Contrast Checker Tool

Enter your foreground and background colors to check WCAG compliance

Foreground Color (Text)

Background Color

21:1

AA Normal Text

AA Large Text

AAA Normal Text

AAA Large Text

Key Points to Remember

Large Text: 18pt (24px) and larger, or 14pt (about 18.66px) bold and larger
UI Components: Form inputs, buttons, and interactive elements need 3:1 minimum
Logos & Incidental: Brand logos and decorative elements are exempt
Test Early: Check contrast during design, not after implementation