All demos
Contrast checker
Check any two colours against WCAG AA and AAA, with this site's own tokens preloaded.
Contrast ratio 16.28:1
The quick brown fox jumps over the lazy dog, 0123456789.
The quick brown fox jumps over the lazy dog, 0123456789.
- AA — body text≥ 4.5:1pass
- AA — large text and UI≥ 3:1pass
- AAA — body text≥ 7:1pass
- AAA — large text≥ 4.5:1pass
This site's own tokensMeasured from the live theme — click a row to load it.
How it works
Colours are converted to linear sRGB, the relative luminance is computed with the WCAG coefficients, and the ratio is (L1 + 0.05) / (L2 + 0.05). The thresholds are the real ones: 4.5:1 for body text at AA, 3:1 for large text and UI borders. The presets come from the design tokens of this very site.
Built withSCSS · Vue 3