Accessible Color Finder

How to use

1. 1Pick a direction. Find text colors when your entered color is the background and you need the right text color. Find background colors when your entered color is the text and you need the right background.
2. 2Enter your color in HEX (#rrggbb), rgb(), or hsl() format, or use the color picker square next to the input. Try a preset (Blue 600, Indigo 600, Violet 600, Rose 600, Amber 500, Emerald 600, Teal 600, Sky 500, White, Black) for a one-tap starting point.
3. 3Select the target WCAG tier: AA normal (4.5:1) for body copy, AAA normal (7:1) for the strict accessibility tier, AA large (3:1) for headings 18pt+ or 14pt+ bold, or AA non-text UI (3:1) for borders, icons, focus rings, and chart strokes.
4. 4Read the Recommended color card. It picks the closest tint or shade of your brand color that meets the chosen tier, so the suggestion still feels like your brand instead of jumping straight to pure black or pure white.
5. 5Scroll the Brand color ramp to see every step from darkest to lightest, with the contrast ratio and Pass / Below threshold badge on each swatch. Scroll the Neutral palette for the black, white, and slate gray steps that pass.
6. 6Copy any swatch's HEX value with the Copy button, or use Copy report to grab the full plain-text summary (input color, target tier, recommended swatch, and every passing match) for an audit, ticket, or design review.

About this tool

Accessible Color Finder solves the hardest part of building a WCAG-compliant interface: picking text and background colors that actually pass the contrast check. Enter a single brand color (HEX, rgb(), or hsl(), with optional alpha) and pick the target tier (WCAG AA normal text at 4.5:1, AAA normal text at 7:1, AA large text at 3:1, or AA non-text UI at 3:1). The tool generates two parallel result panels. The first panel is a brand color ramp: the tool builds a 25-step tint and shade ramp by sweeping the lightness of the entered color while keeping the hue and saturation fixed, then checks every step against your color and surfaces the gentlest passing swatch as a Recommended brand-safe color. This is what designers usually want when they ask whether their brand color is accessible: not the answer no, switch to pure black or pure white, but the closest, on-brand alternative that still meets the spec. The second panel is a curated neutral palette of pure black, pure white, and the Tailwind-style slate ramp from 50 to 950; every swatch is contrast-checked and labeled Pass or Below threshold so it's clear at a glance which text color works on the current background. A direction toggle flips the role of the input color: in Find text colors mode the entered color is the background and the suggestions are foreground text colors; in Find background colors mode the entered color is the text and the suggestions are background colors. A live preview block renders the recommended pairing with real headline, body, and caption text in three sizes, plus a UI sample, so the result can be eyeballed before being shipped. Color parsing accepts HEX (3, 4, 6, or 8 digits), rgb(), rgba(), hsl(), and hsla() in CSS Level 4 syntax. Transparent inputs are composited over white before checking, which matches what every browser shows when the surface underneath is the default page background. The contrast math is the standard WCAG 2.1 / 2.2 formula: sRGB channels are gamma-decoded to linear sRGB, weighted with the Rec. 709 luminance coefficients (0.2126 R, 0.7152 G, 0.0722 B), and the ratio is computed as (L1 + 0.05) / (L2 + 0.05). Use Copy report to grab a plain-text summary that lists every passing swatch with its contrast ratio, ready to drop into a design review or accessibility audit. Everything runs locally in your browser: the colors you enter here never leave your device.

Free to use. Works in your browser. No signup, no login.