Exploring the W3C Accessibility Guidelines for Text in Colour
The formula for colour brightness given by the W3C, see Holes in the W3C Colour Readability Guidelines is flawed as I point out variously in these pages because it does not give consistent results. To back this assertion up, here are ten examples, each of which gives a YIQ brightness difference of 49. The perceived brightness difference on all the red-background examples should be the same, if the YIQ brightness formula is to be credible.
For an explanation of STW* referred to below, see Readable Text in Colour
All the examples on a red background have a background YIQ colour brightness of 77 and foreground YIQ colour brightness 126, giving a YIQ brightness difference of 49. According to the W3C colour brightness guidelines, therefore, all these samples in red should be of an equivalent brightness of text over background, which clearly they aren’t, so those guidelines are not right, then, clearly. The STW* brightness difference values are shown in the examples, where it says difference=. Looking at the greyscale conversion: the STW* values seem pretty accurate. Thus it seems empirically reasonable to trust my STW* calculations, and most definitely not trust the guidelines from the W3C.
|
Background:#FF0000; Text: #FF5400; Foreground STW* 73, difference=16 | Background:#828282; Text: #919191; Foreground STW* 73, difference=16 |
Background:#FF0000; Text: #FF23FF; Foreground STW* 74, difference = 17 | Background:#828282; Text: #929292; Foreground STW* 74, difference = 17 | |
Background:#FF0000; Text: #00A9EB; Foreground STW* 86, difference=29 | Background:#828282; Text: #9C9C9C; Foreground STW* 86, difference=29 | |
Background:#FF0000; Text: #00B0C3; Foreground STW* 89, difference=32 | Background:#828282; Text: #9F9E9F; Foreground STW* 89, difference=32 | |
Background:#FF0000; Text: #00B7A0; Foreground STW* 93, difference=36 | Background:#828282; Text: #A2A2A2; Foreground STW* 93, difference=36 | |
Background:#FF0000; Text: #00BE7D; Foreground STW* 99, difference=42 | Background:#828282; Text: #A6A6A6; Foreground STW* 99, difference=42 | |
Background:#FF0000; Text: #00C55A; Foreground STW* 105, difference=48 | Background:#828282; Text: #ABABAB; Foreground STW* 105, difference=48 | |
Background:#FF0000; Text: #00CC36; Foreground STW* 112, difference=55 | Background:#828282; Text: #B0B0B0; Foreground STW* 112, difference=55 | |
Background:#FF0000; Text: #00D30F; Foreground STW* 121, difference=64 | Background:#828282; Text: #B6B6B6; Foreground STW* 121, difference=64 | |
Background:#FF0000; Text: #00D600; Foreground STW* 124, difference=67 | Background:#828282; Text: #B8B8B8; Foreground STW* 124, difference=67 | |
0 comments:
Post a Comment