Skip to the tool
a11yspot logo

Accessible Color Studio @ A11ySpot  //  color.A11ySpot.com

Start with the colors you love. Assign them to your page, text and buttons — then get shades that pass WCAG 2.2 AA or AAA without losing your palette's character.

Build your palette

Choose between 1 and 8 colors. Click a swatch to pick, or type a hex code.

  • Used for page background, cards & panels, button label

  • Used for body text, secondary text

  • Used for headings, button fill

  • Not used yet

  • Used for links

  • Used for field borders

6 of 8 colors.

Assign colors to elements

Switch on the elements your design uses, then pick a palette color for each.

  • BackgroundAlways on

    The main canvas behind everything.

  • Background

    Surfaces that sit on top of the page.

  • Text

    Large titles (24px+, or 18.5px+ bold).

  • TextAlways on

    Paragraphs and everyday reading text.

  • Text

    Captions, hints, dates and metadata.

  • Text

    Inline links within text.

  • Control

    The solid color of primary buttons.

  • Text

    Text written on top of buttons.

  • Control

    Outlines that show where inputs are.

Accessibility review

Every text and control combination, checked against WCAG AA and AAA.

Fix the whole palette

Keeps your backgrounds and each color's hue, and nudges lightness only as much as needed.

Normal text needs 4.5:1 (AA) or 7:1 (AAA). Headings need 3:1 or 4.5:1. Buttons and field borders need 3:1. Your work is saved in this browser.

Pass AA
8/10Needs work
Pass AAA
4/8Needs work
Lowest contrast
2.25:1Needs work

  • Body text on page background

    Charcoal on White · Normal text (needs 4.5:1, AAA 7:1)

    15.09:1AA passAAA pass

  • Headings on page background

    Blue on White · Large text (needs 3:1, AAA 4.5:1)

    3.88:1AA passAAA fail

  • Secondary text on page background

    Charcoal on White · Normal text (needs 4.5:1, AAA 7:1)

    15.09:1AA passAAA pass

  • Links on page background

    Purple on White · Normal text (needs 4.5:1, AAA 7:1)

    6.40:1AA passAAA fail

  • Body text on cards & panels

    Charcoal on White · Normal text (needs 4.5:1, AAA 7:1)

    15.09:1AA passAAA pass

  • Headings on cards & panels

    Blue on White · Large text (needs 3:1, AAA 4.5:1)

    3.88:1AA passAAA fail

  • Secondary text on cards & panels

    Charcoal on White · Normal text (needs 4.5:1, AAA 7:1)

    15.09:1AA passAAA pass

  • Button label on button fill

    White on Blue · Normal text (needs 4.5:1, AAA 7:1)

    3.88:1AA failAAA fail

  • Button fill on page background

    Blue on White · Shape / control (needs 3:1)

    3.88:1AA passAAA n/a

  • Field borders on cards & panels

    Green on White · Shape / control (needs 3:1)

    2.25:1AA failAAA n/a