Contrast Grid
Check WCAG contrast ratios across an entire colour palette — every foreground and background combination at a glance.
Palette
#000000
#ffffff
#2563eb
#dc2626
#f3f4f6
#374151
Grid
Rows = foreground, cols = background
#000000 | #ffffff | #2563eb | #dc2626 | #f3f4f6 | #374151 | |
|---|---|---|---|---|---|---|
#000000 | — | Aa 21.0 AAAAA | Aa 4.1 AAAAA | Aa 4.3 AAAAA | Aa 19.1 AAAAA | Aa 2.0 AAAAA |
#ffffff | Aa 21.0 AAAAA | — | Aa 5.2 AAAAA | Aa 4.8 AAAAA | Aa 1.1 AAAAA | Aa 10.3 AAAAA |
#2563eb | Aa 4.1 AAAAA | Aa 5.2 AAAAA | — | Aa 1.1 AAAAA | Aa 4.7 AAAAA | Aa 2.0 AAAAA |
#dc2626 | Aa 4.3 AAAAA | Aa 4.8 AAAAA | Aa 1.1 AAAAA | — | Aa 4.4 AAAAA | Aa 2.1 AAAAA |
#f3f4f6 | Aa 19.1 AAAAA | Aa 1.1 AAAAA | Aa 4.7 AAAAA | Aa 4.4 AAAAA | — | Aa 9.4 AAAAA |
#374151 | Aa 2.0 AAAAA | Aa 10.3 AAAAA | Aa 2.0 AAAAA | Aa 2.1 AAAAA | Aa 9.4 AAAAA | — |