Batch Contrast Checker
Compare multiple color pairs or individual colors for WCAG AA & AAA compliance. Supports up to 20 colors at once. Smartly detects pairs and checks everything in one go .
Up to 20 colors
One color per line, or two colors separated by Comma for a color pair. Supports HEX, RGB, HSL, OKLCH, HWB, CMYK, NCOL and CSS color names.
Detected 2 items
1 color pair, 1 single color
#fef3b8
vsrgb(3, 83, 119)#035377
#fef3b8Accessibility matters.
#fef3b8onrgb(3, 83, 119)
Contrast Ratio 7.47
AAAA LargeAAAAAA Large
rgb(3, 83, 119)Accessibility matters.
rgb(3, 83, 119)on#fef3b8
Contrast Ratio 7.47
AAAA LargeAAAAAA Large
oklch(72% 0.20 25)#FF6661
oklch(72% 0.20 25)Accessibility matters.
oklch(72% 0.20 25)onwhite
Contrast Ratio 2.87
AAAA LargeAAAAAA Large
oklch(72% 0.20 25)Accessibility matters.
oklch(72% 0.20 25)onblack
Contrast Ratio 7.33
AAAA LargeAAAAAA Large
oklch(72% 0.20 25)Accessibility matters.
whiteonoklch(72% 0.20 25)
Contrast Ratio 2.87
AAAA LargeAAAAAA Large
oklch(72% 0.20 25)Accessibility matters.
blackonoklch(72% 0.20 25)
Contrast Ratio 7.33
AAAA LargeAAAAAA Large
WCAG 2.1 Contrast Requirements
| Level | Normal Text | Large Text / UI |
|---|---|---|
| AA | 4.5 : 1 | 3 : 1 |
| AAA | 7 : 1 | 4.5 : 1 |
Large text: 18pt (24px)+, or 14pt bold. UI components must meet AA Large (3:1).
What is Contrast Ratio?
Contrast ratio is the difference in luminance between two colors. The ratio is calculated from 1.00 (no contrast) to 21.00 (maximum contrast).
Learn how it's calculatedQuick Tips
- Aim for at least AA for normal text.
- Use darker text on light backgrounds.
- Avoid using color alone to convey information.
- Test early and iterate often.