♿

WCAG Contrast Checker

Check color contrast ratios against WCAG 2.1 accessibility standards for AA and AAA compliance.

WCAG contrast checkercolor contrast ratioaccessibility checkerAA AAA compliancecolor accessibilitycontrast ratio calculatorweb accessibilityWCAG 2.1
Live Preview

The quick brown fox jumps over the lazy dog

Large Text (18pt / 14pt bold)

Contrast Ratio21:1
Normal Text<18pt or <14pt bold
✓AA (4.5:1)
✓AAA (7:1)
Large Text≥18pt or ≥14pt bold
✓AA (3:1)
✓AAA (4.5:1)
Accessible AlternativesClick to apply

WCAG 2.1 Guidelines

  • AA (Minimum): 4.5:1 for normal text, 3:1 for large text
  • AAA (Enhanced): 7:1 for normal text, 4.5:1 for large text
  • Large Text: 18pt+ or 14pt+ bold (approximately 24px or 18.66px bold)

What is WCAG Contrast Checker?

WCAG Contrast Checker is a free online tool that verifies color contrast ratios meet Web Content Accessibility Guidelines (WCAG) 2.1 standards. It calculates the contrast between foreground and background colors, displays compliance for AA and AAA levels, and suggests accessible color alternatives. Essential for creating inclusive, accessible web designs that work for users with visual impairments or color blindness.

Common Use Cases

UI Design

Ensure text and interactive elements have sufficient contrast for readability and accessibility compliance.

Brand Colors

Validate brand color combinations meet WCAG standards before implementation.

Legal Compliance

Meet ADA, Section 508, and WCAG requirements to avoid legal issues and ensure equal access.

Design Systems

Build accessible color palettes and design tokens that guarantee compliant contrast ratios.

How to Use This Tool

  1. Select or enter your foreground (text) color using the color picker or HEX input
  2. Select or enter your background color
  3. View the calculated contrast ratio and compliance status
  4. Check pass/fail indicators for WCAG AA and AAA levels
  5. Click suggested alternatives to find accessible color options
  6. Use the swap button to reverse foreground and background colors

Frequently Asked Questions

What is WCAG?
WCAG (Web Content Accessibility Guidelines) is an international standard created by W3C that defines how to make web content accessible to people with disabilities, including visual, auditory, physical, speech, cognitive, and neurological disabilities.
What is the difference between AA and AAA?
AA is the minimum conformance level for most websites, requiring 4.5:1 contrast for normal text and 3:1 for large text. AAA is the enhanced level with stricter requirements of 7:1 for normal text and 4.5:1 for large text, providing better accessibility for users with low vision.
What qualifies as large text?
Large text is defined as 18pt (24px) and larger, or 14pt (18.66px) and larger if bold. Large text has more relaxed contrast requirements because it is easier to read.
Why does contrast matter?
Sufficient color contrast ensures text is readable for everyone, including users with low vision, color blindness, or viewing screens in bright sunlight. Poor contrast creates barriers that prevent users from accessing content.
How is the contrast ratio calculated?
The contrast ratio is calculated using the relative luminance formula from WCAG 2.1: (lighter color + 0.05) / (darker color + 0.05). The ratio ranges from 1:1 (no contrast) to 21:1 (maximum contrast).
Do images and icons need to meet contrast requirements?
Yes, WCAG 2.1 requires non-text content like icons and graphical elements to have a minimum 3:1 contrast ratio against adjacent colors. Text embedded in images must meet the same requirements as regular text.

Related Tools

Color Converter → Color Palette Generator → CSS Generator →

Learn More

WCAG Contrast Checker is a free online tool that requires no signup or installation. It works directly in your browser, keeping your data private and secure.