Color Contrast Checker
Title
Content line 1
Content line 2
Contrast Ratio8.11:1
✓AA Normal Text
✓AA Large Text
✓AAA Normal Text
✓AAA Large Text
Text Color
HEX
#F2F2F3RGB
rgb(242, 242, 243)RGBA
rgba(242, 242, 243, 1)HSL
hsl(240, 4%, 95%)HSLA
hsla(240, 4%, 95%, 1)CSS Variable
--color: #F2F2F3Background Color
HEX
#544545RGB
rgb(84, 69, 69)RGBA
rgba(84, 69, 69, 1)HSL
hsl(0, 10%, 30%)HSLA
hsla(0, 10%, 30%, 1)CSS Variable
--color: #544545 Features
🔍
WCAG Standard Validation
Auto-check AA and AAA level contrast compliance
⚡
Real-time Preview
Instant preview of color combination effects
🎨
Multi-format Output
Support HEX, RGB, HSL, CSS variables and more
🔄
Quick Copy
Copy color values in various formats instantly
How to Use
- 1
Enter or select text color (foreground)
- 2
Enter or select background color
- 3
View contrast ratio and WCAG compliance status
FAQ
What are WCAG contrast standards?
WCAG 2.1 requires AA level minimum 4.5:1 for normal text, 3:1 for large text; AAA level requires 7:1 for normal text, 4.5:1 for large text.
What is considered large text?
Large text is defined as bold 18.66px or larger, or regular 24px or larger text.
Does transparency affect contrast?
According to WCAG specification, contrast calculation doesn't consider transparency, only RGB values.