WCAG accessibility
Contrast checker
Enter two colors to calculate the WCAG contrast ratio. Check compliance for normal text, large text, and UI components at AA and AAA levels.
Foreground (text)
Background
Live preview
15.6 : 1
APCA +0.99
Heading text sample
The quick brown fox jumps over the lazy dog. This paragraph demonstrates how body text appears at normal size with these two colors combined.
Small text is harder to read at low contrast ratios. WCAG requires at least 4.5:1 for normal text and 3:1 for large text at the AA level.
Button outlineButton filled
Reversed: background color on foreground color.
Contrast ratio
15.6 : 1
Excellent contrast. Passes all WCAG criteria.
WCAG compliance
Normal text
AA (4.5:1)
Large text
AA (3:1)
Normal text
AAA (7:1)
Large text
AAA (4.5:1)
UI components
AA (3:1)
Color blindness simulation
See how your foreground/background pair looks under common color vision deficiencies.
Aa
Sample text
Normal
Aa
Sample text
Protanopia
Aa
Sample text
Deuteranopia
Aa
Sample text
Tritanopia
Build with accessible color systems
Take contrast-safe palettes into your project
The Dark Mode UI Kit ships pre-tested light/dark pairings with contrast ratios that pass AA — structured as CSS variables, Figma tokens, and Tailwind config.