# Color Contrast Checker

https://rankproof.eu/tools/compliance-color-contrast

## Short answer

Check text-to-background color contrast ratios against WCAG AA/AAA standards.

## What It Does

Computes the WCAG contrast ratio between any foreground and background color you enter, using the same relative-luminance formula as the WCAG spec, and checks it against the AA and AAA thresholds for normal and large text (4.5:1 / 3:1 for AA, 7:1 / 4.5:1 for AAA). Shows a live text preview in your colors alongside a pass/fail badge for each threshold.

## How It Works

1. Enter or pick a foreground (text) color and a background color
2. We calculate the WCAG relative-luminance contrast ratio between the two colors
3. Check the ratio against the AA and AAA thresholds for normal and large text
4. See a live preview of your text on your background plus a pass or fail badge for each threshold

## Sample input + output

INPUT

```text
foreground: #767676
background: #ffffff
```

OUTPUT

```text
contrast ratio: 4.54:1

AA normal text (4.5:1)      PASS
AA large text (3:1)         PASS
AAA normal text (7:1)       FAIL
AAA large text (4.5:1)      PASS
```

## Why It Matters

Low-contrast text is the most common automatically detected accessibility failure on home pages in WebAIM's yearly Million report, and it is one of the easiest to fix with a color change. WCAG 2.1 success criterion 1.4.3 sets the minimum ratios, and EN 301 549 — the standard behind the European Accessibility Act — applies them to web content.

## Who Uses This

- **Designer**: Validate brand color palette against WCAG before locking it in. Many "modern" pastels fail 4.5:1 against white — better to discover before applying brand-wide.
- **Accessibility Auditor**: Check each text and background color pair against AA and AAA thresholds before signing off a client's EAA Annex V declaration.
- **Frontend Developer**: Catch contrast regressions introduced by CSS-variable theme changes before they reach production.

## Frequently Asked Questions

### What WCAG ratio do I need?

4.5:1 for normal text, 3:1 for large text (≥18pt or ≥14pt bold) and UI components. WCAG 2.1 AAA requires 7:1 — a higher bar most brands don't target.

### Does this check images and icons?

Text contrast only, and only for the two colors you enter here. Image contrast (e.g. text-on-image hero banners) needs manual review — there is no automatic page scan.

### What contrast does the EAA require?

For web content, EN 301 549 v3.2.1 applies WCAG 2.1 Level AA, including 1.4.3 — so text needs at least 4.5:1 against its background (3:1 for large text). Check every pair your site uses.

## Related Tools in EAA Compliance

- [Accessibility Checker](https://rankproof.eu/tools/compliance-wcag-scanner)
- [Accessibility Statement Generator](https://rankproof.eu/tools/compliance-accessibility-statement-generator)