Accessible Colour Palette Designer

This was designed to assist web developers and designers in creating accessible colour palettes. To use the tool:


  1. Select colours for your palette using the hex input fields and/or colour pickers below.
  2. Colour contrasts between each colour in your palette will be generated. Each colour will be included as both a background colour and a text colour.
  3. To exclude colours from the combinations, use the exclude as background/text checkboxes accordingly. To exclude a colour completely, check both exclude as background and exclude as text.
  4. Black and white backgrounds and/or text can also be included in the combinations by utilising their respective checkboxes.
  5. For an ideal colour palette, select combinations from the AAA (Enhanced Contrast) category. Avoid using low contrast colours (these have been hidden by default).

For more information, see Web Content Accessibility Guidelines (WCAG). Feedback via GitHub is welcome!

Colour Palette

Colour Combinations

AAA (Enhanced Contrast) Normal text >= 7:1; Large text >= 4.5:1

AA (Minimum Contrast) Normal text >= 4.5:1; Large text >= 3:1

Low Contrast Contrast ratio < 3:1