Color Contrast Matrix
Generate a contrast matrix for multiple colors to check WCAG AA and AAA compliance.
Click a cell to copy its contrast ratio.
#000000 | #ffffff | #ff0000 | #00ff00 | #0000ff | #ffff00 | #ff00ff | #00ffff | |
|---|---|---|---|---|---|---|---|---|
#000000 | — | 21.0 | 5.3 | 15.3 | 2.4 | 19.6 | 6.7 | 16.7 |
#ffffff | 21.0 | — | 4.0 | 1.4 | 8.6 | 1.1 | 3.1 | 1.3 |
#ff0000 | 5.3 | 4.0 | — | 2.9 | 2.1 | 3.7 | 1.3 | 3.2 |
#00ff00 | 15.3 | 1.4 | 2.9 | — | 6.3 | 1.3 | 2.3 | 1.1 |
#0000ff | 2.4 | 8.6 | 2.1 | 6.3 | — | 8.0 | 2.7 | 6.9 |
#ffff00 | 19.6 | 1.1 | 3.7 | 1.3 | 8.0 | — | 2.9 | 1.2 |
#ff00ff | 6.7 | 3.1 | 1.3 | 2.3 | 2.7 | 2.9 | — | 2.5 |
#00ffff | 16.7 | 1.3 | 3.2 | 1.1 | 6.9 | 1.2 | 2.5 | — |
Remove Colors
Checking one color pair at a time works fine for a single decision, but a full brand palette, six or eight colors mixed and matched across a design system, has every possible pair worth knowing about in advance, which text colors are actually safe on which backgrounds, before a single component gets built using a combination nobody checked. This tool generates a full contrast matrix for a set of colors, checking every color against every other in the set at once and marking which pairings pass WCAG AA or AAA, rather than testing pairs one at a time as they come up.
See moreSee less about the Color Contrast Matrix
Useful for planning a color system where every safe text-and-background combination is known upfront, auditing an entire brand palette's usable pairings in one pass, or catching a pair that looks fine together visually but actually fails contrast requirements before it ends up in a live component.
Key features
- Clean interface
- Fast processing
- No signup required
- Works offline