ADA Contrast Checker
Test your color combinations against WCAG 2.1 accessibility standards. Enter any foreground and background color to see the contrast ratio and whether it meets AA or AAA compliance for normal and large text. Essential for creating accessible interfaces that everyone can read.
Preview
Large Text (24px+)
Normal body text at 16px. The quick brown fox jumps over the lazy dog.
Small text at 14px for captions and metadata.
WCAG 2.1 requires a contrast ratio of at least 4.5:1 for normal text (AA) and 7:1 for enhanced (AAA). Large text (18pt+ or 14pt+ bold) needs 3:1 for AA.
How It Works
- 1. Enter your text color (foreground) and background color using the color pickers, or paste HEX values directly into the input fields.
- 2. The tool calculates the contrast ratio between your colors using the WCAG 2.1 formula and displays whether your combination passes or fails AA and AAA standards.
- 3. Review the live text preview to see how your colors appear in context, and adjust either color until you achieve the compliance level your project requires.
Understanding WCAG Contrast Levels
WCAG 2.1 defines two conformance levels for contrast ratios. Level AA requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. This is the legal standard for most accessibility requirements, including ADA compliance in the United States and similar regulations worldwide.
Level AAA is a higher standard requiring 7:1 for normal text and 4.5:1 for large text. While not legally required for most projects, AAA provides enhanced readability for users with low vision or color blindness. Large text is defined as 18pt (24px) or larger for regular weight, or 14pt (18.5px) or larger for bold text.
These ratios ensure sufficient distinction between text and background across different lighting conditions, screen qualities, and visual abilities. Higher ratios mean better readability, but you should balance accessibility with your brand's visual identity.
Frequently Asked Questions
- For WCAG AA compliance, you need a minimum contrast ratio of 4.5:1 for normal text (under 18pt or under 14pt bold) and 3:1 for large text (18pt+ or 14pt+ bold). Most legal accessibility requirements ask for AA as the baseline standard.
- Large text is 18 point (24 pixels) or larger for regular weight fonts, or 14 point (18.5 pixels) or larger for bold fonts. Large text has more relaxed contrast requirements because the increased size makes it easier to read at lower contrast ratios.
- WCAG contrast requirements apply to text and meaningful graphical elements like icons and UI controls. Decorative images don't require specific contrast ratios, but informational graphics should maintain 3:1 contrast against adjacent colors. Text within images must meet the same standards as regular text.
- Try darkening your text color or lightening your background color by small increments. You can also increase font weight, add a semi-transparent overlay behind text, or use your brand colors for larger elements where contrast requirements are more lenient. Many brands maintain a primary palette for logos and graphics while using adjusted variations for text.