Home>Color Tools>Color Contrast Checker

Color Contrast Checker is a free online accessibility tool that calculates the contrast ratio between two colors and checks WCAG 2.1 AA and AAA compliance for normal and large text. No installation required.

Color contrast ratio is a measure of the difference in perceived luminance between two colors. WCAG 2.1 guidelines require a minimum ratio of 4.5:1 for normal text (AA) and 7:1 for enhanced accessibility (AAA). Checking contrast ensures your content is readable for users with visual impairments.

Color Contrast Checker

Check WCAG color contrast ratio between foreground and background colors.

Sample Text Preview

How to Use

  1. Enter or pick a foreground (text) color using the color picker or hex input
  2. Enter or pick a background color
  3. Preview the text on the background in the sample box
  4. Click Check Contrast to see the ratio and WCAG pass/fail results

Example

Input

Foreground: #000000 | Background: #ffffff

Output

Contrast Ratio: 21.00:1 | AA: Pass | AAA: Pass

FAQ

What is WCAG contrast ratio?
WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios to ensure text is readable. AA requires 4.5:1 for normal text; AAA requires 7:1.
What counts as large text?
Large text is defined as 18pt (24px) or larger, or 14pt (approximately 18.67px) bold or larger.
Is this tool free?
Yes, it is completely free with no registration required. All calculations run in your browser.

Related Tools