Question 1

What is the WCAG contrast ratio?

Accepted Answer

It is the ratio of the relative luminance of the lighter color to the darker color, ranging from 1:1 (identical) to 21:1 (black on white). WCAG uses it to measure how readable text is against its background.

Question 2

What is the difference between AA and AAA?

Accepted Answer

AA is the standard conformance level required by most accessibility laws and needs 4.5:1 for normal text. AAA is the enhanced level and needs 7:1 for normal text, recommended where the highest readability is desired.

Question 3

Why is the threshold 4.5:1?

Accepted Answer

4.5:1 was chosen to compensate for the roughly 1.5x loss of contrast sensitivity experienced by users with moderately low vision (around 20/40), so normal-size text stays legible for most people.

Question 4

What counts as large text?

Accepted Answer

Large text is at least 18.66px (14pt) bold, or 24px (18pt) regular. Large text only needs 3:1 for AA and 4.5:1 for AAA because bigger letterforms are easier to read at lower contrast.

Question 5

How do I fix low contrast?

Accepted Answer

Push the two colors further apart in lightness: lighten the lighter color (raise its L in HSL) or darken the darker one. Adjusting lightness keeps your hue while raising the contrast ratio.

Contrast & Colorblind Checker