Color Contrast Checker
Test foreground and background colors against WCAG contrast requirements. Live ratio, pass/fail, and fix suggestions.
Foreground
#1A1A1A
R
G
B
Background
#FFFFFF
R
G
B
13.71
Contrast Ratio
Pass ✓
AA Normal
Requires 4.5 : 1
Pass ✓
AA Large
18px+ or 14px+ bold
Pass ✓
AAA Normal
Requires 7 : 1
Pass ✓
AAA Large
Requires 4.5 : 1
WCAG 2.2 keeps the same contrast ratios (AA = 4.5:1, AAA = 7:1) but adds 2.4.13 Focus Appearance — focus rings must also meet 3:1 contrast against adjacent colors.
The quick brown fox jumps over the lazy dog. Regular body text at 16px.
Small caption text at 12px — note: small text has stricter contrast requirements.
Suggested Fixes
Adjust foreground to reach AA
WCAG Contrast Requirements Reference
| Text Type | Standard | Required Ratio | Notes |
|---|---|---|---|
| Normal text | AA | 4.5 : 1 | Text under 18px (14px bold) |
| Large text | AA | 3 : 1 | 18px+ regular or 14px+ bold |
| Normal text | AAA | 7 : 1 | Recommended for body copy |
| Large text | AAA | 4.5 : 1 | Headings and display type |
| UI components & focus rings | AA | 3 : 1 | Borders, icons, input outlines |
| Focus ring appearance | 2.2 AA | 3 : 1 | Focus ring vs adjacent color (SC 2.4.13) |
| Decorative & disabled | Exempt | None | Logos, incidental text, inactive elements |