How to Use
- 1
Choose a foreground (text) color and a background color using the color pickers or hex inputs.
- 2
The contrast ratio is calculated instantly using the WCAG 2.1 relative luminance formula.
- 3
Review the AA and AAA pass/fail results for normal text and large text. Preview how the colors look together.
Frequently Asked Questions
What is WCAG contrast ratio? ▼
WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios to ensure text is readable for people with visual impairments. AA requires 4.5:1 for normal text (3:1 for large text). AAA requires 7:1 (4.5:1 for large text).
What counts as large text? ▼
Large text is defined as 18pt (24px) or larger for regular weight, or 14pt (18.67px) or larger for bold weight. Large text has lower contrast requirements.
How is the contrast ratio calculated? ▼
The formula uses relative luminance: each color channel is linearized from sRGB, weighted (R: 21.26%, G: 71.52%, B: 7.22%), then contrast = (lighter + 0.05) / (darker + 0.05).