Colour Contrast Matrix
Compare WCAG contrast ratios across up to 8 colours in a matrix — filter by AA, AAA, and UI component pass levels.
| Text / Background |
|---|
Building a palette? Extract colours with Palette from Logo or Palette from Image, then paste the hex values here.
How it works
Add up to 8 colours and the matrix shows every text-on-background combination with its WCAG 2.1 contrast ratio. Rows are text colours, columns are backgrounds, and each cell renders the pair so you can judge readability at a glance.
Use the filter to show only combinations that pass a specific WCAG level — AA normal text, AA large text, AAA normal, AAA large, or UI components.
Tips
- Share your matrix with URL parameters:
?colors=111827,374151,6d28d9,ffffff - Need a detailed check for one pair? Try the Contrast Checker.
- Browse brand colour palettes for inspiration.