Template · Color contrast

Contrast matrix Template

One row for each pair of colors in a palette: the WCAG 2 contrast ratio, and a pass or fail for normal text, large text and interface parts at AA and AAA. It comes filled with an example palette: replace the colors, and note where each passing pair is used.

Version
1.0
Updated
2026-10-07
Standard
WCAG 2.2
Format
CSV
Licence
CC0 1.0
The matrix .csv

Download

The files

Plain text files you can open anywhere.

CSV

The matrix

contrast-matrix.csv

Thirty rows: every ordered pair of the six example colors. Open it in a spreadsheet and change the colors; the ratios are for you to recompute with the contrast checker.

Format
Comma-separated values (RFC 4180)
Size
2,096 bytes
Contents
12 columns, 30 rows

Preview: the header and the first 2 rows

Foreground,Foreground color,Background,Background color,Contrast ratio,Normal text AA (4.5:1),Large text AA (3:1),Normal text AAA (7:1),Large text AAA (4.5:1),Non-text AA (3:1),Used for,Notes
Ink,#1C1917,Paper,#FFFFFF,17.48:1,Pass,Pass,Pass,Pass,Pass,,
Ink,#1C1917,Brand,#1D4ED8,2.60:1,Fail,Fail,Fail,Fail,Fail,,

The columns, in order

  • Foreground
  • Foreground color
  • Background
  • Background color
  • Contrast ratio
  • Normal text AA (4.5:1)
  • Large text AA (3:1)
  • Normal text AAA (7:1)
  • Large text AAA (4.5:1)
  • Non-text AA (3:1)
  • Used for
  • Notes
Download the file

Licence: CC0 1.0 Universal, a public domain dedication. Copy, change and use these files for anything, including paid work, without asking or giving credit. The files are plain ASCII text in English, so they open the same everywhere.

What goes in it

What the matrix records

Contrast depends on the pair, not on one color, so the matrix lists pairs: the color of the text or the part, and the color behind it.

  1. The pair. Each color by name and hex value, foreground first. A pair is listed both ways, because text can sit on either.
  2. The ratio. From 1:1 to 21:1, by the WCAG 2 formula, rounded down to two places so a pair just under a threshold never looks like a pass.
  3. Text at AA and AAA. Normal text needs 4.5:1 for AA and 7:1 for AAA; large text, at least 24px or 18.66px bold, needs 3:1 and 4.5:1.
  4. Interface parts. Borders of controls, focus indicators, icons and chart lines need 3:1 against what is next to them.
  5. Where it is used. Note the places each passing pair appears, so a designer can see which pairs the product relies on.

Column by column

Columns of the matrix

Columns of the matrix (table)
ColumnWhat to write
ForegroundThe name of the text or part's color.
Foreground colorIts hex value, such as #1C1917.
BackgroundThe name of the color behind it.
Background colorIts hex value.
Contrast ratioThe WCAG 2 ratio, rounded down to two places, such as 4.49:1.
Normal text AA (4.5:1)Pass or Fail for body text at Level AA (1.4.3).
Large text AA (3:1)Pass or Fail for large text at Level AA (1.4.3).
Normal text AAA (7:1)Pass or Fail for body text at Level AAA (1.4.6).
Large text AAA (4.5:1)Pass or Fail for large text at Level AAA (1.4.6).
Non-text AA (3:1)Pass or Fail for interface parts and graphics (1.4.11).
Used forWhere the pair appears: body text, buttons, links, focus rings, charts.
NotesAnything a designer should know, such as large text only.

Example

The example palette, pair by pair

Text color down the side, background across the top: each cell is the ratio and the best it passes for normal text.

The example palette, pair by pair (table)
Text on Ink Paper Brand Brand tint Muted Danger
Ink-17.48:1 AAA2.60:1 Fail14.33:1 AAA3.64:1 Large text only2.70:1 Fail
Paper17.48:1 AAA-6.70:1 AA1.22:1 Fail4.79:1 AA6.47:1 AA
Brand2.60:1 Fail6.70:1 AA-5.49:1 AA1.39:1 Fail1.03:1 Fail
Brand tint14.33:1 AAA1.22:1 Fail5.49:1 AA-3.93:1 Large text only5.30:1 AA
Muted3.64:1 Large text only4.79:1 AA1.39:1 Fail3.93:1 Large text only-1.34:1 Fail
Danger2.70:1 Fail6.47:1 AA1.03:1 Fail5.30:1 AA1.34:1 Fail-

Large text only means 3:1 to 4.5:1: enough for text at least 24px, or 18.66px bold, and for interface parts, but not for body text.

How to use it

Check a palette before it ships

  1. List the colors. Every color text or a part can be drawn in, and every color it can sit on, including hover and disabled states.
  2. Measure each pair. Use the contrast checker, or the formula in WCAG, and round down. Open the contrast checker
  3. Mark where each pair is used. A failing pair is fine if nothing uses it for text or a needed part; a passing pair used for the wrong size is not.
  4. Share it with the design system. Keep the matrix beside the color tokens, and update it when a token changes.

Know its limits

A ratio is not the whole story

The ratio is WCAG 2's measure, and the one its success criteria use. Thin or small text can still be hard to read at a passing ratio, and color must never be the only way information is shown (1.4.1).

APCA, a newer contrast model, gives different numbers. It is not part of WCAG 2, so a WCAG audit uses these ratios.

Next

Related templates and tools

Sources

Where this comes from

Written by Auric Artisan. Not yet reviewed by an independent accessibility specialist.

Suggest a change to the template