Contrast Matrix
Enter a color and get its full scale tested against itself — every shade as text on every shade as background, scored with both WCAG 2.1 and APCA. Pick any cell to see the pair rendered as real text.
The full 50–950 scale is tested against itself.
Ratio from 1:1 to 21:1. 4.5 passes AA for body text, 7 passes AAA.
Matrix
Rows are text, columns are background
| Text ╲ Bg | 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950 |
|---|---|---|---|---|---|---|---|---|---|---|---|
| 50 | |||||||||||
| 100 | |||||||||||
| 200 | |||||||||||
| 300 | |||||||||||
| 400 | |||||||||||
| 500 | |||||||||||
| 600 | |||||||||||
| 700 | |||||||||||
| 800 | |||||||||||
| 900 | |||||||||||
| 950 |
- AAA — 7:1 and above
- AA — 4.5:1, body text
- AA Large — 3:1, 18pt+
- Fails at every size
Sample
Pick any cell in the matrix to see that pair rendered as real text.
Frequently asked
What is the difference between WCAG 2.1 and APCA?
WCAG 2.1 gives a ratio between 1:1 and 21:1 and treats both directions identically — dark text on light scores the same as the reverse. APCA returns a value called Lc that accounts for polarity and how human vision actually works, which is why it is stricter about light text on dark backgrounds.
Which one should I follow?
WCAG 2.1 is what accessibility audits and most legal requirements still use, so treat it as the floor. APCA is a better predictor of real readability, especially in dark mode — use it when the two disagree and you have room to choose.
Why is APCA sometimes negative?
The sign carries the polarity. Positive means dark text on a light background, negative means light text on a dark one. Only the absolute value matters when judging readability.
What do the thresholds mean?
For WCAG: 4.5:1 passes AA for body text, 7:1 passes AAA, and 3:1 passes only for large text at 18pt or 14pt bold. For APCA: an absolute Lc of 75 is comfortable for body text, 60 works for large text, and 30 is the minimum for anything meaningful, including icons.
The diagonal is greyed out — why?
Those cells put a shade on itself, which always gives a contrast of 1:1. They are shown so the grid stays aligned, but there is nothing to evaluate.