Accessible Color Pair Finder

Accessible Color Pair Finder starts from one color and works outward, proposing neutral text colors that reach AA contrast against it without any further tuning.

What is Accessible Color Pair Finder?

Accessible Color Pair Finder starts from a single color and works outward. You choose the base, and the tool builds a ramp of neutral candidates, keeps only the ones that reach 4.5 to 1 against it, sorts them from strongest to weakest and shows the best eight. It answers the common design question of what to set on top of a given color, without a round of trial and error.

The candidates are generated rather than looked up, and the way they are built is the important detail behind the results:

• Twenty-one neutral steps, produced by walking lightness from 0 to 1 in fixed 5% increments with chroma held at zero throughout.
• A single AA contrast filter at 4.5 to 1 against your base, with everything below that discarded before the list is built.
• Ratio ordering, strongest first, so the top of the list is the most separated pairing rather than the most visually pleasing one.
• A shortlist of eight, since the passing set is usually longer than a design decision needs.

Each candidate is constructed in OKLCH with zero chroma, then converted to hex, and every ratio is the standard WCAG 2.x contrast figure: channels linearised out of sRGB, weighted 0.2126 red, 0.7152 green and 0.0722 blue into a relative luminance, then the lighter plus 0.05 divided by the darker plus 0.05, rounded to two decimals. The preview draws each candidate as text on your base color, so you can see the pairing rather than infer it.

The narrowness of the ramp is what keeps the results clean, and it is also the main limitation.

• Every candidate is a pure neutral with no chroma. A warm or cool tinted grey has to be derived from one of these and re-checked, since the hex value will no longer be in the list.
• Only the AA threshold is applied. There is no way to ask for the 7 to 1 enhanced set, so finding AAA-safe text means working up the list manually.
• The lightness steps are fixed at 5%, which means a workable value just inside a threshold can be missed entirely.
• Only the top eight passing candidates are shown, so the list is a shortlist rather than the complete set.
• The base is always the background. If your base is the text and the neutral is the surface, the ratio is the same but the reading of the results is reversed.
• No alpha, and no third surface behind the pair.

Reach for this page when you have a brand color that has to stay and you need text colors that work on it, which is the reverse of the usual check. For a palette that already exists, a whole-set audit is faster elsewhere, and for a pair that passes on paper but reads poorly, the readability preview is the better next step.

The list is deliberately a set of AA contrast neutrals rather than a palette generator, so the results read as answers to one question: what text color for background X still works. That framing is why the candidates are ordered by ratio and why the shortlist stops at eight, since a designer choosing readable color pairs is usually looking for the first value that clears the bar with room to spare rather than the widest possible set of options.

How to use Accessible Color Pair Finder

1. Enter the base color in the swatch field, which is the surface the text will sit on.
2. Read the grid of candidates, each previewed as text on your base color.
3. Check the hex value and the ratio printed under each candidate, to two decimal places.
4. Pick from the top of the list for the strongest separation, or further down when you want a softer pairing, then re-check any tinted variant separately.

When to use Accessible Color Pair Finder vs related tools

Use the accessible color pair finder when a base color is fixed by a brand and you need to know what text colors can safely sit on it. Choosing between two known colors is the job of the contrast checker, auditing a whole palette at once belongs with the palette accessibility checker, checking whether a passing pair actually reads well is the text readability checker, and the same is equally true of the WCAG 2.1 AA checker verdict once a candidate is chosen.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.

Frequently asked questions about Accessible Color Pair Finder