WCAG Color Contrast Checker

Check color contrast ratios for WCAG 2.1 accessibility compliance. Test foreground and background colors for AA and AAA ratings. Free accessibility checker.

21.00
Contrast Ratio
Excellent
Normal Text
AA Pass
AAA Pass
Large Text (>18pt)
AA Pass
AAA Pass

The quick brown fox jumps over the lazy dog

This is how your text will look with the selected colors.

Card Title

This card uses your selected colors for background and text.

What is Color Contrast?

Color contrast is the difference in brightness between two colors, typically foreground (text) and background. Adequate contrast ensures text is readable for all users, including those with visual impairments or color vision deficiencies.

WCAG 2.1 Requirements

  • Level AA: 4.5:1 for normal text, 3:1 for large text (18pt+ or 14pt bold)
  • Level AAA: 7:1 for normal text, 4.5:1 for large text
  • UI Components: 3:1 for icons, buttons, and form boundaries

How to Use This Tool

  1. Select your foreground (text) color using the color picker
  2. Select your background color
  3. View the contrast ratio and WCAG compliance results
  4. Use Auto-Fix to adjust colors if needed
  5. Preview your colors on UI components

Frequently Asked Questions

What is WCAG contrast ratio?
WCAG contrast ratio measures the difference in brightness between two colors. It ranges from 1:1 (same color) to 21:1 (black on white). WCAG 2.1 requires a minimum ratio of 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt bold).
What are AA and AAA compliance levels?
WCAG has three compliance levels: A (minimum), AA (standard for most websites), and AAA (highest). For contrast, AA requires 4.5:1 for normal text, while AAA requires 7:1. Large text requires 3:1 for AA and 4.5:1 for AAA.
How do I fix low contrast issues?
To fix low contrast, either darken your text color or lighten your background color. Our tool has an 'Auto-Fix' feature that automatically adjusts the foreground color to meet AA (4.5:1) or AAA (7:1) requirements.
Does contrast matter for all users?
Good contrast is essential for users with visual impairments, color blindness, or those viewing screens in bright environments. It also improves readability for all users, especially on mobile devices and for older adults.