Contrast Checker

Ensure your text and background colors have enough contrast to be readable by everyone, including people with visual impairments, by checking against WCAG 2.1 guidelines.

How to Use

1. Enter Colors: Use the color pickers or enter hex color codes for your foreground (text) and background.

2. Check the Ratio: The tool instantly calculates the contrast ratio. A higher number means better contrast.

3. Review WCAG Compliance: The results show whether your color pair passes WCAG AA and AAA standards for normal and large text. "Pass" indicates the combination is accessible, while "Fail" means it should be adjusted.

Foreground Color

Background Color

Results

21 / 1

WCAG AA

Pass

WCAG AAA

Pass