Free tool
Accessible color palette generator
Paste your brand color. We derive a 5-color palette where every pairing meets WCAG 2.1 AA contrast — preserving hue and saturation, adjusting only lightness.
Sample copy
on this color
Brand on white
Body text, links, CTA labels on light backgrounds
#c25205on #ffffff4.66:1
Sample copy
on this color
Brand on dark
Body text, links, CTA labels on dark backgrounds
#f97316on #0a0a0a7.06:1
Sample copy
on this color
Muted text on white
Timestamps, captions, deemphasized labels
#c25205on #ffffff4.66:1
Sample copy
on this color
Inverse on brand fill
Button label on a brand-colored button
#333333on #f973164.51:1
Sample copy
on this color
Brand AAA on white
Body text where AAA conformance is targeted
#953f04on #ffffff7.02:1
How the derivation works
The generator converts your brand color to HSL, then walks the lightness axis (1% steps) toward whichever direction (darker or lighter) reaches the target contrast ratio against the chosen background first. Hue and saturation are preserved, so the derived shade still feels like your brand color — just darker or lighter enough to clear WCAG.
Targets: 4.5:1 for AA body text, 7:1 for AAA body text. The math comes directly from WCAG 2.1 SC 1.4.3 (Contrast Minimum).
Find every contrast failure on your live storefront
The free AccessComply scanner checks color contrast on every rendered element across your store. Paid plans rewrite the failing colors as CSS custom-property overrides at the theme source.
Scan my Shopify store freeFAQ
What does "WCAG-compliant palette" mean?
A WCAG-compliant palette pairs every text color with a background where the luminance contrast ratio meets WCAG 2.1 SC 1.4.3 — at least 4.5:1 for body text or 3:1 for large text (≥18pt or ≥14pt bold). AAA conformance requires 7:1 for body text.
Will my brand color survive the derivation?
The generator preserves your brand color's hue and saturation in HSL and walks lightness toward whichever direction (darker or lighter) reaches the target contrast first. The result feels brand-aligned but contrast-safe.
Where do I use each role?
Brand-on-white is the default for body copy and most UI text on light backgrounds. Brand-on-dark mirrors the same role for dark mode. Brand-as-fill is for backgrounds (buttons, badges) where the foreground text uses the contrast-safe lighter or darker text variant. Muted-text is the deemphasized prose color (timestamps, captions) — still passing AA on the same background.
Does this replace a full Shopify theme audit?
No. This tool fixes one criterion (1.4.3 Contrast) for one input color. AccessComply's free Shopify scan checks all 50+ WCAG 2.1 + 2.2 AA criteria across every page of your storefront and applies fixes at the source-code level on paid plans.