Contrast Checker

Check the contrast ratio between two colors according to WCAG guidelines. Ensure your color combinations meet accessibility standards for AA and AAA compliance.

HEX, RGB, or HSL format
HEX, RGB, or HSL format
Sample Text Preview
Contrast Ratio
21.00:1
WCAG AA ✓ WCAG AAA ✓

Why use this tool?

Color contrast is crucial for web accessibility. People with visual impairments need sufficient contrast between text and background to read content comfortably.

  • WCAG compliance — check against Web Content Accessibility Guidelines standards.
  • Multiple formats — support for HEX, RGB, and HSL color inputs.
  • Live preview — see how your colors look together with sample text.
  • Privacy — all calculations happen in your browser. Nothing is stored or transmitted.

WCAG Contrast Requirements

  • Normal Text (AA): Minimum ratio of 4.5:1
  • Large Text (AA): Minimum ratio of 3:1 (18pt or 14pt bold)
  • Normal Text (AAA): Minimum ratio of 7:1
  • Large Text (AAA): Minimum ratio of 4.5:1

Frequently Asked Questions

Yes, the MushTools Contrast Checker is completely free with no sign-up required. All calculations happen in your browser.

This tool supports HEX (e.g., #FF5733), RGB (e.g., rgb(255, 87, 51)), and HSL (e.g., hsl(11, 100%, 60%)) color formats.

No. Everything runs client-side in your browser. Your color values never leave your device.