Suggest readable text / background pairs
Drop in one base color and see six candidate text-on-background pairs with their contrast ratios. Quickly pick a safe combination.
Base on white
Base on black
White on base
Black on base
Lighter bg + base fg
Darker bg + base fg
How to find readable pairs
One base color → six suggested pairings, each with a live preview and contrast ratio.
- 01
Pick a base
Usually your brand primary or theme accent.
Colors round-trip through a normalised OKLCH representation, so manipulations (lighten, mix, contrast) preserve perceptual uniformity per CSS Color 4.
inputOKLCHCSS Color 4perceptuallivebase · colorhex · sRGB#3b82f6
loaded · normalisedOKLCH · ready - 02
See six candidates
Base on white, on black, white-on-base, black-on-base, plus shifted bgs.
Format conversion handles
hex,rgb(),hsl(),oklch(),color(display-p3 …)with proper gamut mapping when crossing colour spaces.pairshex · rgb · hslP3gamut-mappedlivepairs · options6 · live6 pairs ranked
options applied · livelive - 03
Read ratios
Color of the left border indicates pass/fail at WCAG AA.
Contrast and accessibility checks evaluate against WCAG 2.2 AA (4.5:1) and AAA (7:1) thresholds; APCA is offered when contrast is the goal.
checkWCAG 2.2APCAAA · AAAcontrastborder · convertedcolor · readygreen=pass
converted · liveWCAG-aware - 04
Pick & ship
Copy the chosen pair for use in CSS.
Copy formats any swatch in the chosen syntax (
#aabbcc,rgb(170 187 204), etc.); downloads emit CSS variable blocks or palette JSON.shipclipboardCSS varspalette JSONblobok · copiedready · done✓ Copied pair
shipped · ready to shipsuccess
Colour work that survives accessibility audits
Use OKLCH for manipulation
OKLCH is perceptually uniform — lightness changes look uniform. hsl() isn’t, and produces muddy mid-tones.
Test against WCAG 2.2
4.5:1 for normal text (AA), 7:1 for AAA. Use Contrast Checker before shipping.
Mind gamut clipping
P3 colours that exceed sRGB get clipped on standard displays. Choose relative colorimetric in CSS Color 4.
Colour blindness affects 8%
Use the Color Blindness simulator to check critical UI before launch.
Don’t hardcode hex
Use CSS variables. Light/dark themes become trivial when colours are tokenised.
Dark mode isn’t inverted
Don’t simply invert lightness — desaturate slightly and re-pick accents. Pure-inverted UIs look harsh.
When to use a pair suggester
Brand kit setup, theming, blog post UI.
Brand kit
Decide which text/bg combos are safe defaults. Conversions go through OKLCH so perceptual lightness stays uniform across hues — a 50% L blue looks as bright as a 50% L yellow. HSL fakes this and produces muddy mid-tones, OKLCH solves it per CSS Color 4.
WCAG 2.2 AATheming
Pick a base and immediately see best-fitting pairings. WCAG 2.2 contrast is sampled live for AA (4.5:1) and AAA (7:1) — flip foreground/background to test both directions. APCA is offered when contrast itself is the goal (e.g., dataviz).
P3-awareMarketing
Choose readable buttons that match the hero color. Output covers hex, rgb(), hsl(), oklch(), and color(display-p3 …) for CSS Color 4. Drop straight into Tailwind config, CSS custom properties, or Figma without re-typing values.
perceptually-uniformTokens
Generate <code>text-on-X</code> tokens for design systems. Pair with the Contrast Checker before shipping any new theme. Catches accessibility regressions before they become bugs filed against you by users with low vision.
gamut-safeQuick decision
Stop guessing whether white or black text is better. Tokens drop straight into Figma variables, Tailwind config, or CSS custom properties. Theme switching becomes a single variable swap rather than a search-replace across stylesheets.
a11y-readyCross-tool
Share the report in design specs. Gamut-aware: tools warn before you ship a P3 colour that clips on sRGB displays. Choose the appropriate fallback strategy (relative colorimetric vs perceptual) per CSS Color 4 spec.
design-tokenFrequently asked questions
Something missing?
Tell us what you need. We ship the top requests every two weeks.