Accessible Color Pair Finder
Find nearby foreground and background color pairs that meet WCAG contrast targets.
Enter a foreground and background color to check the current contrast and find nearby alternatives that meet your selected accessibility target. Suggestions are generated locally in your browser.
Use opaque 3- or 6-digit HEX colors, with or without the leading #. The finder is intended for solid sRGB interface colors; transparency, gradients, image backgrounds, and CSS color names need a separate visual review.
How it works
The finder compares your foreground and background color contrast with the selected WCAG target. If the current pair does not meet the target, it searches nearby shades of the foreground, the background, or both colors and ranks suggestions that reach the requested ratio.
AA normal text targets the common 4.5:1 minimum for body text. AAA normal text targets 7:1 for stronger contrast. Large text and UI uses 3:1, which applies to large text and many non-text interface components.
Suggestions keep each color's hue and saturation as much as possible while changing lightness, so they are useful starting points for design review rather than a replacement for checking the final interface. Review hover, focus, disabled, transparency, and image-backed states separately.
Your color values stay in your browser and are not uploaded by this tool.
