# WCAG Contrast Checker

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

Check color contrast ratios against WCAG AA and AAA free - normal and large text, UI components, live preview and one-click accessible color fixes.

- **Canonical:** https://www.ailovekit.com/design/contrast-checker/
- **Category:** Color & Design Tools
- **Processing:** Runs entirely in your browser. Files are never uploaded to AiLoveKit servers.

## 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](https://www.ailovekit.com/design/color-harmony-generator/) to build the palette around your accessible core colors.

## Frequently Asked Questions

**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.

---

Source: https://www.ailovekit.com/design/contrast-checker/
Part of AiLoveKit: https://www.ailovekit.com/
Machine-readable index: https://www.ailovekit.com/llms.txt