DOFIW COLOR ACCESSIBILITY TOOLS
Accessible Color Suggestion Tool
Repair a failing text and background combination. Find nearby lighter and darker alternatives that meet your selected WCAG contrast target without uploading your colors.
Set your colors and target
Compare the suggestions
HOW TO USE IT
Repair contrast in four steps
- Enter the current text and background colors.
- Select the WCAG target required for the intended text.
- Choose which color may change: the text or the background.
- Compare and copy the nearest valid lighter or darker suggestion.
Inputs
Two HEX colors, a contrast target, and the color that is allowed to change.
Outputs
A current ratio plus lighter and darker passing candidates, their ratios, and percentage change.
HOW SUGGESTIONS ARE CALCULATED
Small changes along two predictable paths
The tool holds one color fixed and moves the adjustable color along a straight RGB path toward white and toward black. A binary search finds the smallest change on each path that reaches the selected contrast ratio.
This produces transparent, repeatable suggestions rather than claiming to choose the only correct design color. Always review the result in the context of your brand and interface.
PRACTICAL USES
When color suggestions help
Repair body text
Darken a low-contrast text token while keeping a white or light surface unchanged.
Preserve brand text
Adjust a surface when the brand foreground color must remain fixed.
Button states
Explore safer text or background values for buttons and badges.
Design handoff
Copy a passing HEX value and its verified ratio for implementation.
LIMITATIONS
What this tool cannot choose for you
- It searches toward black and white; it does not explore every possible hue or saturation.
- It supports opaque 3-digit and 6-digit HEX colors in this version.
- It does not evaluate gradients, images, video, patterns, or changing backgrounds.
- It does not test non-text contrast, focus indicators, or color-only communication.
- A passing suggestion does not guarantee WCAG or legal compliance for an entire page.
PRIVACY
Your colors never leave the browser
All calculations run locally on your device. No color, result, or design information is uploaded, stored, or sent to an API. Clipboard access occurs only after you press a copy button.
FREQUENTLY ASKED QUESTIONS
Questions about suggested colors
Why do I sometimes receive only one suggestion?
One direction may never reach the target. For example, making already-light text even lighter on a white background cannot create enough contrast.
Is the suggested color the closest possible color?
It is the closest passing point found on the direct RGB path toward black or white. Another hue could be perceptually closer, so treat the result as a practical repair option.
Should I adjust the text or the background?
Adjust the color with fewer design constraints. Body text is often darkened against a fixed surface, while branded text may require changing the surface instead.
Why are AA and AAA targets different?
AAA uses a higher contrast threshold. Text size also matters: normal AA text needs 4.5:1, while large AA text needs 3:1.
Does using a suggestion make my website accessible?
No. It addresses one selected color pair only. Complete accessibility includes content, semantics, keyboard use, focus, labels, reflow, and human testing.
This tool is an educational testing aid and does not guarantee WCAG conformance or legal compliance. Read the WCAG contrast guidance.