Skip to content

Check if your text passes WCAG contrast

Check whether your text and background color pass WCAG accessibility contrast requirements.
foregroundbackground
The quick brown fox
Smaller body text · 16px · lorem ipsum dolor sit amet
13.54:1contrast ratio
PASSNormal text — AA
PASSNormal text — AAA
PASSLarge text — AA
PASSLarge text — AAA
PASSUI components — AA

About this tool

How to use it

  1. Pick or enter a foreground and a background color.
  2. See the WCAG AA and AAA pass/fail result instantly.
  3. Adjust a color until it passes.

Why it lives here

Everything runs in your browser. No account, no ads, no tracking, and no upload.

Tagged with

contrastwcagaccessibilitya11y designers

related tools

Lorem ipsum Placeholder copy by paragraphs, sentences or words — any length, instantly. Writers Color palette Generate palettes by harmony rule with CSS variables. Designers Color converter Enter a color once and get it in HEX, RGB, and HSL simultaneously. Designers