What counts as large text?

Text at 24px (18pt) or larger, or bold text at 18.66px (14pt) or larger. Large text needs only 3:1 for WCAG AA instead of the 4.5:1 required for normal text.

How is the contrast ratio calculated?

Using WCAG relative luminance: each sRGB channel is linearized, combined as 0.2126R + 0.7152G + 0.0722B, and the ratio is (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color.

Can it fix a failing color pair?

Yes - the Reach AA and Reach AAA buttons adjust the text color lightness while preserving its hue and saturation, finding the nearest shade that passes 4.5:1 or 7:1.

WCAG Contrast Checker - AA and AAA in One Look

Enter two colors and instantly see the contrast ratio, all five WCAG verdicts, a live preview and one-click accessible fixes.

Ship Interfaces Everyone Can Read

AiLoveKit's WCAG contrast checker computes the exact contrast ratio between your text and background colors using the WCAG relative-luminance formula, then reports every threshold that matters: AA and AAA for normal text, AA and AAA for large text, and the 3:1 minimum for UI components and graphics.

Beyond a Number

Live preview - real sample text and a UI component rendered in your exact colors.
Text-based verdicts - every badge states Pass or Fail in words, never color alone.
Smart fixes - Reach AA and Reach AAA nudge the text color to the nearest passing shade while keeping its hue.

The checker runs entirely in your browser, so brand colors stay private - pair it with the Color Harmony Generator to build the palette around your accessible core colors.

WCAG Contrast Checker - AA and AAA in One Look

Ship Interfaces Everyone Can Read

Beyond a Number

Frequently Asked Questions