WCAG color contrast examples help you move beyond abstract numbers like "4.5:1" and see what accessible design actually looks like. This guide shows you passing and failing examples for every common use case, so you can train your eye to spot problems instantly.
Understanding WCAG Contrast Requirements
Before we dive into examples, let's clarify what the numbers mean. WCAG defines contrast as a ratio between the relative luminance of two colors, with 1:1 being identical colors and 21:1 being pure black on pure white.
Level AA (Minimum)
- Normal text: 4.5:1 minimum
- Large text (18pt+ or 14pt bold): 3:1 minimum
- UI components & graphics: 3:1 minimum
Level AAA (Enhanced)
- Normal text: 7:1 minimum
- Large text (18pt+ or 14pt bold): 4.5:1 minimum
- Not required for UI components
Text Contrast Examples
Passing Examples (AA)
This is nearly black text on white. Maximum readability for body text.
White text on dark blue. Common for navigation and headers.
Blue link text on white. Passes AA for normal text.
Failing Examples
Light gray text on white. Common in placeholder text—fails AA.
Soft red on white. Looks nice but fails for normal text.
Light blue on medium blue. Low contrast despite looking "different."
Button and UI Component Examples
UI components only need 3:1 contrast under WCAG 2.1, but that's the minimum against adjacent colors. The text inside buttons still needs 4.5:1 against the button background.
Form Field Examples
Forms present unique contrast challenges. Labels, input borders, placeholder text, and error states all need consideration:
Border ratio: 5:1 against white background
Border ratio: 1.6:1 — fails minimum 3:1 requirement
Data Visualization Contrast
Charts and graphs are where contrast gets tricky. Adjacent data series need 3:1 contrast between each other, not just against the background. Here's an example of accessible color choices for data visualization:
Accessible Chart Color Palette
This palette maintains 3:1+ contrast between adjacent colors and works for color blind users.
Testing Your Own Colors
These WCAG color contrast examples give you a feel for what works and what doesn't, but every project has unique color requirements. Use our WCAG Contrast Checker to test your specific combinations and get instant pass/fail results with exact ratios.
For color blind–specific testing beyond contrast, run your designs through the Color Blindness Simulator to catch issues that pure contrast checking might miss.
Quick Reference: Common Color Combinations
| Combination | Ratio | AA Normal | AA Large |
|---|---|---|---|
| Black on White | 21:1 | ||
| Dark Blue (#1E40AF) on White | 9.4:1 | ||
| Medium Gray (#767676) on White | 4.5:1 | ||
| Light Gray (#A0A0A0) on White | 2.9:1 | ||
| Red (#DC2626) on White | 4.8:1 |
Check Your Contrast Ratios
Don't guess—get exact contrast ratios for any color combination with our free checker.