Curbcut Free Accessibility Scan

Free Accessibility Tool

Accessible Color Palette Generator

Build a brand palette where every text/background pairing already passes WCAG contrast — no guesswork, no after-the-fact fixes.

  • Verified ratios
  • Keeps your hue
  • AA + AAA
  • Click to copy
Target

Each swatch shows its contrast ratio against your background. ✓ = safe for body text at the chosen level; 3:1 = large-text / UI only. Click any swatch to copy its hex.

    Suggested accessible text color

    How to use the Palette Generator

    1. Pick your brand color and background. Enter your base brand color and the background it will sit on.
    2. Choose your target level. Select AA (4.5:1) or AAA (7:1) for normal text.
    3. Read the tonal scale. Each generated shade shows its contrast ratio against the background; ✓ marks shades that are safe for body text.
    4. Copy the shades you need. Click any swatch to copy its hex, and use the suggested accessible text color when your brand color is too light.

    How to build a palette that passes

    Pick your brand color and the background it will sit on. The tool generates a tonal scale — the same hue at ten lightness steps — and measures each against the background using the exact WCAG formula. Anywhere you see a ✓, that shade is safe for normal body text at your chosen level.

    A practical workflow: use a mid shade that passes AA for body text, keep your original brand color for large headings and buttons (which only need 3:1), and reserve the darkest steps for text on tinted backgrounds. Then confirm the final pairings in the contrast checker.

    Designing for accessibility from the start

    Fixing contrast after launch means hunting down every component that used the wrong shade. Choosing a contrast-safe palette up front is far cheaper — and it prevents the most-cited issue in ADA website lawsuits. If your brand color simply can't pass as text, that's useful to know now: pair it with an accessible neutral for copy and let the brand color lead in larger, non-text roles.

    More free accessibility tools

    Frequently asked questions

    How does this make a palette 'accessible'?

    It takes your base brand color and generates a tonal scale (lighter to darker), then measures each shade's WCAG contrast ratio against the background you choose. Shades that meet AA (4.5:1 for text) are marked as safe for body text, so you pick from verified options instead of guessing.

    Can I keep my exact brand color?

    Often your exact brand color is fine for large headings, buttons, or graphics (which only need 3:1) but too light for body text. The scale lets you keep the hue and choose a slightly darker shade for small text — your brand stays recognizable and your text stays readable.

    What background should I test against?

    Test text colors against the background they'll actually sit on — usually white or your page background — and test light text against your darkest surface. If you support dark mode, check both, because a pair that passes on white can fail on dark.

    Does an accessible palette make my site compliant?

    It removes the most common WCAG failure (low contrast), but compliance also depends on keyboard access, semantics, focus, and more. Use the contrast checker to verify individual pairs, then get a full audit.

    A scan is the start, not the finish

    Automated tools catch only 30–40% of WCAG issues. Get a free human-led scan and a real remediation plan that makes your site defensibly compliant.

    Get your free accessibility scan See our audit