Örnek Kahve Co. contrast matrix — before

FICTIONAL EXAMPLE BRAND. WCAG 2.x contrast ratio for every text/background pairing of the brand-book 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.

Before — brand-book palette45 colour pairs: 7 pass AA normal text (4.5:1) · 12 pass AA large/UI (3:1) · 4 pass AAA (7:1)
text ↓ / background →White#FFFFFFCream#FFF8F0Orange#F28C28Teal#2EC4B6Yellow#FFD166Grey/Muted#A0A0A0Espresso/Text#4A3428Red/Error#E74C3CGreen/Success#2ECC71Focus#CDEFEB
White#FFFFFFsame colour1.05Fail2.45Fail2.17Fail1.44Fail2.61Fail11.58AAA3.823+2.10Fail1.23Fail
Cream#FFF8F01.05Failsame colour2.33Fail2.06Fail1.37Fail2.48Fail11.00AAA3.633+2.00Fail1.16Fail
Orange#F28C282.45Fail2.33Failsame colour1.13Fail1.70Fail1.07Fail4.72AA1.56Fail1.17Fail2.00Fail
Teal#2EC4B62.17Fail2.06Fail1.13Failsame colour1.50Fail1.21Fail5.34AA1.76Fail1.03Fail1.77Fail
Yellow#FFD1661.44Fail1.37Fail1.70Fail1.50Failsame colour1.81Fail8.03AAA2.65Fail1.46Fail1.18Fail
Grey/Muted#A0A0A02.61Fail2.48Fail1.07Fail1.21Fail1.81Failsame colour4.433+1.46Fail1.24Fail2.13Fail
Espresso/Text#4A342811.58AAA11.00AAA4.72AA5.34AA8.03AAA4.433+same colour3.033+5.51AA9.46AAA
Red/Error#E74C3C3.823+3.633+1.56Fail1.76Fail2.65Fail1.46Fail3.033+same colour1.82Fail3.123+
Green/Success#2ECC712.10Fail2.00Fail1.17Fail1.03Fail1.46Fail1.24Fail5.51AA1.82Failsame colour1.72Fail
Focus#CDEFEB1.23Fail1.16Fail2.00Fail1.77Fail1.18Fail2.13Fail9.46AAA3.123+1.72Failsame colour

All pairings

Every ordered pairing with pass/fail per threshold
TextBackgroundWCAG ratioAA normal 4.5AA large / UI 3.0AAA 7.0APCA Lc
White #FFFFFFCream #FFF8F01.05:1failfailfail0.0
White #FFFFFFOrange #F28C282.45:1failfailfail-52.8
White #FFFFFFTeal #2EC4B62.17:1failfailfail-46.8
White #FFFFFFYellow #FFD1661.44:1failfailfail-23.9
White #FFFFFFGrey/Muted #A0A0A02.61:1failfailfail-56.2
White #FFFFFFEspresso/Text #4A342811.58:1passpasspass-100.3
White #FFFFFFRed/Error #E74C3C3.82:1failpassfail-70.1
White #FFFFFFGreen/Success #2ECC712.10:1failfailfail-45.2
White #FFFFFFFocus #CDEFEB1.23:1failfailfail-12.9
Cream #FFF8F0White #FFFFFF1.05:1failfailfail0.0
Cream #FFF8F0Orange #F28C282.33:1failfailfail-48.8
Cream #FFF8F0Teal #2EC4B62.06:1failfailfail-42.8
Cream #FFF8F0Yellow #FFD1661.37:1failfailfail-19.9
Cream #FFF8F0Grey/Muted #A0A0A02.48:1failfailfail-52.2
Cream #FFF8F0Espresso/Text #4A342811.00:1passpasspass-96.3
Cream #FFF8F0Red/Error #E74C3C3.63:1failpassfail-66.1
Cream #FFF8F0Green/Success #2ECC712.00:1failfailfail-41.2
Cream #FFF8F0Focus #CDEFEB1.16:1failfailfail-8.9
Orange #F28C28White #FFFFFF2.45:1failfailfail47.8
Orange #F28C28Cream #FFF8F02.33:1failfailfail44.2
Orange #F28C28Teal #2EC4B61.13:1failfailfail0.0
Orange #F28C28Yellow #FFD1661.70:1failfailfail24.5
Orange #F28C28Grey/Muted #A0A0A01.07:1failfailfail0.0
Orange #F28C28Espresso/Text #4A34284.72:1passpassfail-46.6
Orange #F28C28Red/Error #E74C3C1.56:1failfailfail-16.4
Orange #F28C28Green/Success #2ECC711.17:1failfailfail0.0
Orange #F28C28Focus #CDEFEB2.00:1failfailfail34.2
Teal #2EC4B6White #FFFFFF2.17:1failfailfail42.2
Teal #2EC4B6Cream #FFF8F02.06:1failfailfail38.5
Teal #2EC4B6Orange #F28C281.13:1failfailfail0.0
Teal #2EC4B6Yellow #FFD1661.50:1failfailfail18.8
Teal #2EC4B6Grey/Muted #A0A0A01.21:1failfailfail-8.4
Teal #2EC4B6Espresso/Text #4A34285.34:1passpassfail-52.4
Teal #2EC4B6Red/Error #E74C3C1.76:1failfailfail-22.2
Teal #2EC4B6Green/Success #2ECC711.03:1failfailfail0.0
Teal #2EC4B6Focus #CDEFEB1.77:1failfailfail28.6
Yellow #FFD166White #FFFFFF1.44:1failfailfail21.0
Yellow #FFD166Cream #FFF8F01.37:1failfailfail17.4
Yellow #FFD166Orange #F28C281.70:1failfailfail-27.3
Yellow #FFD166Teal #2EC4B61.50:1failfailfail-21.3
Yellow #FFD166Grey/Muted #A0A0A01.81:1failfailfail-30.7
Yellow #FFD166Espresso/Text #4A34288.03:1passpasspass-74.7
Yellow #FFD166Red/Error #E74C3C2.65:1failfailfail-44.5
Yellow #FFD166Green/Success #2ECC711.46:1failfailfail-19.7
Yellow #FFD166Focus #CDEFEB1.18:1failfailfail7.4
Grey/Muted #A0A0A0White #FFFFFF2.61:1failfailfail51.0
Grey/Muted #A0A0A0Cream #FFF8F02.48:1failfailfail47.4
Grey/Muted #A0A0A0Orange #F28C281.07:1failfailfail0.0
Grey/Muted #A0A0A0Teal #2EC4B61.21:1failfailfail0.0
Grey/Muted #A0A0A0Yellow #FFD1661.81:1failfailfail27.7
Grey/Muted #A0A0A0Espresso/Text #4A34284.43:1failpassfail-43.2
Grey/Muted #A0A0A0Red/Error #E74C3C1.46:1failfailfail-13.0
Grey/Muted #A0A0A0Green/Success #2ECC711.24:1failfailfail8.3
Grey/Muted #A0A0A0Focus #CDEFEB2.13:1failfailfail37.5
Espresso/Text #4A3428White #FFFFFF11.58:1passpasspass96.6
Espresso/Text #4A3428Cream #FFF8F011.00:1passpasspass93.0
Espresso/Text #4A3428Orange #F28C284.72:1passpassfail46.7
Espresso/Text #4A3428Teal #2EC4B65.34:1passpassfail52.3
Espresso/Text #4A3428Yellow #FFD1668.03:1passpasspass73.3
Espresso/Text #4A3428Grey/Muted #A0A0A04.43:1failpassfail43.5
Espresso/Text #4A3428Red/Error #E74C3C3.03:1failpassfail30.1
Espresso/Text #4A3428Green/Success #2ECC715.51:1passpassfail53.9
Espresso/Text #4A3428Focus #CDEFEB9.46:1passpasspass83.0
Red/Error #E74C3CWhite #FFFFFF3.82:1failpassfail64.6
Red/Error #E74C3CCream #FFF8F03.63:1failpassfail61.0
Red/Error #E74C3COrange #F28C281.56:1failfailfail14.7
Red/Error #E74C3CTeal #2EC4B61.76:1failfailfail20.3
Red/Error #E74C3CYellow #FFD1662.65:1failfailfail41.2
Red/Error #E74C3CGrey/Muted #A0A0A01.46:1failfailfail11.5
Red/Error #E74C3CEspresso/Text #4A34283.03:1failpassfail-29.5
Red/Error #E74C3CGreen/Success #2ECC711.82:1failfailfail21.9
Red/Error #E74C3CFocus #CDEFEB3.12:1failpassfail51.0
Green/Success #2ECC71White #FFFFFF2.10:1failfailfail40.6
Green/Success #2ECC71Cream #FFF8F02.00:1failfailfail37.0
Green/Success #2ECC71Orange #F28C281.17:1failfailfail0.0
Green/Success #2ECC71Teal #2EC4B61.03:1failfailfail0.0
Green/Success #2ECC71Yellow #FFD1661.46:1failfailfail17.3
Green/Success #2ECC71Grey/Muted #A0A0A01.24:1failfailfail-10.0
Green/Success #2ECC71Espresso/Text #4A34285.51:1passpassfail-54.1
Green/Success #2ECC71Red/Error #E74C3C1.82:1failfailfail-23.9
Green/Success #2ECC71Focus #CDEFEB1.72:1failfailfail27.0
Focus #CDEFEBWhite #FFFFFF1.23:1failfailfail11.1
Focus #CDEFEBCream #FFF8F01.16:1failfailfail7.5
Focus #CDEFEBOrange #F28C282.00:1failfailfail-37.9
Focus #CDEFEBTeal #2EC4B61.77:1failfailfail-31.9
Focus #CDEFEBYellow #FFD1661.18:1failfailfail-9.0
Focus #CDEFEBGrey/Muted #A0A0A02.13:1failfailfail-41.3
Focus #CDEFEBEspresso/Text #4A34289.46:1passpasspass-85.3
Focus #CDEFEBRed/Error #E74C3C3.12:1failpassfail-55.1
Focus #CDEFEBGreen/Success #2ECC711.72:1failfailfail-30.3