Digital Hub Lab
Accessible Colour-Palette Builder
Build a five-colour palette and compare every pair against common WCAG text-contrast thresholds.
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…
This interactive tool requires JavaScript. Enable JavaScript and reload the page to use it.
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.
