Color Contrast Checker

Evaluate text-to-background color contrast ratios for WCAG AA and AAA compliance

Overview

The Color Contrast Checker helps ensure your text is readable by evaluating the contrast ratio between text and background colors. Check compliance with WCAG AA (4.5:1 for normal text) and AAA (7:1 for normal text) standards, preview combinations, and get suggestions for accessible alternatives.

Tips

  1. Target AA for Most Text: Aim for a 4.5:1 contrast ratio for normal text and 3:1 for large text. This meets WCAG AA standards and ensures readability for most users.

  2. Use Safe Color Values: On white backgrounds, use #595959 or darker for normal text. Common failures include light gray (#999) which only achieves 2.8:1 contrast.

  3. Preview Before Committing: Use the visual preview to see how your text actually looks. A passing ratio doesn’t always mean comfortable readability in real-world conditions.

  4. Test Both Directions: Sometimes reversing foreground and background colors gives better results. The tool makes it easy to swap and compare.

  5. Remember Text Size Matters: Large text (18pt or 14pt bold) has more lenient requirements. If a color combination fails for normal text, try making the text larger or choosing a darker shade.