Free WCAG Color Contrast Checker - Accessibility Compliance Tool
Test your foreground and background color combinations against WCAG 2.1 AA and AAA contrast requirements. Enter any hex color values and see the contrast ratio, pass/fail status for each compliance level, and a live preview of how text looks with your chosen colors.
How to Use
- Click the Foreground color picker or type a hex value (e.g., #333333)
- Click the Background color picker or type a hex value (e.g., #FFFFFF)
- The contrast ratio updates instantly along with AA/AAA pass/fail indicators
- A live preview shows sample text at different sizes with your colors applied
WCAG Contrast Requirements
- AA Large Text (3:1): Minimum ratio for text 18px+ bold or 24px+ regular
- AA Normal Text (4.5:1): Minimum ratio for body text and smaller elements
- AAA Large Text (4.5:1): Enhanced ratio for large text accessibility
- AAA Normal Text (7:1): Enhanced ratio for body text accessibility
What Is Contrast Ratio?
Contrast ratio is a measure of the difference in luminance between two colors, ranging from 1:1 (identical colors) to 21:1 (black on white). The WCAG formula uses relative luminance calculations based on the sRGB color space. Even subtle color differences can fail accessibility requirements, especially for users with low vision or color vision deficiencies.
Privacy
All contrast calculations happen locally in your browser. No color data is transmitted.
Limitations
This tool checks luminance contrast only. WCAG success criteria also include non-text contrast, focus indicators, and color-as-information requirements that this tool does not evaluate.
Last reviewed: July 2026.