Skip to the tool

WCAG 2.2 contrast workbench

a11yspot logo

Accessible Color Studio

Start with the colors you love. Assign them to your page, text and buttons — then get shades that pass 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, button label

  • Used for body text

  • Used for headings, links, button fill

  • Used for secondary text, field borders

  • Used for cards & panels

5 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.

Pass AA
2/10Needs work
Pass AAA
2/8Needs work
Lowest contrast
1.85:1Needs work

  • Body text on page background

    Ink on Parchment · Normal text (needs 4.5:1, AAA 7:1)

    12.64:1AA passAAA pass

  • Headings on page background

    Terracotta on Parchment · Large text (needs 3:1, AAA 4.5:1)

    2.86:1AA failAAA fail

  • Secondary text on page background

    Sage on Parchment · Normal text (needs 4.5:1, AAA 7:1)

    2.24:1AA failAAA fail

  • Links on page background

    Terracotta on Parchment · Normal text (needs 4.5:1, AAA 7:1)

    2.86:1AA failAAA fail

  • Body text on cards & panels

    Ink on Sand · Normal text (needs 4.5:1, AAA 7:1)

    10.43:1AA passAAA pass

  • Headings on cards & panels

    Terracotta on Sand · Large text (needs 3:1, AAA 4.5:1)

    2.36:1AA failAAA fail

  • Secondary text on cards & panels

    Sage on Sand · Normal text (needs 4.5:1, AAA 7:1)

    1.85:1AA failAAA fail

  • Button label on button fill

    Parchment on Terracotta · Normal text (needs 4.5:1, AAA 7:1)

    2.86:1AA failAAA fail

  • Button fill on page background

    Terracotta on Parchment · Shape / control (needs 3:1)

    2.86:1AA failAAA n/a

  • Field borders on cards & panels

    Sage on Sand · Shape / control (needs 3:1)

    1.85:1AA failAAA n/a