Örnek Kahve Co. contrast matrix — after
FICTIONAL EXAMPLE BRAND. WCAG 2.x contrast ratio for every text/background pairing of the accessible (light-mode) palette. APCA Lc (APCA-W3 0.1.9) is informative only and is not a WCAG 2.2 requirement. Prepared by Ali Karabüyük.
After — accessible roles (light mode)45 colour pairs: 17 pass AA normal text (4.5:1) · 21 pass AA large/UI (3:1) · 7 pass AAA (7:1)| text ↓ / background → | White#FFFFFF | Cream#FFF8F0 | Orange#AC5D00 | Teal#006D65 | Yellow#FFD166 | Grey/Muted#846C60 | Espresso/Text#3E312A | Red/Error#911B12 | Green/Success#007F76 | Focus#00544E |
|---|
| White#FFFFFF | —same colour | 1.05Fail | 4.86AA | 6.22AA | 1.44Fail | 4.89AA | 12.52AAA | 8.86AAA | 4.89AA | 8.83AAA |
|---|
| Cream#FFF8F0 | 1.05Fail | —same colour | 4.62AA | 5.91AA | 1.37Fail | 4.64AA | 11.88AAA | 8.41AAA | 4.64AA | 8.38AAA |
|---|
| Orange#AC5D00 | 4.86AA | 4.62AA | —same colour | 1.28Fail | 3.373+ | 1.01Fail | 2.58Fail | 1.82Fail | 1.01Fail | 1.82Fail |
|---|
| Teal#006D65 | 6.22AA | 5.91AA | 1.28Fail | —same colour | 4.313+ | 1.27Fail | 2.01Fail | 1.42Fail | 1.27Fail | 1.42Fail |
|---|
| Yellow#FFD166 | 1.44Fail | 1.37Fail | 3.373+ | 4.313+ | —same colour | 3.393+ | 8.68AAA | 6.15AA | 3.393+ | 6.12AA |
|---|
| Grey/Muted#846C60 | 4.89AA | 4.64AA | 1.01Fail | 1.27Fail | 3.393+ | —same colour | 2.56Fail | 1.81Fail | 1.00Fail | 1.81Fail |
|---|
| Espresso/Text#3E312A | 12.52AAA | 11.88AAA | 2.58Fail | 2.01Fail | 8.68AAA | 2.56Fail | —same colour | 1.41Fail | 2.56Fail | 1.42Fail |
|---|
| Red/Error#911B12 | 8.86AAA | 8.41AAA | 1.82Fail | 1.42Fail | 6.15AA | 1.81Fail | 1.41Fail | —same colour | 1.81Fail | 1.00Fail |
|---|
| Green/Success#007F76 | 4.89AA | 4.64AA | 1.01Fail | 1.27Fail | 3.393+ | 1.00Fail | 2.56Fail | 1.81Fail | —same colour | 1.81Fail |
|---|
| Focus#00544E | 8.83AAA | 8.38AAA | 1.82Fail | 1.42Fail | 6.12AA | 1.81Fail | 1.42Fail | 1.00Fail | 1.81Fail | —same colour |
|---|
All pairings
Every ordered pairing with pass/fail per threshold| Text | Background | WCAG ratio | AA normal 4.5 | AA large / UI 3.0 | AAA 7.0 | APCA Lc |
|---|
White #FFFFFF | Cream #FFF8F0 | 1.05:1 | fail | fail | fail | 0.0 |
White #FFFFFF | Orange #AC5D00 | 4.86:1 | pass | pass | fail | -78.6 |
White #FFFFFF | Teal #006D65 | 6.22:1 | pass | pass | fail | -85.6 |
White #FFFFFF | Yellow #FFD166 | 1.44:1 | fail | fail | fail | -23.9 |
White #FFFFFF | Grey/Muted #846C60 | 4.89:1 | pass | pass | fail | -79.3 |
White #FFFFFF | Espresso/Text #3E312A | 12.52:1 | pass | pass | pass | -101.8 |
White #FFFFFF | Red/Error #911B12 | 8.86:1 | pass | pass | pass | -93.3 |
White #FFFFFF | Green/Success #007F76 | 4.89:1 | pass | pass | fail | -78.7 |
White #FFFFFF | Focus #00544E | 8.83:1 | pass | pass | pass | -94.2 |
Cream #FFF8F0 | White #FFFFFF | 1.05:1 | fail | fail | fail | 0.0 |
Cream #FFF8F0 | Orange #AC5D00 | 4.62:1 | pass | pass | fail | -74.6 |
Cream #FFF8F0 | Teal #006D65 | 5.91:1 | pass | pass | fail | -81.6 |
Cream #FFF8F0 | Yellow #FFD166 | 1.37:1 | fail | fail | fail | -19.9 |
Cream #FFF8F0 | Grey/Muted #846C60 | 4.64:1 | pass | pass | fail | -75.3 |
Cream #FFF8F0 | Espresso/Text #3E312A | 11.88:1 | pass | pass | pass | -97.8 |
Cream #FFF8F0 | Red/Error #911B12 | 8.41:1 | pass | pass | pass | -89.3 |
Cream #FFF8F0 | Green/Success #007F76 | 4.64:1 | pass | pass | fail | -74.7 |
Cream #FFF8F0 | Focus #00544E | 8.38:1 | pass | pass | pass | -90.2 |
Orange #AC5D00 | White #FFFFFF | 4.86:1 | pass | pass | fail | 73.2 |
Orange #AC5D00 | Cream #FFF8F0 | 4.62:1 | pass | pass | fail | 69.6 |
Orange #AC5D00 | Teal #006D65 | 1.28:1 | fail | fail | fail | 0.0 |
Orange #AC5D00 | Yellow #FFD166 | 3.37:1 | fail | pass | fail | 49.9 |
Orange #AC5D00 | Grey/Muted #846C60 | 1.01:1 | fail | fail | fail | 0.0 |
Orange #AC5D00 | Espresso/Text #3E312A | 2.58:1 | fail | fail | fail | -22.4 |
Orange #AC5D00 | Red/Error #911B12 | 1.82:1 | fail | fail | fail | -13.9 |
Orange #AC5D00 | Green/Success #007F76 | 1.01:1 | fail | fail | fail | 0.0 |
Orange #AC5D00 | Focus #00544E | 1.82:1 | fail | fail | fail | -14.8 |
Teal #006D65 | White #FFFFFF | 6.22:1 | pass | pass | fail | 80.5 |
Teal #006D65 | Cream #FFF8F0 | 5.91:1 | pass | pass | fail | 76.9 |
Teal #006D65 | Orange #AC5D00 | 1.28:1 | fail | fail | fail | 0.0 |
Teal #006D65 | Yellow #FFD166 | 4.31:1 | fail | pass | fail | 57.1 |
Teal #006D65 | Grey/Muted #846C60 | 1.27:1 | fail | fail | fail | 0.0 |
Teal #006D65 | Espresso/Text #3E312A | 2.01:1 | fail | fail | fail | -15.3 |
Teal #006D65 | Red/Error #911B12 | 1.42:1 | fail | fail | fail | 0.0 |
Teal #006D65 | Green/Success #007F76 | 1.27:1 | fail | fail | fail | 0.0 |
Teal #006D65 | Focus #00544E | 1.42:1 | fail | fail | fail | -7.7 |
Yellow #FFD166 | White #FFFFFF | 1.44:1 | fail | fail | fail | 21.0 |
Yellow #FFD166 | Cream #FFF8F0 | 1.37:1 | fail | fail | fail | 17.4 |
Yellow #FFD166 | Orange #AC5D00 | 3.37:1 | fail | pass | fail | -53.1 |
Yellow #FFD166 | Teal #006D65 | 4.31:1 | fail | pass | fail | -60.1 |
Yellow #FFD166 | Grey/Muted #846C60 | 3.39:1 | fail | pass | fail | -53.8 |
Yellow #FFD166 | Espresso/Text #3E312A | 8.68:1 | pass | pass | pass | -76.3 |
Yellow #FFD166 | Red/Error #911B12 | 6.15:1 | pass | pass | fail | -67.8 |
Yellow #FFD166 | Green/Success #007F76 | 3.39:1 | fail | pass | fail | -53.2 |
Yellow #FFD166 | Focus #00544E | 6.12:1 | pass | pass | fail | -68.7 |
Grey/Muted #846C60 | White #FFFFFF | 4.89:1 | pass | pass | fail | 73.9 |
Grey/Muted #846C60 | Cream #FFF8F0 | 4.64:1 | pass | pass | fail | 70.3 |
Grey/Muted #846C60 | Orange #AC5D00 | 1.01:1 | fail | fail | fail | 0.0 |
Grey/Muted #846C60 | Teal #006D65 | 1.27:1 | fail | fail | fail | 0.0 |
Grey/Muted #846C60 | Yellow #FFD166 | 3.39:1 | fail | pass | fail | 50.5 |
Grey/Muted #846C60 | Espresso/Text #3E312A | 2.56:1 | fail | fail | fail | -21.8 |
Grey/Muted #846C60 | Red/Error #911B12 | 1.81:1 | fail | fail | fail | -13.3 |
Grey/Muted #846C60 | Green/Success #007F76 | 1.00:1 | fail | fail | fail | 0.0 |
Grey/Muted #846C60 | Focus #00544E | 1.81:1 | fail | fail | fail | -14.1 |
Espresso/Text #3E312A | White #FFFFFF | 12.52:1 | pass | pass | pass | 98.4 |
Espresso/Text #3E312A | Cream #FFF8F0 | 11.88:1 | pass | pass | pass | 94.8 |
Espresso/Text #3E312A | Orange #AC5D00 | 2.58:1 | fail | fail | fail | 23.3 |
Espresso/Text #3E312A | Teal #006D65 | 2.01:1 | fail | fail | fail | 16.0 |
Espresso/Text #3E312A | Yellow #FFD166 | 8.68:1 | pass | pass | pass | 75.1 |
Espresso/Text #3E312A | Grey/Muted #846C60 | 2.56:1 | fail | fail | fail | 22.6 |
Espresso/Text #3E312A | Red/Error #911B12 | 1.41:1 | fail | fail | fail | 7.6 |
Espresso/Text #3E312A | Green/Success #007F76 | 2.56:1 | fail | fail | fail | 23.2 |
Espresso/Text #3E312A | Focus #00544E | 1.42:1 | fail | fail | fail | 0.0 |
Red/Error #911B12 | White #FFFFFF | 8.86:1 | pass | pass | pass | 88.7 |
Red/Error #911B12 | Cream #FFF8F0 | 8.41:1 | pass | pass | pass | 85.1 |
Red/Error #911B12 | Orange #AC5D00 | 1.82:1 | fail | fail | fail | 13.6 |
Red/Error #911B12 | Teal #006D65 | 1.42:1 | fail | fail | fail | 0.0 |
Red/Error #911B12 | Yellow #FFD166 | 6.15:1 | pass | pass | fail | 65.4 |
Red/Error #911B12 | Grey/Muted #846C60 | 1.81:1 | fail | fail | fail | 12.9 |
Red/Error #911B12 | Espresso/Text #3E312A | 1.41:1 | fail | fail | fail | -7.4 |
Red/Error #911B12 | Green/Success #007F76 | 1.81:1 | fail | fail | fail | 13.5 |
Red/Error #911B12 | Focus #00544E | 1.00:1 | fail | fail | fail | 0.0 |
Green/Success #007F76 | White #FFFFFF | 4.89:1 | pass | pass | fail | 73.3 |
Green/Success #007F76 | Cream #FFF8F0 | 4.64:1 | pass | pass | fail | 69.7 |
Green/Success #007F76 | Orange #AC5D00 | 1.01:1 | fail | fail | fail | 0.0 |
Green/Success #007F76 | Teal #006D65 | 1.27:1 | fail | fail | fail | 0.0 |
Green/Success #007F76 | Yellow #FFD166 | 3.39:1 | fail | pass | fail | 50.0 |
Green/Success #007F76 | Grey/Muted #846C60 | 1.00:1 | fail | fail | fail | 0.0 |
Green/Success #007F76 | Espresso/Text #3E312A | 2.56:1 | fail | fail | fail | -22.3 |
Green/Success #007F76 | Red/Error #911B12 | 1.81:1 | fail | fail | fail | -13.9 |
Green/Success #007F76 | Focus #00544E | 1.81:1 | fail | fail | fail | -14.7 |
Focus #00544E | White #FFFFFF | 8.83:1 | pass | pass | pass | 89.7 |
Focus #00544E | Cream #FFF8F0 | 8.38:1 | pass | pass | pass | 86.1 |
Focus #00544E | Orange #AC5D00 | 1.82:1 | fail | fail | fail | 14.5 |
Focus #00544E | Teal #006D65 | 1.42:1 | fail | fail | fail | 0.0 |
Focus #00544E | Yellow #FFD166 | 6.12:1 | pass | pass | fail | 66.4 |
Focus #00544E | Grey/Muted #846C60 | 1.81:1 | fail | fail | fail | 13.9 |
Focus #00544E | Espresso/Text #3E312A | 1.42:1 | fail | fail | fail | 0.0 |
Focus #00544E | Red/Error #911B12 | 1.00:1 | fail | fail | fail | 0.0 |
Focus #00544E | Green/Success #007F76 | 1.81:1 | fail | fail | fail | 14.5 |