COLOR CONTRAST

Check WCAG 2.1 contrast ratio between foreground and background colors. Get instant AA/AAA pass/fail status for text and UI components — all calculations run in your browser.

001

FOREGROUND (TEXT)

002

BACKGROUND

003

PREVIEW

Normal text (14px) — The quick brown fox jumps over the lazy dog.

Large text (18px) — The quick brown fox jumps over the lazy dog.

Bold large (14px bold) — The quick brown fox jumps over the lazy dog.

004

RESULTS

21.00:1

EXCELLENT

CRITERION

MIN RATIO

RESULT

AA — Normal text (<18px / <14px bold)

4.5:1

PASS

AA — Large text (≥18px / ≥14px bold)

3.0:1

PASS

AA — UI Components & Graphics

3.0:1

PASS

AAA — Normal text

7.0:1

PASS

AAA — Large text

4.5:1

PASS

006

ABOUT WCAG CONTRAST

WCAG 2.1 defines contrast requirements for accessible web content. Ratios range from 1:1 (no contrast) to 21:1 (black on white).

AA (4.5:1) — minimum for normal text. Legally required in many jurisdictions.
AA (3:1) — large text (≥18px regular or ≥14px bold) and UI components.
AAA (7:1) — enhanced accessibility for normal text.
AAA (4.5:1) — enhanced for large text.

Algorithm: WCAG relative luminance formula. All calculations run client-side — no data leaves your browser.