Color Contrast Checker
Test any text/background pair against WCAG 2.1 contrast requirements — normal text, large text and UI components — with an instant live preview.
Colors
Contrast ratio
14.68:1
Large heading text
This is normal body copy at 16px. WCAG requires a 4.5:1 ratio for text this size, and 3:1 for the large heading above.
Frequently Asked Questions
What contrast ratio do I need for WCAG?
WCAG 2.1 requires at least 4.5:1 for normal text (AA) and 7:1 for AAA. Large text — 18pt/24px regular or 14pt/18.5px bold and up — needs 3:1 (AA) or 4.5:1 (AAA). UI components and graphical objects also need 3:1.
How is contrast ratio calculated?
Both colors are converted to relative luminance (how bright they appear to human vision), then the ratio is (lighter + 0.05) / (darker + 0.05). The result ranges from 1:1 (identical colors) to 21:1 (black on white).
Does the rule apply to logos and decorative text?
No — WCAG exempts logotypes, brand names and purely decorative elements. Incidental text (inactive controls, photos of text) is also excluded. Everything user-facing beyond that should meet the ratio.
Failed the ratio? Pick a lighter or darker base in the color library — every color page lists its contrast against black and white text.