What is a contrast checker and why use it?

Accessibility & Usability

Sufficient contrast improves readability for everyone—especially users with low vision, color-vision deficiencies, or on low-quality displays.

WCAG 2.1 Requirements

Check 1.4.3 Contrast (Minimum), 1.4.6 Contrast (Enhanced), and 1.4.11 Non-text Contrast for UI components and graphics.

EAA / EN 301 549

The European Accessibility Act references EN 301 549 which in turn references WCAG—contrast is a key part of meeting obligations.

Brand & Design Quality

Accessible palettes create resilient, legible interfaces that work in light/dark themes and across devices.

WCAG 2.1 contrast thresholds (quick reference)

Normal Text

Minimum ratio: 4.5:1 (text under 24px regular / 19px bold).

Large Text

Minimum ratio: 3:1 (≥ 24 px regular or ≥ 19 px bold).

UI Components & Graphics

1.4.11

Minimum contrast with adjacent colors: 3:1 (focus rings, form inputs, icons, etc.).

Enter foreground and background colors (HEX). The tool calculates the contrast ratio and shows pass/fail for WCAG levels. Results update as you type.

Text color

Background color

Example text preview
Contrast ratio: 8.67:1

Normal text

Contrast Ratio:8.67:1

Normal Text (WCAG AA)

Pass ≥ 4.5

AAA

Pass ≥ 7.0

Does WCAG 2.1 change contrast ratios?

No, the contrast thresholds remain the same as in 2.1 (4.5:1 normal text, 3:1 large text, 3:1 for non-text UI/graphics).

Does the EAA require WCAG contrast?

Yes. EN 301 549 (referenced by the EAA) incorporates WCAG 2.1 requirements, including color contrast for text and non-text elements.

What counts as 'large text'?

At least 18pt (24px) normal weight or 14pt (19px) bold, which qualifies for the 3:1 threshold.

Run contrast checks during design reviews and code PRs. Combine with automated scanning to catch issues at scale.