Color contrast

Color contrast is a weird thing. In WCAG 1 and 2 there is kind of simple way of calculating contrast (based on old techniques). In WCAG 3 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 deprecated page on myndex.com is a good reason to rethink the way we calculate contrast.

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