Contrast Checker (WCAG)

Check color contrast for AA/AAA compliance with preview.

Contrast Checker UI

Informational only; verify critical results independently.

How to use

  1. Pick text (foreground) and background colors from your design.
  2. Enter hex or RGB values or use native color pickers if provided.
  3. Read the computed contrast ratio (L-based relative luminance).
  4. Check pass/fail for WCAG AA and AAA at normal and large text sizes.
  5. Try a darker text or lighter background if you barely fail 4.5:1.
  6. Document the ratio in design specs for engineers implementing themes.

Examples

  • #111 on #fff — high-contrast body text
  • #767676 on #ffffff — borderline AA for normal text
  • Large headings at 3:1 minimum with bold 18pt+
  • Button label #fff on brand #0066cc
  • Dark mode #e6e6e6 on #121212
  • Error red #c62828 on white for form messages

FAQ

What are the WCAG thresholds?
AA: 4.5:1 for normal text, 3:1 for large text; AAA: 7:1 and 4.5:1 respectively.
What counts as large text?
Roughly 18 pt+ regular or 14 pt+ bold, or about 24/19 CSS px depending on interpretation—verify with your audit process.
Does opacity affect ratio?
Yes—semi-transparent colors blend with the background; tools composite them.
Non-text UI?
Graphics and focus rings have related but separate guidance; contrast ratio still informs choices.
Why does Photoshop differ?
Color profiles and rounding differ; use one pipeline for sign-off.
Privacy?
Checks run locally in your browser.

Related guides

Related tools

Last updated: 2025-09-16

← Back to Color Tools