Color Contrast Checker
Colors
The quick brown fox jumps over the lazy dog
Normal text sample - 14px regular weight
17.40:1
Contrast Ratio
AA - Normal text
≥ 4.5:1 requiredAA - Large text
≥ 3:1 requiredAAA - Normal text
≥ 7:1 requiredAAA - Large text
≥ 4.5:1 requiredWCAG AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 and 4.5:1 respectively. Large text is defined as 18pt regular or 14pt bold.
1.
Enter a foreground (text) color and a background color
2.
The contrast ratio and WCAG AA / AAA pass/fail results update instantly
▸
Ensuring text is readable for users with low vision
▸
Meeting WCAG 2.1 compliance requirements for web apps
▸
Checking color choices before finalising a design
What is WCAG contrast ratio?
The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios between text and background colors to ensure readability for users with low vision or color blindness.
What is the difference between AA and AAA?
AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. AAA is the stricter standard, requiring 7:1 for normal text and 4.5:1 for large text.
What counts as "large text"?
Large text is defined as 18pt (24px) or larger for regular weight text, or 14pt (approximately 18.67px) or larger for bold text.
Is my data sent to a server?
All contrast calculations run locally in your browser. No color data is transmitted anywhere.
Why does black text on white fail?
Black on white has a contrast ratio of 21:1, which is the maximum possible - it passes all WCAG levels. If you are seeing a failure, check that you have not accidentally entered similar colors for both foreground and background.