← Back

WCAG Contrast Checker

Enter a text color and background color to get their exact contrast ratio and see whether it passes WCAG 2.x's AA and AAA thresholds for normal and large text — with a live preview of both sizes rendered in your chosen colors.

Large text (18pt+)Normal body text at this size looks like this.
5.17:1contrast ratio
✓ AA — Normal text (4.5:1)
✓ AA — Large text (3:1)
✗ AAA — Normal text (7:1)
✓ AAA — Large text (4.5:1)

How to use

  1. Pick a text color and a background color (hex, or use the color pickers).
  2. The contrast ratio and pass/fail results for all 4 thresholds update instantly.

FAQ

What counts as "large text" under WCAG?

18pt (24px) regular text, or 14pt (18.66px) bold text, or larger — large text gets a more lenient contrast threshold since bigger glyphs stay legible at lower contrast.

What's the difference between AA and AAA?

AA is the standard legal/practical compliance level most sites target; AAA is a stricter, enhanced level not required by most accessibility regulations but recommended where extra readability really matters.

How is the ratio calculated?

Using the WCAG 2.x relative luminance formula on both colors' sRGB values, then comparing the lighter and darker luminance — the same formula browsers' own accessibility inspectors use.