Design
Contrast checker
Check color contrast against the WCAG AA and AAA thresholds.
The quick brown fox
Contrast ratio: 17.4:1
AA normal ✓
AA large ✓
AAA normal ✓
AAA large ✓
How it works
1
Pick two colors
Choose a text color and a background color.
2
Read the ratio
The contrast ratio is shown with clear AA and AAA pass or fail marks.
3
Adjust
Tweak the colors until the pairing passes for your text size.
Why use Contrast checker
AA and AAA at a glance
See exactly which WCAG levels a pairing passes for normal and large text, so accessibility is not guesswork.
Live ratio
The contrast ratio updates as you adjust either color, making it quick to find a compliant combination.
Design with confidence
Confirm your palette is readable before you ship it, not after an audit flags it.
Frequent questions
What contrast ratio do I need?
WCAG AA needs 4.5:1 for normal text and 3:1 for large text; AAA raises that to 7:1 and 4.5:1. Larger, bolder text is allowed a lower ratio.
What counts as large text?
Roughly 18pt (24px) normal weight, or 14pt (about 19px) bold. Large text qualifies for the more lenient thresholds.
Explore more tools
Colors
Convert colors between HEX, RGB and HSL.
Palette generator
Harmonies, tints and shades from a base color.
Gradient generator
Build linear and radial CSS gradients.
Color mixer
Blend two colors and get the steps between.
Blob generator
Generate organic SVG blob shapes.
Color theme maker
Build a light/dark theme and export CSS variables.
Palette from image
Extract dominant colors from an image.
Color blindness simulator
Preview colors for different vision types.