Color Contrast Checker
Check WCAG 2.1 color contrast ratios to ensure your designs meet AA and AAA accessibility standards
The quick brown fox
jumps over the lazy dog. 0123456789
Small text example for accessibility testing.
Contrast Ratio
14.63:1
AA Normal Text
Min ratio: 4.5:1
AA Large Text
Min ratio: 3:1
AAA Normal Text
Min ratio: 7:1
AAA Large Text
Min ratio: 4.5:1
How to Use This Tool
Set a foreground (text) color and background color using the color pickers or HEX inputs.
View the live preview showing text on the selected background.
Check the contrast ratio and WCAG 2.1 pass/fail indicators for AA and AAA compliance.
Use the swap button to switch foreground and background colors.
About This Tool
Color Contrast Checker calculates the WCAG 2.1 contrast ratio between any two colors and shows whether they meet accessibility standards. See pass/fail results for AA Normal (4.5:1), AA Large (3:1), AAA Normal (7:1), and AAA Large (4.5:1). The live preview shows exactly how your text will look. Essential for ensuring designs are accessible to users with visual impairments.
Share This Tool
Related Tools
Color Palette Generator
Generate harmonious color palettes with complementary, analogous, and triadic color scheme support
CSS Gradient Generator
Build stunning linear and radial CSS gradients with a visual color picker, angle control, and code export
Glassmorphism Generator
Create modern frosted-glass UI effects with adjustable blur, transparency, and border styling in pure CSS
Neumorphism Generator
Design elegant soft-shadow neumorphic UI elements with customizable depth, color, and shape controls
CSS Unit Converter
Convert between px, rem, em, vh, vw, and other CSS units based on your root font size settings