Skip to content
ToolQivo

Contrast Grid

Score every colour in a palette against every other one.

Color Tools Reviews Free · no sign-up

Your palette

CSV 
The matrix appears here as CSV

Quick Tool Overview

The Contrast Grid scores every colour in a palette against every other one and lays the result out as a matrix, with each cell drawn as the real pair — so the combinations that fail are visible rather than hypothetical.

What it does
Scores every pair in a palette for contrast
You give it
A list of colours, one per line
You get back
A WCAG matrix, filterable and exportable
Best for
Design system reviews and accessibility reports
Color Tools Free, unlimited use No sign-up Runs in your browser

About the Contrast Grid

Checking colours in pairs does not scale. A palette of ten colours has forty-five possible pairings, and the ones that fail are rarely the ones anyone thinks to test. This tool scores all of them at once and lays the result out as a matrix.

Every cell shows the real contrast ratio, drawn as the actual foreground on the actual background so you can read it rather than take the number on trust, and labelled with the highest WCAG level it reaches — AAA, AA, AA for large text only, or a fail. Filtering to one level at a time turns the grid into a shortlist of combinations you are allowed to use.

Paste HEX codes, CSS custom properties, a Tailwind config fragment or a list of "Name: #hex" lines; anything that is not a colour is skipped rather than treated as an error. The result exports as CSV for a design review or an accessibility report.

Key features of the Contrast Grid

Every pair at once

Ten colours is forty-five pairings. Checking them by hand is how the failing ones get missed.

Cells you can read

Each cell is the actual foreground on the actual background, not a coloured dot with a number beside it.

Filter by level

Show only the pairs that reach AA or AAA, which turns the grid into a list of combinations you may use.

Keeps your names

A "Primary: #4f46e5" line puts your own label on the axis instead of a hex code.

CSV export

Download the whole matrix to attach to a design review or an audit.

How to use the Contrast Grid

  1. 1

    Paste your palette

    One colour per line. A "Name: #hex" line keeps your own labels on the axes.

  2. 2

    Read the matrix

    Rows are foregrounds, columns are backgrounds, and each cell is that pair rendered for real.

  3. 3

    Filter to a level

    Show only pairs that reach AA, or AAA, to see what is genuinely usable.

  4. 4

    Export the result

    Download the grid as CSV to attach to a review or a report.

Frequently asked questions

Up to forty, which is 1,600 cells — past that the grid stops being readable on any screen. A design system palette is usually well within that once you drop the shades you never put text on.

Reviews of the Contrast Grid

What people who use the Contrast Grid think of it. Reviews come from visitors and are posted as written.

No ratings yet

Yours would be the first.

  • 5 0 reviews rated 5 stars
  • 4 0 reviews rated 4 stars
  • 3 0 reviews rated 3 stars
  • 2 0 reviews rated 2 stars
  • 1 0 reviews rated 1 star

Write a review

Used this tool? Your rating helps the next person decide.

Your rating

Plain text only — links, email addresses and HTML are not accepted. Your name and review are shown publicly; nothing else is collected. See the privacy policy.

0 reviews

Newest first

No reviews yet

Be the first to rate the Contrast Grid. It takes half a minute and no account.

Write the first review

More color tools