Digital Hub Lab

Accessible Colour-Palette Builder

Build a five-colour palette and compare every pair against common WCAG text-contrast thresholds.

Accessibility · Web & DesignLive

Build a small colour palette and compare every pair against practical text-contrast thresholds. Use the matrix to identify safe roles for backgrounds, text and accents.

Preparing the interactive tool…

How to use this tool

  • Choose or enter five palette colours.
  • Review the suggested light or dark text for each swatch.
  • Compare every pair in the contrast matrix.
  • Assign colours to interface roles and test them in their real context.

Understanding the result

Contrast requirements depend on text size and purpose. A pair that works for large text may still fail for normal text, and colour must not be the only way information is communicated.

Practical guidance

Start with strong text and background combinations, then use lower-contrast colours for non-essential decoration. Test focus states, links, errors and disabled controls separately.