♿ Accessible Color Generator (WCAG Fixer)
Give a foreground and background color and a WCAG target, and get the nearest passing color — same hue, adjusted lightness — that meets the contrast ratio.
Current contrast
2.50:1
✗ Below target — nearest fixes below
Nearest darker
#3878b7
4.63:1
Exact WCAG 2 contrast (sRGB relative luminance). The fix holds hue & saturation and moves only lightness. 🔒 Computed in your browser.
How the accessible color generator (wcag fixer) works
The tool computes the exact WCAG 2 contrast ratio (using sRGB relative luminance) between your foreground and background. If it fails, it binary-searches the foreground lightness — holding hue and saturation in HSL — both lighter and darker until the ratio meets your target (AA 4.5, AA-large 3, or AAA 7), and returns the nearest passing color in each direction with a live preview.
This extends our contrast checker from "pass or fail" to "here is the fix". Because it holds hue and only moves lightness, the suggested color stays on-brand — the smallest change that makes text legible and WCAG-compliant.
Frequently asked questions
How do I make a color WCAG accessible?
Keep the hue and adjust the lightness until the contrast ratio against the background meets the target — 4.5:1 for normal text (AA), 3:1 for large text, or 7:1 for AAA. This tool does that search automatically and shows the nearest passing color lighter and darker.
What contrast ratio do I need?
WCAG 2 AA requires 4.5:1 for normal text and 3:1 for large text (≥18.66px bold or ≥24px). AAA requires 7:1 (4.5:1 for large). Pick the target and the tool finds a color that meets it.
Will the fixed color still match my brand?
It preserves the hue and only changes lightness, so it stays the same "color" — just light or dark enough to be legible. That is usually the most brand-faithful accessible option.
Why adjust the text instead of the background?
Either works; this tool adjusts the foreground because text color is usually the freer choice. You can also swap the two inputs to hold the text and move the background.
Is this WCAG 2 or WCAG 3 (APCA)?
This uses the current WCAG 2 contrast-ratio method, which is the legally referenced standard. For the emerging WCAG 3 method, see the APCA contrast checker.