About This Tool
The WCAG Contrast Checker evaluates the contrast ratio between foreground and background colors against Web Content Accessibility Guidelines (WCAG) 2.1 standards. Ensure your designs meet AA and AAA compliance for both normal and large text.
How to Use
- Enter or pick foreground and background colors
- View the contrast ratio and WCAG compliance results
- See a live preview of how your text looks
- Use the swap button to switch foreground and background
FAQ
What contrast ratio do I need?
WCAG AA requires 4.5:1 for normal text and 3:1 for large text. WCAG AAA requires 7:1 for normal text and 4.5:1 for large text.
What counts as “large text”?
Large text is defined as 18pt (24px) and above, or 14pt (18.66px) bold and above.
