WCAG Contrast Checker

Check color contrast ratios against WCAG AA and AAA standards. Test foreground and background colors for normal and large text accessibility. Free online tool.

Everything runs in your browser — your data is never sent to any server.

Why Check Color Contrast?

Color contrast is a critical aspect of web accessibility. The Web Content Accessibility Guidelines (WCAG) require specific contrast ratios between text and background colors to ensure content is readable by people with visual impairments. Our contrast checker helps you verify compliance with both AA and AAA standards for normal and large text, ensuring your designs are accessible to everyone.

Key Features

  • WCAG 2.1 AA and AAA compliance checking
  • Separate results for normal text (4.5:1) and large text (3:1)
  • Live preview with sample text in your chosen colors

How to Use

  1. Enter foreground (text) and background colors
  2. View the contrast ratio and pass/fail results instantly
  3. Use the swap button to test the reverse combination

Technical Details

The contrast ratio is calculated using the WCAG 2.1 formula, which compares the relative luminance of the foreground and background colors. Relative luminance is computed from sRGB values using the standard gamma correction formula. The ratio ranges from 1:1 (no contrast) to 21:1 (maximum contrast). All processing is client-side.

FAQ

What is a passing contrast ratio?

WCAG AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 for normal text and 4.5:1 for large text.

What counts as large text?

Large text is defined as 18pt (24px) or larger, or 14pt (18.66px) bold or larger.

Related tools