🎨 Color Contrast Checker
Check WCAG color contrast for accessibility compliance
Foreground (Text)
Background
The quick brown fox jumps over the lazy dog
Regular text (14px+): Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Large text (18px+ bold or 24px+): Heading Example
21.00:1
AAA
WCAG Compliance
WCAG AA
Normal Text (4.5:1)
Large Text (3:1)
UI Components (3:1)
WCAG AAA
Normal Text (4.5:1)
Large Text (3:1)
UI Components (3:1)
WCAG Guidelines:
• Normal text: Minimum 4.5:1 for AA, 7:1 for AAA
• Large text (18pt+ or 14pt+ bold): Minimum 3:1 for AA, 4.5:1 for AAA
• UI components and graphics: Minimum 3:1