ZapFile

Color Contrast Checker

Check WCAG contrast ratios for text and UI colors

Try:

Any CSS color works, including transparency: #rgb, #rrggbbaa, rgb(), hsl(), oklch() and names like navy.

Sample heading text

Large text: 14 pt bold or 18 pt

Body text for readability check.

Small print, captions and footnotes need the most contrast.

Button

Contrast ratio

4.83:1

Best level reached: AA

  • AA · Normal text4.5:1Pass
  • AA · Large text3:1Pass
  • AAA · Normal text7:1Fail
  • AAA · Large text4.5:1Pass
  • AA · Icons, borders and controls3:1Pass

Large: 18pt+ or 14pt+ bold

Closest colors that pass

Same hue and saturation, with the smallest lightness change that reaches the target. Click to apply.

Frequently Asked Questions

Runs on your device, not our servers

This page uses browser APIs (Canvas, WebAssembly, workers, etc.) so your files stay on your machine.

  • Processing happens in this tab — close the tab and the session ends.
  • No ZapFile account is required and we do not store your uploads (there are none).
  • Download only what you choose; nothing is sent to us for “cloud processing.”
  • Verify it yourself: DevTools → Network while using a tool — you should not see your file bytes uploaded to ZapFile.
  • Add ZapFile to your home screen for a faster app shell and offline access to cached pages (tools still need a capable browser).