FinMathFinMath

Color Picker & WCAG Contrast Checker

Pick a foreground and background color, see the contrast ratio, and check WCAG AA / AAA compliance for normal text, large text, and UI components. Essential for accessible web design.

Foreground (text)

Background

Try:
The quick brown fox jumps over the lazy dog. 0123456789 — small body text at 14px regular.
Bold 18.66px — heading-sized bold text counts as “large” per WCAG.
24px large text — readable on a phone from a meter away.
—
Pick two colors to see the contrast.
AA — Normal text≥ 4.5 : 1—
AA — Large text≥ 3 : 1—
AA — UI components≥ 3 : 1—
AAA — Normal text≥ 7 : 1—
AAA — Large text≥ 4.5 : 1—
APCA (Lc)informational—

What is contrast ratio?

The WCAG 2.x contrast ratio measures how different two colors are in terms of relative luminance — a weighted measure of how bright a color appears to a typical sighted user. The value ranges from 1:1 (same color — invisible) to 21:1 (pure black on pure white, maximum possible). It's computed by linearising each sRGB channel, blending via ITU-R BT.709 coefficients (0.2126 · R + 0.7152 · G + 0.0722 · B), then applying (L1 + 0.05) / (L2 + 0.05).

WCAG 2.1 pass thresholds

  • AA — Normal text: at least 4.5 : 1. This is the legal minimum in many jurisdictions (EU Web Accessibility Directive, US Section 508, AODA in Ontario).
  • AA — Large text: at least 3 : 1. Large = ≥ 18pt regular or ≥ 14pt bold (approximately 24px / 18.66px).
  • AA — UI components & graphics (1.4.11): at least 3 : 1 for button borders, form-field outlines, and icon-only controls against their adjacent background.
  • AAA — Normal text: at least 7 : 1. Required for some government sites and recommended for long-form reading.
  • AAA — Large text: at least 4.5 : 1.

APCA — the future of contrast

The current WCAG contrast formula is known to be imperfect: it over-rewards very dark colors and under-rewards some mid-tone pairs. The proposed WCAG 3 successor, APCA (Advanced Perceptual Contrast Algorithm), returns a directional Lc score from roughly −108 to +108. Positive Lc = dark text on light background; negative = reverse. Rough guidance: |Lc| ≥ 75 for body text, ≥ 60 for large text, ≥ 45 for non-text. APCA is not yet legally required but is used by some design systems (Figma, Adobe Spectrum 2).

Accessibility matters for SEO too

Google's Core Web Vitals don't directly score contrast, but Lighthouse's accessibility audit does — and Google has confirmed accessibility is a signal for page experience. Pages that fail WCAG AA contrast often trigger “Text not readable” or “Low contrast” warnings in Search Console's Page Experience report, hurting rankings and featured-snippet eligibility.

Related tools