Skip to main content

Color contrast checker for colors and websites

Optimize your colors for accessibility according to WCAG 2.1 & 2.2 (AA/AAA).

Test color contrast ratios against WCAG 2.1 and 2.2 guidelines. Check individual color pairs or scan entire pages to identify contrast issues.

Color Selection

Foreground Color

Background Color

WCAG Settings

Results

Normal Text (< 18px)

Passed

Required: 4.5:1

Large Text (≥ 18px)

Passed

Required: 3:1

Contrast Ratio
21.00:1

WCAG AA

Compliant
Preview

We checked the contrast so your users don’t have to. This contrast has been officially judged.

Understanding WCAG Contrast Requirements

The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios to ensure text is readable for people with visual impairments.

WCAG AA (Minimum)

  • • Normal text: 4.5:1
  • • Large text (18px+ or 14px+ bold): 3:1

WCAG AAA (Enhanced)

  • • Normal text: 7:1
  • • Large text (18px+ or 14px+ bold): 4.5:1

WCAG Versions

WCAG 2.1 and 2.2 share the same contrast requirements (Success Criterion 1.4.3 and 1.4.6). Choose your organization's target version for consistency.

Contrast checker: test color pairs and visible UI states

The color comparison checks the two colors you enter. Also check the colors actually used on the website, including open dialogs, focus states and the dark theme. Normal text needs at least 4.5:1; large text needs at least 3:1 (24 CSS pixels, or about 18.67 CSS pixels in bold).

The URL scan checks computable text contrast in the loaded page state. It does not open dialogs or switch themes. A result without findings therefore does not confirm accessibility across the whole website.

Visual features needed to identify controls and states need at least 3:1 against adjacent colors under WCAG 1.4.11, subject to its exceptions. Check focus outlines, text on images and gradients separately; the text-contrast rule does not evaluate all these cases. Inactive controls are exempt from these contrast requirements.

Frequently Asked Questions

Normal text needs at least 4.5:1. Large text needs 3:1, from 24 CSS pixels or about 18.67 CSS pixels in bold. That is WCAG 1.4.3, level AA. Controls, focus outlines and informative graphics need 3:1 against adjacent colors. That is WCAG 1.4.11. Level AAA requires 7:1 for normal text and 4.5:1 for large text.

No. The checker tests one color pair, or the computable text on a loaded URL. Hover, focus, inactive controls, dark mode, text on images and the other WCAG criteria need further checks. The BFSG cut-off of 28 June 2025 has passed. Use the BFSG Check to estimate whether the law applies to you. The check is not legal advice. Use Audit to test states.

Not directly. Google uses Core Web Vitals as a page-experience signal. Readability makes a page easier to use, but Google does not count it as its own ranking signal.