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 detectable color-contrast issues on the storefront pages it crawls. In the app, supported merchant-approved fixes can update matched theme colors while saving the original and checking the result.
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 evaluates one contrast pairing. AccessComply runs WCAG-mapped automated checks across the storefront pages it can crawl, but automation cannot evaluate every success criterion or establish conformance. App plans include supported merchant-approved source-code fixes, with hands-on review still required.