Color contrast matrix
Enter up to 12 colors, one per line. The table shows the contrast ratio of each color as text on each other color as background, graded for WCAG 2.
Runs in your browser: nothing you enter is sent anywhere.
How to use it
- Put one color per line (commas also work). Use between 2 and 12 colors.
- Read the table. Rows are the text color and columns are the background.
- Each cell shows the pair as “Aa”, the ratio and the grade.
ratio = (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter luminance. Black on white is 21:1; identical colors are 1:1. The summary line counts each unordered pair once.
| Grade |
Ratio |
| AAA |
7:1 or more |
| AA |
4.5:1 or more |
| Large only |
3:1 or more |
| Fail |
below 3:1 |
Example
Black, white and #777777: black on white is 21:1, black on grey is 4.69:1, and white on grey is 4.48:1. The last one misses AA for normal text by a hair.
Tips
- Use the matrix to decide which colors of a palette may be text on which backgrounds before building components.
- Diagonal cells are always 1:1 and can be ignored.
- For a single detailed check with a live preview, use the contrast checker.
Frequently asked questions
How is the ratio calculated?
Each color gets a relative luminance from its linearised sRGB channels (0.2126 R + 0.7152 G + 0.0722 B). The ratio is (lighter + 0.05) divided by (darker + 0.05), from 1:1 to 21:1.
Why is the matrix symmetric in numbers?
The WCAG 2 ratio does not care which color is the text, so row A on column B equals row B on column A. The preview "Aa" shows the actual pair, which helps you judge it by eye.
What do the grades mean?
AAA needs 7:1, AA needs 4.5:1 for normal text, and 3:1 is enough for large text and for interface parts such as icons and borders. The grades use the exact ratio, never the rounded one.
Is a passing ratio enough for accessibility?
No. WCAG 2 contrast is a minimum for text legibility. It does not cover colour-blind users or thin fonts, so do not rely on colour alone to convey meaning.
Can I enter colors other than HEX?
Yes: rgb(), hsl(), oklch(), CSS color names and 3 or 6 digit HEX. Separate colors with new lines or commas.