HEXgenerator.online

WCAG contrast checker

WCAG contrast measures the luminance difference between text and background as a ratio from 1:1 to 21:1. Level AA needs at least 4.5:1 for normal text and 3:1 for large text. Level AAA needs 7:1 and 4.5:1.

Updated

Click a HEX to copy it · lock to keep it

How to use it

  1. Generate or load a palette. The matrix pairs each background color with every other color as text.
  2. Look for cells marked AA or AAA for normal text. AA18 only works for large text.
  3. Use “Test a pair” to see a real heading and paragraph with the pair you pick.

Frequently asked questions

What counts as large text in WCAG?

Text that is at least 18 points (about 24 px), or 14 points (about 18.7 px) in bold. For that size, WCAG 2.2 accepts a minimum contrast of 3:1 at level AA.

How is the contrast ratio calculated?

Add 0.05 to the relative luminance of each color, then divide the lighter value by the darker one. The result runs from 1:1 (the same color) to 21:1 (black on white).

Does contrast apply to icons and borders too?

Yes. WCAG success criterion 1.4.11 asks for at least 3:1 for interface components and graphics needed to understand the content, such as icons, input borders and chart lines.