Pick a background and get text colors that actually pass WCAG — black, white and same-hue tints ranked by real contrast ratio, with AA/AAA marked on each.
Settings
Generated locally in your browser — your settings and results never leave this page.
From “does it pass?” to “what passes?”
The contrast checker answers whether a pair works; this generator answers the harder daily question — what text color should I use on this background? Pick the background and get ranked candidates: pure white, pure black, and same-hue tints computed in OKLCH so they keep a whisper of the background’s character while passing for real. Every candidate shows its exact ratio and AA/AAA verdict on live sample text.
Worked example
Background #3b82f6:
#ffffff 3.68:1 large-only
#0c1b3d 8.11:1 AAA ← same-hue dark tint
#000000 7.85:1 AAANotably: white on this popular blue FAILS for normal text — one of the most common real-world violations, visible here immediately.
Why tints beat pure black/white
- Pure black on colored backgrounds looks harsh; pure white can glare. A tint carrying the background’s hue reads as designed — and because it is computed in OKLCH with real ratio checks, the accessibility is not sacrificed for the aesthetics.
The mid-tone trap
- Backgrounds around 50–65% lightness are hostile to text: neither dark nor light reaches 4.5:1. When that happens the tool says so instead of pretending — the honest fix is adjusting the background, then re-checking.
Workflow
- The top candidate is your on-color: assign it to
--on-surface, or theprimary-onslot in the Semantic Token Generator. Verify edge pairs in the WCAG Contrast Checker.
How to use the Accessible Text Color Generator
- Pick the background color your text will sit on.
- Review the candidates — black, white and same-hue tints — ranked by real ratio.
- Prefer AA (4.5:1) minimum; AAA (7:1) for body text where possible.
- Copy the CSS variables with the winning colors.
Frequently asked questions
Why offer tints instead of just black or white?
Pure black on colored backgrounds often looks harsh, and pure white can glare. Tints that keep a whisper of the background's hue look intentional while still passing — the generator computes them in OKLCH so the ratios stay honest.
What if nothing passes on my background?
Mid-tone backgrounds (L around 50–65%) are hostile to text: neither dark nor light reaches 4.5:1. The tool warns instead of pretending, and the real fix is adjusting the background — darken or lighten it, then re-check.
Is the "on-color" the same idea as Material's onPrimary?
Yes — text-on-background tokens. The top candidate here is what you would assign to –on-surface or the Tailwind primary-on slot in the Semantic Token Generator.
Large text passes but normal fails — can I use it?
For genuinely large text (18pt/24px+, or bold 14pt+), yes per WCAG. But remember users zoom and components get reused at smaller sizes — the 4.5:1 candidate is the safer default.
