Skip to content
yutils
Example

Input (foreground / background)

Foreground: #475569
Background: #ffffff

Output

Contrast ratio: 7.15 : 1
WCAG AA (normal): ✓ pass (4.5+)
WCAG AA (large): ✓ pass (3+)
WCAG AAA (normal): ✓ pass (7+)
WCAG AAA (large): ✓ pass (4.5+)

Note

sRGB relative-luminance contrast (WCAG 2.1). 'Large' means ≥18pt or ≥14pt bold.

Usage / FAQ

When to use

  • Audit text colors in a design system for accessibility
  • Catch readability issues caused by low contrast early
  • Confirm WCAG AA / AAA compliance (legal requirements)
  • Check contrast pairs in dark mode
  • Verify hover-state contrast for buttons and links

FAQ

Q.AA vs AAA?
A.AA is the typical minimum for the web (4.5:1 normal, 3:1 large). AAA is the strictest (7:1, 4.5:1) — common for government, finance, healthcare. Most sites target AA.
Q.Why does large text have a lower bar?
A.Large characters have more visible area, easing perception. ≥18pt (~24px) or ≥14pt bold (~18.7px) qualifies as 'large'.
Q.What about APCA / WCAG 3?
A.WCAG 3 will introduce APCA, a contrast algorithm that better matches human perception. It's still draft — this tool uses WCAG 2.1.
Fun facts

  • WCAG's color-contrast thresholds — AA requires 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt bold); AAA bumps those to 7:1 and 4.5:1. These ratios trace back to clinical studies of low vision by British color scientist Lovie-Kitchin in the 1980s, later codified into policy.

    W3C — WCAG 2.1 Contrast

  • The WCAG contrast formula doesn't use raw RGB — it uses 'relative luminance' (Y), which undoes sRGB's gamma curve and applies coefficients (R=0.2126, G=0.7152, B=0.0722). The fact that the human eye is most sensitive to green is baked right into the formula.

    W3C — Relative luminance

  • The WCAG contrast formula doesn't fully solve color blindness (~8% of men and ~0.5% of women globally) — reds and greens can have similar luminance, so they blur together for affected users. WCAG 2.2 (2023) tightened some criteria, but you still need dedicated color-blindness verification.

    Wikipedia — Color blindness

Related guides

Related tools

See all in this category →