Contrast
Finally in 2019 I discovered this Andrew Sommers who came with the answer of all my questions about contrast. And the answer was not 42. In WCAG 1 and 2 there is kind of simple, lineair way of calculating contrast (based on old techniques). In future WCAG versions there will be a new way of contrast calculation based on how we perceive color. It started here github.com/w3c/wcag/issues/695.
Check a new way of calculating contrast as we perceive it: APCA CONTRAST CALCULATOR. Beware! This is not yet implemented in WCAG!
The next example copied from a depreciated page on myndex.com is a good reason to rethink the way we calculate contrast. Let's hope a new way of calculating contrast will be implemented in WCAG as quick as possible.
| This is a test of a normal font at contrast 4.5:1
The values for this pair are Foreground #00007F with a background value of #008DE0 |
This is a Bold Font with contrast 4.5:1 |
| This is a "FAIL" per W3C math at contrast 2.9:1
The values for this pair are Foreground #43A6A4 with a background value of #FFF |
This is a "FAIL" with contrast 2.9:1 |
| This is a test of a normal font at contrast 4.5:1
The values for this pair are Foreground #747476 with a background value of #000 |
This is a Bold Font with contrast 4.5:1 |
| This is a "FAIL" per W3C math at contrast 2.9:1
The values for this pair are Foreground #AA59A2 with a background value of #FFF |
This is a "FAIL" with contrast 2.9:1 |
| This is a test of a normal font at contrast 4.5:1
The values for this pair are Foreground #AEB7FF with a background value of #00F |
This is a Bold Font with contrast 4.5:1 |
| This is a test of a normal font at contrast 4.5:1
The values for this pair are Foreground #000063 with a background value of #808080 |
This is a Bold Font with contrast 4.5:1 |
| This is a test of a normal font at contrast 4.5:1
The values for this pair are Foreground #808080 with a background value of #000063 |
This is a Bold Font with contrast 4.5:1 |
| This is a test of a normal font at contrast 4.5:1
The values for this pair are Foreground #757776 with a background value of #FFF |
This is a Bold Font with contrast 4.5:1 |
| This is a "FAIL" per W3C math at contrast 2.9:1
The values for this pair are Foreground #FFF with a background value of #E77B00 |
This is a "FAIL" with contrast 2.9:1 |
| This is a test of a normal font at contrast 4.5:1
The values for this pair are Foreground #6062F0 with a background value of #000 |
This is a Bold Font with contrast 4.5:1 |
| This is a "FAIL" per W3C math at contrast 2.9:1
The values for this pair are Foreground #FFF with a background value of #43A6A4 |
This is a "FAIL" with contrast 2.9:1 |
| This is a test of a normal font at contrast 4.5:1
The values for this pair are Foreground #0B0000 with a background value of #AF53A0 |
This is a Bold Font with contrast 4.5:1 |
| This is a test of a normal font at contrast 4.5:1
The values for this pair are Foreground #FFF with a background value of #9F60A1 |
This is a Bold Font with contrast 4.5:1 |
| This is a test of a normal font at contrast 4.5:1
The values for this pair are Foreground #FFF with a background value of #757776 |
This is a Bold Font with contrast 4.5:1 |
