Color Contrast Checker
Check the contrast ratio between any two colors and instantly see if they pass WCAG AA and AAA accessibility standards for normal and large text.
The quick brown fox jumps over the lazy dog. (Normal text)
Large text — 24px bold
Contrast ratio
AA — Normal text
Requires 4.5:1
AA — Large text
Requires 3:1
AAA — Normal text
Requires 7:1
AAA — Large text
Requires 4.5:1
How to use
Pick colors using the color pickers or type hex codes directly. The contrast ratio and WCAG results update in real time. The preview shows how your text/background combination looks at normal and large text sizes.
Use Swap to flip foreground and background — the contrast ratio is the same either way, but it helps visualise both combinations.
Use cases
- Validating text and background color pairs in a design system
- Checking button label contrast before shipping a UI component
- Meeting WCAG 2.1 AA requirements for public-sector or enterprise web apps
- Auditing an existing site's color palette for accessibility compliance
- Choosing accessible brand colors that pass contrast requirements
Limitations
This tool calculates contrast ratio for solid colors only. Semi-transparent colors, gradients and complex backgrounds require manual inspection or browser-based accessibility tools like the Chrome DevTools accessibility panel.
Contrast ratio alone does not guarantee legibility — font weight, letter spacing, and typeface also affect readability at any given ratio.