Question 1

How does a WCAG contrast checker work?

Accepted Answer

It calculates the relative luminance of two colors (foreground and background) to determine their contrast ratio, which ranges from 1:1 (no contrast) to 21:1 (maximum contrast, black on white).

Question 2

What are the recommended contrast ratios?

Accepted Answer

WCAG AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. WCAG AAA requires at least 7:1 for normal text and 4.5:1 for large text.

WCAG Contrast Checker