WCAG 2.1 Color Contrast Ratio Checker (AA & AAA)
Calculate exact color contrast ratios and verify accessibility compliance for normal text, large text, and UI components.
About This Tool
WCAG Color Contrast Checker computes the exact mathematical contrast ratio between foreground and background colors using relative luminance, providing instant pass/fail ratings for WCAG 2.1 Level AA and AAA standards.
Key Features
How to Use
- 1Pick or enter text/foreground color and background color.
- 2View the calculated contrast ratio (e.g. 7.42 : 1).
- 3Check compliance badges for WCAG AA and AAA ratings.
- 4Use Swap Colors to test reversed contrast.
Why Use ToolSnippet WCAG Color Contrast Checker?
Tips for Best Results
- Aim for at least 4.5:1 for all essential text to pass Google Lighthouse accessibility audits
- Large text is defined as 18pt (24px) regular or 14pt (18.66px) bold
Frequently Asked Questions
What is the minimum WCAG contrast ratio for regular text?
WCAG Level AA requires a minimum contrast ratio of 4.5:1 for normal text (under 18pt / 24px) and 3:1 for large text.
What is the requirement for WCAG AAA?
WCAG Level AAA requires an enhanced contrast ratio of 7:1 for normal text and 4.5:1 for large text.
Related Tools
All Design & CSS Generators →Base64 to Image Decoder & Downloader
Convert Base64 data strings into viewable and downloadable PNG, JPEG, SVG, or WEBP images.
Color Shades & Tint Generator
Generate a full 50-950 Tailwind/CSS palette of tints and shades from any base color.
CSS Keyframe Animation Generator
Create customizable CSS @keyframes animations with duration, easing curves, and live preview.