Accessible Color Pair Generator
Enter a base color and choose a search direction — lighter, darker, or both. The tool finds colors from the same hue family (and neutral grays) that achieve at least a 4.5:1 contrast ratio against your base.
How It Works
The generator takes your base color's hue and saturation, then sweeps through different lightness values. Each candidate is tested against the base color for WCAG AA contrast (4.5:1 for normal text). Neutral gray values are also tested. Results are sorted by contrast ratio, highest first.
Each result shows two preview boxes: your base color as background with the candidate as text, and vice versa. Both directions achieve the same contrast ratio, so you can choose whichever arrangement fits your design.
When to Use This
Use this tool when you've chosen a brand or UI color and need to find text colors, border colors, or background colors that pair well with it while remaining accessible.