English
Deutsch
español
français
italiano
português
Tiếng Việt
Türkçe
русский
العربية
Color Contrast Checker
Check color contrast for WCAG accessibility compliance
Color Contrast Checker
21
: 1
Excellent
AA
Normal
Pass
4.5:1
AA
Large
Pass
3:1
AAA
Normal
Pass
7:1
AAA
Large
Pass
4.5:1
Sample Heading Text
This is how your text will appear. Good contrast ensures readability for all users.
Small text (13px) requires higher contrast.Great Contrast!
Your colors meet WCAG guidelines.
Technical Details
FG Luminance
0.0000
BG Luminance
1.0000
.element {
color: #000000;
background-color: #ffffff;
}Understanding WCAG Contrast
AA
Level AA
4.5:1 normal, 3:1 large text
AAA
Level AAA
7:1 normal, 4.5:1 large text
Why It Matters
Helps users with low vision
The Color Contrast Checker helps ensure your web designs are accessible to everyone, including people with visual impairments. Enter your foreground (text) and background colors to instantly see the contrast ratio and whether it meets WCAG 2.1 AA and AAA standards for both normal and large text. Features include: real-time contrast calculation, WCAG 2.1 compliance checking (AA and AAA levels), live preview of your color combination, color suggestions to improve contrast, preset color combinations, luminance values display, and ready-to-use CSS code output.
Search
Advertisement
