Contrast Ratio Calculator

Your details

Hex code for the text or icon color. Enter 3 or 6 digits, # is optional.
Hex code for the surface color behind the text or icon.
Large text has a lower minimum requirement under WCAG 2.x. UI components (buttons, borders, icons) also use the lower 3:1 minimum.
Contrast ratioAAA pass
21:1

The WCAG luminance contrast ratio between the two colors (1:1 to 21:1).

Foreground luminance0
Background luminance1
WCAG AAPass
WCAG AAAPass
AA threshold4.5:1
AAA threshold7:1
RatingExcellent (AAA)
21 :1
Fails all<3AA large/UI3-4.5AA normal4.5-7AAA7+

Contrast ratio: 21.00:1 - Excellent (AAA)

  • A ratio of 21.00:1 meets WCAG Level AA for normal text.
  • This combination also passes the stricter WCAG AAA standard (7:1 for normal text, 4.5:1 for large text).
  • Large text is defined as 18 pt (24 px) or larger, or 14 pt (~18.67 px) or larger if bold.

Next stepVerify your color choices with a screen-reader user or simulate color-vision deficiency to cover real-world accessibility gaps beyond luminance contrast.

 = Powered by OnlyCalculators