---
title: "WCAG Contrast Checker"
description: "Free WCAG 2.2 contrast checker. Test text and background color pairs against AA and AAA thresholds for normal and large text, with a color picker or hex input."
url: https://devzap.io/tools/contrast-checker/
category: color
status: live
pricing: Free
---

# WCAG Contrast Checker

> Check WCAG 2.2 contrast ratios for any pair of colors. Get AA / AAA pass/fail at a glance.

Free WCAG 2.2 contrast checker. Test text and background color pairs against AA and AAA thresholds for normal and large text, with a color picker or hex input.

## How to use

1. **Pick foreground and background** — Use the native color pickers or paste hex codes for both colors. The preview panel updates live to show how the pair looks.
2. **Read the ratio** — The big number is the WCAG luminance contrast ratio. Higher = better contrast.
3. **Check AA / AAA chips** — Each chip tells you whether the pair passes for normal text and large text at AA (baseline) and AAA (enhanced) levels.

## FAQ

### What's the difference between AA and AAA?

AA is the baseline accessibility level required by most regulations and platform stores. Normal body text needs a 4.5:1 ratio, large text (24px+ or 18.5px+ bold) needs 3:1. AAA is the enhanced level — 7:1 for normal text, 4.5:1 for large. Aim for AAA when accessibility is critical (medical apps, government services).

### Does the WCAG ratio account for color blindness?

Contrast ratios cover luminance only — they verify a color-blind user can still distinguish text from background, but don't check whether two adjacent colors are distinguishable. For full coverage, run the design through a color-blindness simulator separately.

### What counts as 'large text' for WCAG?

WCAG 2.2 defines large text as 18.66px (14pt) bold or 24px (18pt) regular and up. Anything smaller falls under the normal-text threshold.

### Why don't I see APCA scores here?

WCAG 2.2 still uses the legacy contrast algorithm. APCA is being explored for WCAG 3.0 and isn't a regulatory standard yet, so we report the WCAG 2.2 ratio that currently determines compliance.

## Background

## Why contrast matters

Up to 8% of users have some form of color vision deficiency, and many more have temporary impairments — bright sunlight on a screen, a cracked phone display, an aging monitor. Designing with sufficient contrast isn't a niche accessibility checkbox; it's the default for software that wants to be readable.

WCAG 2.2 — the current accessibility standard cited by ADA lawsuits, EAA enforcement in the EU, and platform store requirements — codifies this with explicit luminance ratio thresholds.

## What ratio do I need?

| Text size                                   | AA (baseline) | AAA (enhanced) |
| ------------------------------------------- | ------------- | -------------- |
| Normal (under 18.66px bold or 24px regular) | 4.5:1         | 7:1            |
| Large (18.66px+ bold or 24px+ regular)      | 3:1           | 4.5:1          |

Hit AA at minimum. AAA is for accessibility-critical contexts.

## Use cases

- **Design QA**: paste your brand colors against your background colors and verify every combination before building components.
- **Component review**: when a teammate proposes a new color, paste it through the checker before merging.
- **Tailwind palette generation**: pick the lightest text color that still passes AA against your accent.
- **Accessibility audits**: validate every color pair on a page during a manual a11y review.