Color Legibility Analyzer

Go beyond pass/fail contrast with APCA scores, WCAG ratios, and live text rendering previews for every color pair.

Enter a foreground and background color to generate a full legibility report — review the APCA Lc score, WCAG ratio, and rendered previews across font sizes and weights before shipping your design.

Settings

Live Preview

Legibility Metrics

⚡ Quick actions

What the color legibility analyzer measures

The color legibility analyzer goes beyond a single pass/fail badge by combining two complementary contrast models with realistic text previews. You get a WCAG 2.x contrast ratio, an APCA Lightness Contrast (Lc) score, and simulated renderings at multiple font sizes and weights — so you can judge how a color pair actually reads, not just whether it clears a numerical threshold.

WCAG 2 calculates a relative luminance ratio between 1:1 and 21:1, with AA requiring 4.5:1 for normal text. APCA, by contrast, produces a perceptually uniform Lc value that ties recommended contrast to the actual font size and weight you plan to use.

Why APCA scores matter for real readability

APCA was built to address well-documented gaps in the older formula. Research and design teams have shown that WCAG 2 can both over- and under-report perceived contrast, especially in dark mode or with mid-range colors. APCA accounts for spatial frequency: thin, light-weight fonts need a higher Lc value to stay legible, while heavier strokes can tolerate less contrast.

This analyzer reports the APCA Lc value alongside the recommended use case — Lc 90 for premium body text, Lc 75 as a minimum for body copy, Lc 60 for large/medium content, and Lc 45 for non-text UI. You'll see exactly which weight/size combinations clear the bar.

How to use the legibility report

  1. Pick or paste a foreground (text) color and a background color.
  2. Read the WCAG ratio plus AA/AAA verdict for normal and large text.
  3. Check the APCA Lc score and the lookup table of allowed font size/weight pairs.
  4. Scan the rendered previews to confirm headings, body, and small text all feel readable.

Pair it with the rest of your accessibility workflow

For sitewide audits, feed your tokens into the Palette Accessibility Matrix to validate every foreground/background combination at once. If you only need a quick ratio, the Contrast Checker handles the basics, and the Focus Indicator Contrast Checker covers WCAG 2.2 Success Criterion 1.4.11 for focus rings. Designers building a token system can lock accessible pairs into the Color Safe Palette Builder.

Who should use this tool

  • Product designers validating type scales against brand colors.
  • Front-end developers shipping dark-mode themes where WCAG 2 alone misleads.
  • Accessibility specialists producing dual WCAG + APCA reports for stakeholders.
  • Brand teams stress-testing marketing colors at real body-copy sizes.

Use the analyzer early in the design phase — fixing a non-legible color pair in Figma takes minutes; fixing it after launch costs a redesign cycle.

Frequently Asked Questions