BYTETOOLS

Color Contrast Grid

Paste a palette and get every foreground-on-background contrast ratio in one matrix, colour-coded by WCAG pass level and exportable as CSV or Markdown.

8
Colours
18 / 56
Pairs at 4.5:1
32%
Pass rate

Every pair, scored against 4.5:1

FG \ BG#ffffff#f8fafc#e2e8f0#94a3b8#475569#0f172a#3b82f6#ef4444
#ffffff—Aa1.0Aa1.2Aa2.6Aa7.6Aa17.9Aa3.7Aa3.8
#f8fafcAa1.0—Aa1.2Aa2.5Aa7.2Aa17.1Aa3.5Aa3.6
#e2e8f0Aa1.2Aa1.2—Aa2.1Aa6.1Aa14.5Aa3.0Aa3.1
#94a3b8Aa2.6Aa2.5Aa2.1—Aa3.0Aa7.0Aa1.4Aa1.5
#475569Aa7.6Aa7.2Aa6.1Aa3.0—Aa2.4Aa2.1Aa2.0
#0f172aAa17.9Aa17.1Aa14.5Aa7.0Aa2.4—Aa4.9Aa4.7
#3b82f6Aa3.7Aa3.5Aa3.0Aa1.4Aa2.1Aa4.9—Aa1.0
#ef4444Aa3.8Aa3.6Aa3.1Aa1.5Aa2.0Aa4.7Aa1.0—

Each cell renders the row colour as text on the column colour as background. A green border means the pair reaches 4.5:1; faded cells fall short.

Export for your design-system docs

What is the Color Contrast Grid?

Checking colours in pairs is how contrast bugs slip through — you verify the combinations you thought of and ship the ones you did not.

  • Every foreground-and-background pair scored in one matrix
  • Live text sample rendered inside each cell
  • Switch between AA, AA large, AAA and 3:1 UI thresholds
  • Pass-rate summary across the whole palette
  • CSV and Markdown export for design-system docs
  • Reads hex codes out of pasted CSS automatically

How to use the Color Contrast Grid

  1. 1

    Paste your palette into the text area — one hex per line, or any CSS containing hex values.

  2. 2

    Choose which conformance level to highlight: AA normal, AA large, AAA or non-text UI.

  3. 3

    Read the matrix; each cell shows sample text on that background with its ratio.

  4. 4

    Download or copy the grid as CSV or Markdown for your documentation.

About the Color Contrast Grid

Checking colours in pairs is how contrast bugs slip through — you verify the combinations you thought of and ship the ones you did not. This tool takes a whole palette and scores every possible pairing at once, so the gaps are visible before anyone builds a component with them.

Paste hex values one per line, or drop in a block of CSS custom properties and the hex codes get pulled out automatically. Each cell renders the row colour as text on the column colour as a background, with its WCAG 2.1 ratio underneath and a green border when it clears the level you selected.

Switch between AA normal text, AA large text, AAA and the 3:1 non-text UI threshold to see how the same palette performs against each. Export the matrix as CSV or Markdown to paste straight into your design-system documentation. All of it runs in your browser with nothing uploaded.

Frequently asked questions

How many colors can I put in the grid?

Up to 24. Beyond that the matrix stops being readable on any screen, so extra colours are ignored and the tool tells you it truncated. If you have a bigger palette, split it into the neutrals and the accents and run each separately.

What contrast ratio does WCAG require?

AA needs 4.5:1 for normal text and 3:1 for large text, which means 18.66px bold or 24px regular. It also needs 3:1 for user-interface components and meaningful graphics. AAA raises normal text to 7:1 and large text to 4.5:1.

Why is the grid symmetric?

Because the WCAG 2.1 formula divides the lighter relative luminance by the darker one, so swapping foreground and background gives the same ratio. If you need a polarity-aware score, use an APCA checker instead — APCA deliberately treats the two directions differently.

Does a passing contrast ratio guarantee readability?

No. The ratio ignores font size below the large-text cutoff, font weight, letter spacing and the amount of surrounding colour. Treat a pass as the floor rather than the goal, and always look at the rendered sample as well as the number.

Can I use this for a design system audit?

That is exactly what the export is for. Drop your token values in, pick your target level, and paste the Markdown table into your documentation so every contributor can see which pairings are approved without recalculating anything.

Related tools