STUDIO / TOOL 03

WCAG 2.2 Color Contrast Checker

Calculate relative-luminance contrast ratios and check text and visual elements against WCAG 2.2.

Presets:

Color inputs

Text / foreground color

Background color

Preview

The quick brown fox jumps over the lazy dog. Check legibility on light and dark surfaces.

Contrast ratio

18.10 : 1

Normal text

Min 4.5:1 for AA • Min 7:1 for AAA

AA AAA

Large text (18pt+ / bold 14pt+)

Min 3:1 for AA • Min 4.5:1 for AAA

AA AAA

UI components & icons

Min 3:1 for Level AA

Calculations use the WCAG 2.2 relative-luminance formula from W3C.