C
Color Contrast Checker
Check color contrast ratios for WCAG accessibility compliance.
Design
v1.0.0
50 uses
C
Color Contrast Checker
Esc
or
Ctrl+Shift+F
to exit
Normal text preview (16px) - The quick brown fox jumps over the lazy dog.
Large text preview (24px bold)
Contrast Ratio
21:1
AA Normal (4.5:1)
Pass
AA Large (3:1)
Pass
AAA Normal (7:1)
Pass
AAA Large (4.5:1)
Pass
About This Tool
Verify that your text and background color combinations meet WCAG 2.1 accessibility standards. Check contrast ratios for both normal and large text at AA and AAA compliance levels. Essential for web designers and developers who want to ensure their content is readable by everyone.
How to Use
- 1 Enter or pick a text color and background color
- 2 View the contrast ratio and WCAG compliance levels
- 3 Adjust colors until you achieve the desired rating
- 4 Copy the color pair for your CSS
More Tools in Design
I
Image Vignette Effect
DesignAdd vignette darkening to image edges with adjustable size and strength.
I
Image Resizer
DesignResize images by dimensions or percentage with aspect ratio lock and quality control.
P
Pattern Generator
DesignCreate tileable geometric patterns like stripes, dots, waves, and checkerboard.