ToolBunny LogoToolBunny
Back to Homepage
Contrast Checker

Ensure your color combinations meet accessibility standards.

Color Inputs
Preview

Large Text (18pt / 24px bold)

Normal Text (16px)

Accessibility Results

Contrast Ratio

21.00:1

AA (Normal Text)

Pass

Ratio: 4.5:1

AAA (Normal Text)

Pass

Ratio: 7:1

AA (Large Text)

Pass

Ratio: 3:1

AAA (Large Text)

Pass

Ratio: 4.5:1
About This Tool

The Contrast Checker is an essential tool for ensuring your web content is accessible to everyone, including people with visual impairments. It calculates the contrast ratio between a text color and its background color, evaluating it against the Web Content Accessibility Guidelines (WCAG) standards. The tool provides a pass or fail status for both AA and AAA levels for normal and large text, helping you build inclusive, readable, and compliant websites.

How to Use
  1. Use the color pickers or enter the HEX codes for your "Text Color" and "Background Color".
  2. As you change the colors, the "Preview" section will update to show you how the text looks on the background.
  3. The "Accessibility Results" section will instantly update with the calculated contrast ratio.
  4. Check the status cards to see if your color combination passes WCAG AA and AAA standards for both normal and large text. A "Pass" indicates the combination is accessible for that level, while "Fail" indicates it is not.