Contrast Checker
Check color contrast against WCAG AA/AAA.
Large text sample
The quick brown fox jumps over the lazy dog. This is what normal body copy looks like at this contrast.
Contrast ratio
14.68:1
About this tool
Contrast is the accessibility rule that gets broken most often, usually by light grey placeholder text or a brand colour used for body copy. It is also the easiest to verify: the ratio between two colours is a single number with a defined threshold.
Enter a foreground and background and see the ratio against WCAG AA and AAA for both normal and large text.
Common questions
What contrast ratio do I need?
WCAG AA requires 4.5:1 for normal text and 3:1 for large text — 18pt, or 14pt bold. AAA raises those to 7:1 and 4.5:1. AA is the level most legal accessibility requirements reference.
Does contrast apply to buttons and icons too?
Yes. Interface components and meaningful graphics need 3:1 against what is adjacent to them. A pale border on a white card fails, which is why low-contrast outline buttons are a common audit finding.
My brand colour fails against white. What now?
Keep the brand colour for large headings, fills, and accents where the 3:1 threshold applies, and use a darkened variant for body text. Most brand palettes were designed for logos, not paragraphs, and darkening lightness in HSL preserves the hue.
Turn it into an interactive demo
createademo turns screenshots and recordings into demos your buyers click through themselves. Free plan, full editor, no credit card.