Fix a text color and find backgrounds that pass WCAG with it. Candidates include black, white and same-hue light/dark variants of your color, each measured and ranked by real contrast ratio with AA, AAA and large-text verdicts — the mirror image of the usual text-color finder.
Settings
Generated locally in your browser — your settings and results never leave this page.
When the text color is the fixed point
Contrast tooling almost universally assumes backgrounds are decided and text adapts. Reality often inverts: the brand ink is mandated, the icon font ships one color, the legacy CSS pins the type — and the question becomes “what may sit behind this?”. This finder answers that inverted question directly: fix the foreground, generate and measure candidate grounds, rank by ratio.
The candidate philosophy
Backgrounds are not arbitrary colors — they come from a small family: paper whites, near-blacks, and quiet versions of a hue. The finder generates that family in your text color’s own hue (near-white tints, near-black shades, muted mids, plus pure white and black as anchors), measures each against your text, and presents live text samples so the numbers arrive with their appearance attached. Same-hue candidates keep the pairing harmonious by construction — contrast rarely needs to cost coherence.
Diagnosing by result shape
The result list is itself diagnostic. A healthy dark text returns a page of passing lights; a healthy light text, passing darks. A text color that returns almost nothing at 4.5:1 is announcing its own defect — mid-toned inks are close to everything and readable on nothing, and no background search fixes them. The remedy then is upstream: darken or lighten the text itself (Shades & Tints) and watch the candidate space reopen.
Composite obligations
A background that passes for text may still owe contrast elsewhere: 1.4.11 requires the component’s boundary to hold 3:1 against the surrounding page, and adjacent surfaces need their own separations. After choosing from this finder, the UI Component Contrast Checker covers the boundary question and the Contrast Matrix the whole-system view — three tools, one continuous audit.
Fixed-foreground scenarios, catalogued
The situations that invert the usual question recur predictably: brand guidelines that mandate an exact ink (“text is always our navy”); icon systems shipped in one color awaiting placement; syntax-highlighting themes where token colors are fixed and the editor background is the variable; print-to-web ports where the type color is inherited history; and dark-mode retrofits where light text exists and surfaces are being invented. In each, foreground-first tooling saves the awkward dance of guessing backgrounds and checking them one at a time — the ranked list is the whole search space, measured.
How to use the Accessible Background Color Finder
- Pick the text color you are committed to.
- Choose the target level.
- Ranked backgrounds appear – measured, with live text samples.
- Copy the passing list or its CSS variables.
Frequently asked questions
When do I need this instead of a text-color finder?
When the foreground is the fixed constraint: brand-mandated text colors, icon fonts, an established ink you cannot touch. The usual tools assume backgrounds are sacred and text adjusts; this one inverts the question.
How are the candidate backgrounds chosen?
From the colors that plausibly serve as grounds: white, black, and light/dark constructions in your text color's own hue (near-white tint, near-black shade, muted mid) – each measured against your text and ranked by real ratio. Same-hue candidates keep the pairing harmonious rather than arbitrary.
Why do mid-toned text colors return so few options?
Because a mid-gray-ish text (luminance near 0.2-0.3) sits too close to everything: light backgrounds give 3-4:1, dark ones similar. That is the mathematical signature of a bad text color – the finder failing loudly is the diagnosis. Darken or lighten the text itself and options explode.
Do the results account for large versus normal text?
The level selector does: 3:1 for large text (18pt+/14pt bold), 4.5:1 normal AA, 7:1 AAA. Choose per the text's actual size class – a headline ink has legitimately more background freedom than body ink.
Can I use the passing backgrounds behind interactive elements?
For the text inside them, yes by construction. But component boundaries have their own 3:1 rule against the surrounding page (WCAG 1.4.11) – check that second relationship in the UI Component Contrast Checker.
What if none of the candidates fit my design direction?
Use them as calibration: the ranked list shows how light or dark any background must be. Take your preferred hue to the OKLCH Color Generator, match the lightness of a passing candidate, and re-verify – the finder defines the corridor, you decorate it.
Is the same-hue tint really distinguishable from plain white?
At 2-4% chroma, consciously no, atmospherically yes – pages feel warmer/cooler and more intentional. It is the cheapest branding trick in the book and the finder builds it in because contrast rarely has to cost identity.
