Contrast Checker
Check the WCAG contrast ratio for any text and background combination, with AA and AAA pass/fail status.
Small text — 14px regular
Body copy — 16px regular for paragraphs.
Large heading — 24px bold
AA normal requires 4.5:1, AAA normal requires 7:1. Large text starts at 18pt regular or 14pt bold.
The contrast ratio between text and background determines whether your interface is readable for users with low vision. The W3C's WCAG 2.1 guidelines define minimum ratios — 4.5:1 for normal body text (AA) and 7:1 for AAA. Large text and UI components have a more lenient bar of 3:1.
Use this checker while picking brand colors, designing dark mode, or auditing existing interfaces for accessibility compliance.
Frequently asked questions
What contrast ratio do I need for accessibility?+
WCAG AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 for normal text and 4.5:1 for large text.
What counts as large text?+
18pt regular (around 24px) or 14pt bold (around 19px) and above is treated as large text by WCAG.
Do icons and UI components need to meet contrast?+
Yes — non-text UI components and meaningful graphics must meet at least 3:1 against adjacent colors per WCAG 2.1 SC 1.4.11.
Why can a color pass for large text but fail for small?+
Large text uses heavier strokes, so it remains legible at lower contrast. Small text needs more contrast to compensate.