Color Tools

Contrast Checker

Check color contrast ratio for WCAG accessibility.

100% Private & Client-Side Execution

Accessibility calculations run locally inside your browser.

About Contrast Checker

Contrast Checker evaluates the luminance ratio between text and background colors according to Web Content Accessibility Guidelines (WCAG) 2.1 specifications, ensuring your UI is legible for users with visual impairments.

How to Use Contrast Checker

  1. Input your foreground text color and background color in hex format.
  2. View the calculated contrast ratio (e.g. 7.5:1).
  3. Check the Pass/Fail badges for WCAG AA (minimum) and AAA (enhanced) standards across normal and large text.
  4. Use the Swap button to quickly test inverted color pairings.

Common Real-World Use Cases

  • Accessibility Auditors: Verify website accessibility compliance with Section 508 and ADA requirements.
  • UI/UX Designers: Select brand color combinations that guarantee legible reading experiences.
  • Design System Teams: Document accessible button, link, and typography pairings.

Technical Specifications & Limitations

Evaluates standard hex color strings using relative luminance formulas defined in WCAG 2.1.

Frequently Asked Questions

What is the minimum WCAG contrast ratio for normal text?
WCAG 2.1 Level AA requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold).
What is the Level AAA requirement?
Level AAA demands an enhanced contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.