Skip to content
ZeroServer.tools

Color Contrast Checker

Check WCAG contrast ratio between two colors.

Almost before we knew it,

we had left the ground. — sample text

Contrast Ratio
17.06:1
AA · NormalPass
AA · LargePass
AAA · NormalPass
AAA · LargePass
WCAG 2.1 UI Components (≥3:1)Pass

WCAG Contrast, Explained

Web accessibility guidelines (WCAG) require sufficient contrast between text and its background so everyone can read it. The ratio ranges from 1:1 (identical) to 21:1 (black on white). The thresholds: AA needs 4.5:1 for normal text and 3:1 for large text (≥18.66px bold or ≥24px); AAA needs 7:1 and 4.5:1 respectively. WCAG 2.1 also requires 3:1 for UI components such as icons, form field borders, and focus indicators. Ratios use the official relative-luminance formula, computed locally in your browser.

Private & free — this tool runs entirely in your browser.

Recommended: Kinsta Fast managed hosting — up to $500 + 10% recurring.affiliate

Related Design & CSS tools