Contrast Checker
Check WCAG contrast ratios for any color pair or a list of HEX backgrounds - get AA / AAA pass/fail badges for normal and large text.
Foreground & Background Contrast Checker
Set a foreground and background color to check contrast for a specific pair.
Batch Contrast Checker
Input or paste up to 10 HEX colors (one per line or comma-separated) to see all four contrast combinations for each.
6 colors detected
Color on white
Contrast Ratio 2.57:1Color on black
Contrast Ratio 8.18:1White on color
Contrast Ratio 2.57:1Black on color
Contrast Ratio 8.18:1Color on white
Contrast Ratio 4.23:1Color on black
Contrast Ratio 4.96:1White on color
Contrast Ratio 4.23:1Black on color
Contrast Ratio 4.96:1Color on white
Contrast Ratio 14.67:1Color on black
Contrast Ratio 1.43:1White on color
Contrast Ratio 14.67:1Black on color
Contrast Ratio 1.43:1Color on white
Contrast Ratio 1.89:1Color on black
Contrast Ratio 11.11:1White on color
Contrast Ratio 1.89:1Black on color
Contrast Ratio 11.11:1Color on white
Contrast Ratio 8.72:1Color on black
Contrast Ratio 2.41:1White on color
Contrast Ratio 8.72:1Black on color
Contrast Ratio 2.41:1Color on white
Contrast Ratio 1.92:1Color on black
Contrast Ratio 10.92:1White on color
Contrast Ratio 1.92:1Black on color
Contrast Ratio 10.92:1WCAG 2.1 Contrast Requirements
| Level | Normal text | Large text / UI |
|---|---|---|
| AA | 4.5:1 | 3:1 |
| AAA | 7:1 | 4.5:1 |
Large text is defined as 18pt (24px) or larger, or 14pt (approximately 19px) bold. UI components and graphical elements must meet AA Large (3:1).
How to Use This Tool
Use the Foreground & Background section to check the contrast of any specific color pair. Or paste HEX values into the Past Hex Colors box to check up to 10 colors against white and black simultaneously. The tool accepts values with or without the leading # and handles 3-digit shorthand (e.g. #fff).