Color Contrast Checker WCAG
Pick foreground and background colors to get your contrast ratio and instant WCAG AA and AAA pass/fail results for normal text, large text, and UI components.
Quick Answer
What contrast ratio is needed for WCAG AA compliance?
WCAG AA requires a contrast ratio of at least 4.5 to 1 for normal text (under 18pt) and 3 to 1 for large text (18pt or larger, or 14pt bold). UI components and graphics need 3 to 1. The stricter WCAG AAA level requires 7 to 1 for normal text. Black on white achieves the maximum ratio of 21 to 1.
Foreground (text)
Background
Accessible presets
Normal Text Sample -- the quick brown fox jumps over the lazy dog.
Large Text Sample (24px Bold)
Contrast Ratio
14.63:1
Rating
Excellent
7:1 or higher
WCAG Compliance
| Level | Required | Result |
|---|---|---|
| WCAG AA Normal text | 4.5:1 | PASS |
| WCAG AA Large text | 3:1 | PASS |
| WCAG AAA Normal text | 7:1 | PASS |
| WCAG AAA Large text | 4.5:1 | PASS |
| UI Components / Icons | 3:1 | PASS |
Color Details
Foreground
HEX #1E293B
RGB 30, 41, 59
HSL 217, 33%, 17%
Luminance 0.0218
Background
HEX #FFFFFF
RGB 255, 255, 255
HSL 0, 0%, 100%
Luminance 1.0000
About this tool
This color contrast checker calculates the WCAG contrast ratio between any two colors and shows instant pass or fail results for every relevant accessibility level. It checks WCAG AA and AAA compliance for normal text, large text, and UI components, displays a live preview of how text looks on the chosen background, shows the full color details including RGB, HSL, and relative luminance, and suggests the nearest accessible foreground color when your combination fails the 4.5 to 1 threshold.
The tool is useful for web designers building accessible interfaces, developers implementing design systems, UX teams auditing existing color palettes, and anyone creating content that needs to meet accessibility standards. WCAG 2.1 AA compliance is legally required for many websites under the ADA in the US and the Web Accessibility Directive in the EU. Using this checker during the design process is faster and cheaper than fixing contrast issues after launch.
How it works
- 1
Choose your colors
Use the color pickers or type hex codes directly. The tool syncs both inputs instantly. Use the swap button to reverse foreground and background, or pick a preset accessible combination from the palette list.
- 2
Read the contrast ratio
The contrast ratio updates live with every change. The ratio scale runs from 1:1 (same color, no contrast) to 21:1 (black on white, maximum contrast). A rating label shows Fail, Poor, Good, or Excellent at a glance.
- 3
Check the WCAG table
Five compliance checks run automatically: WCAG AA and AAA for normal and large text, plus UI components. Each shows PASS or FAIL. The preview box shows real text at 16px and 24px bold so you can see the visual result.
- 4
Fix failing combinations
If your combination fails AA for normal text, click Suggest accessible foreground. The tool binary-searches the lightness scale to find the closest color that passes 4.5:1 and lets you apply it with one click.
WCAG contrast requirements
| Level | Text size | Minimum ratio | Use case |
|---|---|---|---|
| WCAG AA | Normal (under 18pt / 24px) | 4.5:1 | Body text, navigation, form labels, captions |
| WCAG AA | Large (18pt+ or 14pt+ bold) | 3:1 | Headings, hero text, large display copy |
| WCAG AAA | Normal (under 18pt / 24px) | 7:1 | Critical content, medical and government sites |
| WCAG AAA | Large (18pt+ or 14pt+ bold) | 4.5:1 | Enhanced large text for maximum accessibility |
| WCAG AA | Any size | 3:1 | UI components, icons, form borders, focus rings |
Common contrast failures
| Color combination | Approx. ratio | Why it fails | Better alternative |
|---|---|---|---|
| Gray (#999) on white | 2.85:1 | Below the 3:1 minimum for any text | #595959 on white (7:1, passes AAA) |
| Yellow (#ffff00) on white | 1.07:1 | Nearly identical luminance, invisible | Black (#000) on yellow (#ffff00) |
| Light blue (#87ceeb) on white | 1.9:1 | Very similar luminance to white | #005fa3 on white (passes AA Normal) |
| Light gray (#ccc) on white | 1.60:1 | Far below the 3:1 minimum | #767676 on white (passes AA Normal) |
| Red (#f00) on green (#0f0) | 1.28:1 | Low contrast and unusable for colorblind users | Black on white or dark navy on yellow |
| White (#fff) on yellow (#ff0) | 1.07:1 | Both colors have very high luminance | Black (#000) on yellow (12.6:1) |