Contrast
Finally in 2019 I discovered APCA. Andrew Sommers came with the answer of all my doubts about contrast in WCAG 2. In WCAG 1 and 2 there is a kind of simple, kind of lineair way of calculating contrast (based on old techniques). For me it started here github.com/w3c/wcag/issues/695; contrast calculated by how eyes perceive colored light. Since 2023 APCA disappeared from the WCAG 3 draft but that might be temporary.
Check calculating contrast as we perceive it: APCA CONTRAST CALCULATOR APCA Contrast Calculator. Beware! This is not yet implemented in WCAG!
For the next example parts were copied from a deprecated page on myndex.com. This example shows a good reason to rethink the way we calculate contrast in WCAG. Recent developments on APCA can be found on readtech.org/ARC.
| WCAG success | WCAG fail |
|---|---|
| The values for this pair are: background value of #FFFFFF and foreground value of #757776 Contrast ratio: 4.5:1 (success) | The values for this pair are: background value of #FFFFFF and foreground value of #43A6A4 Contrast ratio: 2.9:1 (fail) |
| The values for this pair are: background value of #000000 and foreground value of #747476 Contrast ratio: 4.5:1 (success) | The values for this pair are: background value of #FFFFFF and foreground value of #AA8FA7 Contrast ratio: 2.9:1 (fail) |
| The values for this pair are: background value of #000063 and foreground value of #808080 Contrast ratio: 4.5:1 (success) | The values for this pair are: background value of #AE9555 and foreground value of #FFFFFF Contrast ratio: 2.9:1 (fail) |
| The values for this pair are: background value of #E77B00 and foreground value of #3D2E1C Contrast ratio: 4.5:1 (success) | The values for this pair are: background value of #E77B00 and foreground value of #FFFFFF Contrast ratio: 2.9:1 (fail) |
| The values for this pair are: background value of #008DE0 and foreground value of #00007F Contrast ratio: 4.5:1 (success) | The values for this pair are: background value of #43A6A4 and foreground value of #FFFFFF Contrast ratio: 2.9:1 (fail) |
| The values for this pair are: background value of #000000 and foreground value of #6062F0 Contrast ratio: 4.5:1 (success) | The values for this pair are: background value of #FF36FF and foreground value of #FFFFFF Contrast ratio: 2.9:1 (fail) |
| The values for this pair are: background value of #AF53A0 and foreground value of #0B0000 Contrast ratio: 4.5:1 (success) | The values for this pair are: background value of #FDF9D9 and foreground value of #FC5B4B Contrast ratio: 2.9:1 (fail) |
| The values for this pair are: background value of #0080FF and foreground value of #1D1B1B Contrast ratio: 4.5:1 (success) | The values for this pair are: background value of #0080FF and foreground value of #E0E0E0 Contrast ratio: 2.9:1 (fail) |
| The values for this pair are: background value of #72A270 and foreground value of #332E2E Contrast ratio: 4.5:1 (success) | The values for this pair are: background value of #72A270 and foreground value of #FFFFFF Contrast ratio: 2.9:1 (fail) |
| The values for this pair are: background value of #0B0914 and foreground value of #807B38 Contrast ratio: 4.5:1 (success) | The values for this pair are: background value of #FF5757 and foreground value of #FCFE0B Contrast ratio: 2.9:1 (fail) |
| The values for this pair are: background value of #807B38 and foreground value of #150610 Contrast ratio: 4.5:1 (success) | The values for this pair are: background value of #8C9D00 and foreground value of #48485D Contrast ratio: 2.9:1 (fail) |
For deeper insights watch:
