Check foreground/background contrast ratios against WCAG 2.1 AA and AAA accessibility standards.
Preview
Large Text (24px bold)
Normal body text at 16px — this is how most of your content will look to users when reading.
Small text at 12px — captions, footnotes, labels
—
Contrast Ratio
💡 Suggested Fixes to Reach AA
Colour Blindness Preview
How this combination looks under common colour vision deficiencies.
WCAG 2.1 Requirements
AA (minimum): Normal text ≥ 4.5:1 · Large text (18pt+ or 14pt+ bold) ≥ 3:1 · UI components ≥ 3:1 AAA (enhanced): Normal text ≥ 7:1 · Large text ≥ 4.5:1 Large text is defined as 18pt (24px) regular or 14pt (18.67px) bold and above.
Advertisement
🎨 Saved Colour Pairs
Click "Save this pair" after checking a colour combination to save it here.
WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios for readable text. AA standard requires 4.5:1 for normal text and 3:1 for large text. AAA (enhanced) requires 7:1 for normal text and 4.5:1 for large text.
Why does contrast matter for accessibility?
Approximately 8% of men and 0.5% of women have some form of colour vision deficiency, and many more experience reduced contrast sensitivity with age. Sufficient contrast ensures your content is readable by the widest possible audience, and is required by law in many jurisdictions.
What counts as large text for WCAG?
WCAG defines large text as 18pt (24px) or larger, or 14pt (approximately 18.67px) bold or larger. Large text gets a lower minimum contrast requirement (3:1 for AA) because it is easier to read at lower contrast than small text.