Colour Contrast Matrix
Every colour in a palette tested against every other colour. The grid shows the real WCAG 2.x contrast ratio for each foreground/background pair, the level it passes, a click-through preview, and a computed nearest colour that reaches your target ratio.
Palette
9 of 24 colours · 36 unordered pairsSummary
- 9 colours · 36 unordered pairs counted (N(N−1)/2 — the ratio is symmetric, so A on B and B on A are one pair; N(N−1) would be 72 ordered pairs).
- 12 of 36 pairs reach AA for normal text (≥ 4.5).
- Worst pair: Slate on Indigo at 1.01 — fails every level.
- Best pair: Ink on White at 18.01 — AAA normal and above.
- No duplicate colours.
Names normalised for CSS custom properties
- “Ink” → --colour-ink (spaces and punctuation are not valid in a custom property)
- “Slate” → --colour-slate (spaces and punctuation are not valid in a custom property)
- “Indigo” → --colour-indigo (spaces and punctuation are not valid in a custom property)
- “Violet” → --colour-violet (spaces and punctuation are not valid in a custom property)
- “Brand soft” → --colour-brand-soft (spaces and punctuation are not valid in a custom property)
- “Surface” → --colour-surface (spaces and punctuation are not valid in a custom property)
- “White” → --colour-white (spaces and punctuation are not valid in a custom property)
- “Success green” → --colour-success-green (spaces and punctuation are not valid in a custom property)
- “Alert red” → --colour-alert-red (spaces and punctuation are not valid in a custom property)
Matrix
Row = foreground, column = background. Click a cell for the preview and suggestions.Cell background: green ≥ 7 (AAA), pale green ≥ 4.5 (AA), indigo tint ≥ 3 (large text only), red < 3 (fails every level). The four dots are AA, AA+, AAA and AAA+ — filled means it passes. WCAG only: APCA (the WCAG 3 draft) uses a different model and is not approximated here.
| Foreground ↓ / Background → | Ink#141527 | Slate#5b6076 | Indigo#4f46e5 | Violet#8b5cf6 | Brand soft#eef0ff | Surface#f6f7fb | White#ffffff | Success g…#10b981 | Alert red#dc2626 |
|---|---|---|---|---|---|---|---|---|---|
| Ink#141527 | |||||||||
| Slate#5b6076 | |||||||||
| Indigo#4f46e5 | |||||||||
| Violet#8b5cf6 | |||||||||
| Brand soft#eef0ff | |||||||||
| Surface#f6f7fb | |||||||||
| White#ffffff | |||||||||
| Success green#10b981 | |||||||||
| Alert red#dc2626 |
Pair preview and nearest accessible colour
Ink on Slate · contrast 2.90 · fails every level
The WCAG ratio is symmetric — Ink on Slate and Slate on Ink are both 2.90 — but the reading experience is not: light text on a dark background reads heavier and needs more weight, while dark text on a light background is the more comfortable default.
Ink on Slate · 2.90
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox
- AA · normal text (≥ 4.5)fails
- AA · large text (≥ 24 px, or ≥ 18.66 px bold) (≥ 3)fails
- AAA · normal text (≥ 7)fails
- AAA · large text (≥ 4.5)fails
Slate on Ink · 2.90
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox
- AA · normal text (≥ 4.5)fails
- AA · large text (≥ 24 px, or ≥ 18.66 px bold) (≥ 3)fails
- AAA · normal text (≥ 7)fails
- AAA · large text (≥ 4.5)fails
Suggestions for this direction
The foreground colour (Ink) is adjusted against the fixed background (Slate). Each candidate keeps the hue and saturation where it can, or scales the raw RGB channels, and the ratio shown is measured from the final rounded hex.
- Lighten via RGB scaling#dcdcdf · ratio 4.54 · ΔL +75.3 · was #141527every channel mixed 85.2% towards white
- Lighten via HSL lightness#dddded · ratio 4.63 · ΔL +78.2 · was #141527hue and saturation kept (h 237°, s 32%), lightness 11.6% → 89.8%
Exports
The PNG is rasterised at ×2.00 on a white background (2× the on-screen geometry) and includes the swatches, labels, ratios and pass/fail dots.
:root {
/* Ink */
--colour-ink: #141527;
/* Slate */
--colour-slate: #5b6076;
/* Indigo */
--colour-indigo: #4f46e5;
/* Violet */
--colour-violet: #8b5cf6;
/* Brand soft */
--colour-brand-soft: #eef0ff;
/* Surface */
--colour-surface: #f6f7fb;
/* White */
--colour-white: #ffffff;
/* Success green */
--colour-success-green: #10b981;
/* Alert red */
--colour-alert-red: #dc2626;
}
Nothing leaves the page — the PNG, CSS and JSON are all built in the browser.
About this tool
This matrix computes the WCAG 2.x contrast ratio for every ordered pair in your palette from sRGB relative luminance, colours each cell by the level it reaches and shows a click-through preview at normal and large sizes. For failing pairs it searches — by HSL lightness and by straight RGB scaling — for the nearest colour that reaches your target ratio, and only falls back to black or white when nothing at the same hue and saturation works. The palette is capped at 24 colours, which is 576 cells, and the PNG export is clamped to 4096 px per side; everything is computed in your browser and nothing is uploaded.
- 100% free — no account needed
- Runs in your browser
- Nothing is uploaded
Frequently asked questions
Is Colour Contrast Matrix really free?
Yes. Colour Contrast Matrix is completely free on PureBrowser — every feature, with no account, no trial, and no credit card.
Does Colour Contrast Matrix upload my data?
No. Colour Contrast Matrix runs entirely inside your browser, so anything you type, paste, or open stays on your own device.
Do I need to sign up or install anything?
Neither. There is no account and nothing to download — open the page and Colour Contrast Matrix is ready to use on desktop or mobile.
Does Colour Contrast Matrix work offline?
Once the page has loaded, yes. All of the processing happens locally in your browser, so it keeps working without a connection.