Ensure Your Designs Meet WCAG Contrast Standards

For web designers, front-end developers, and accessibility auditors: quickly verify color contrast ratios, get pass/fail status for WCAG AA/AAA, and receive improved color suggestions that meet required ratios.

Open the Tool

Why use Color Contrast Checker?

Instant contrast ratio calculation

WCAG AA/AAA compliance check with text size options

Smart color suggestions to meet accessibility standards

Supports hex, RGB, and named colors

Free, no sign-up, and privacy-friendly

How it works

  1. Enter two colors in hex, RGB, or named format (e.g., #FFFFFF and #000000).
  2. Select the WCAG level (AA or AAA) and text size (normal or large) if needed.
  3. Click 'Check Contrast' to see the contrast ratio and pass/fail status.
  4. If it fails, review suggested alternative colors that meet the required ratio.

FAQ

What is WCAG color contrast?

WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between text and background to ensure readability for people with visual impairments. AA requires 4.5:1 for normal text and 3:1 for large text; AAA requires 7:1 and 4.5:1 respectively.

How is contrast ratio calculated?

The contrast ratio is calculated using the relative luminance of the two colors, following the formula (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance and L2 is the darker.

Can I use named colors like 'red'?

Yes, our tool accepts standard CSS color names (e.g., 'red', 'blue', 'white') and converts them to hex values for calculation.

What if my colors fail the contrast check?

The tool provides alternative color suggestions that meet the required ratio, helping you adjust your design while maintaining accessibility.