Colour Contrast Matrix Generator

Identify which colours in your palette are high contrast with each other to help create accessible designs and visualizations.

This tool generates a matrix of colour contrast for the provided colours as defined by WCAG 2.1. Powered by chroma.js.

Mainly intended to help with categorical palettes with adjacent areas, this is also useful any time you'd like to check the contrast of multiple colours at once. For help with adapting your colours to a sequential or diverging palette, check out Chroma.js Color Palette Helper.

Generate Contrast Matrix

Sample Charts