5 ms·

> The reason the contrast ratios failed with the white text is that it has high brightness and is on a background with high brightness. Bright text on a bright

> The reason the contrast ratios failed with the white text is that it has high brightness and is on a background with high brightness. Bright text on a bright background is rendered low contrast computationally. Your design is supposed to satisfy what people see, not computational algorithms. It’s why the designer’s eye should always play a part in the equation. This is so stupid it hurts. It doesn't pass contrast guidelines because bright things on bright things are hard to distinguish for low-vision individuals! It doesn't matter what you think looks better. The correct solution for the designer is to use a darker orange or blue then put white text on it. Get correct contrast AND something that subjectively feels better. The correct answer for a designer is never to go "eh, I like my version better, I'll ignore these rules."

phkahler 7y ago
Yep: "Your design is supposed to satisfy what people see, not computational algorithms. It’s why the designer’s eye should always play a part in the equation." The entire point is that the designers eye can not possibly percieved things the same as every other person. To evaluate readability you should look not at the average rating from all users but the lowest average for each condition/group as they will be the ones who cant read it. I had to stop reading at the defense of gray text - there's no excuse for that. Ever.
- jacobolus 7y ago
  The “gray text” on the button analyzed in the article is dark gray text on light gray background. It has plenty of contrast. https://uxmovement.com/wp-content/uploads/2019/10/cca-buttonborder.png https://uxmovement.com/wp-content/uploads/2019/10/cca-button... You might find it aesthetically inferior to black on yellow (or whatever) but there’s nothing inherently illegible about it. To the grandparent poster chadlavi: > This is so stupid it hurts. It doesn't pass contrast guidelines because bright things on bright things are hard to distinguish You are misunderstanding the author’s claims, and then responding with mean-spirited insults. Try reading the whole article again more carefully, and with an open mind. If you are confused about something in specific a person who has studied color science a bit can try to clear up any questions you have. The author is not suggesting that you should put white text on a middle-blue (or whatever) background, but merely pointing out that the WCAG heuristic for contrast is not in accord with human lightness perception. The white-on-blue vs. black-on-blue is just a demonstrative example, showing that even though white-on-blue has higher contrast according to human perception, the WCAG heuristic instead rates the contrast of black-on-blue to be higher. This happens because the WCAG heuristic assumes human response to light intensity to be logarithmic, an inaccurate model which breaks down quite badly when you have dark text on a dark background. In practice both white-on-medium-blue and black-on-medium-blue buttons have relatively low contrast and should be avoided where possible. With white text a darker background would be better. With black text a (much) lighter background would be better.
- smallnamespace 7y ago
  > To evaluate readability you should look not at the average rating from all users but the lowest average for each condition/group as they will be the ones who cant read it. I mean, how scalable is that in the long run? Every average obscures a bag of unknown causative factors that we have yet to tease apart. As our medical knowledge increases and the number of conditions we can diagnose rise, the 'lowest average for each condition' monotonically decreases as a simple mathematical fact. Without an automated solution to making things accessible to every condition, designers and implementors will be buried under a mound of individual cases.
  - phkahler 7y ago
    There are several known conditions. Each will perceive things differently. For any color combination each group of people should see it as high contrast. If a group that is only 1 percent of the population cant read some color scheme it may still be considered fine If their perception is averaged in with everyone else. Come to think of it, someone should have already done the work and color sets should be published somewhere.
- gweinberg 7y ago
  And yet I see grey text all the time. In fact, your own comment looks grey to me now.
  - phkahler 7y ago
    Touche! But grey text on HN is arguably harder to read due to the lower contrast.
microcolonel 7y ago
I think there's a middle ground: use a better metric, such as CIE ΔE 2000
baddox 7y ago
Are you suggesting that the black text on blue background in the article is easier to read for certain low-vision individuals, while the white text on blue background version is easier to read for normal vision individuals? I have no data about this. It seems plausible, but it feels unlikely according to my intuition. To me it seems more likely that their naive algorithm for contrast ratio (which is based on their formula for relative luminance) doesn't match human perception in some cases. Color perception is complicated. https://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef https://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-rat... https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativelumi...
- mzs 7y ago
  The black definitely is easier to read for me. I don't mean which 'looks better' to me but in fact which is easier to read. You can test what someone with lower vision would prefer by looking at that example and closing a laptop screen to 40* or so. Which one can you still read?
  - baddox 7y ago
    I'm not talking about aesthetics. I'm very nearsighted, and when I take my glasses off I can definitely read the white text from a further distance than the black text. But I know there are different types of vision issues, and I don't question that the black text may work better for some. I would just question an algorithm that claims that the black text is better in general than the white.
- jacobolus 7y ago
  No, the black text on blue background is hard to read for everyone, but is overrated by the WCAG’s mediocre heuristic because human visual response to light intensity is not actually logarithmic, but closer to a square root. (Under a particular level of light adaptation; if you allow your eye to adapt for 30 minutes you can move the response curve up or down to see in very dim or very bright conditions.) It would be better to come up with an estimate of plausible ranges of screen brightnesses and a plausible range of surrounding contexts, and then use a real color appearance model to decide on visual contrast at the extremes of those plausible scenarios. But whoever designed the WCAG guideline was either not an expert in human vision or perhaps thought that would be too complicated to use a model which more closely approximated perceptual responses. The WCAG guideline should be seen as nothing more than a loose suggestion, with lots of false negatives. That is, if it says something is illegible, then it should probably be changed. but if it says the contrast is okay, then that should be checked by a better model (or human inspection). Both white-on-medium-blue and black-on-medium-blue buttons are inaccessible and should be avoided if possible.
nwallin 7y ago
Human perception of brightness is almost entirely cued off green levels. #0000FF (ie full blue) simply isn't very bright. #0000FF contrasts far far far more strongly with #FFFFFF than it does with #000000. This is true even for (most types of) color blind individuals. There might be a color blindness that cues hard on blue levels but I can't speak authoritatively in that area. If you define brightness as (r+g+b)/3 you're doing it wrong. NTSC defines brightness something like .7g + .25r + .05b. (I forgot the exact numbers, but it's really extreme) JPEG assumes something a lot less extreme, but still >.55 green. Source: I had to implement a saturation function for work and assumed brightness is (r+g+b)/3 and it looked like fucking garbage. In fact image/video compression is full of hacks like this. 4:2:0 is dominant in the video compression space for a reason. Human brains simply don't give a fuck about the color blue.

phkahler 7y ago

Yep: "Your design is supposed to satisfy what people see, not computational algorithms. It’s why the designer’s eye should always play a part in the equation." The entire point is that the designers eye can not possibly percieved things the same as every other person. To evaluate readability you should look not at the average rating from all users but the lowest average for each condition/group as they will be the ones who cant read it. I had to stop reading at the defense of gray text - there's no excuse for that. Ever.

jacobolus 7y ago
The “gray text” on the button analyzed in the article is dark gray text on light gray background. It has plenty of contrast. https://uxmovement.com/wp-content/uploads/2019/10/cca-buttonborder.png https://uxmovement.com/wp-content/uploads/2019/10/cca-button... You might find it aesthetically inferior to black on yellow (or whatever) but there’s nothing inherently illegible about it. To the grandparent poster chadlavi: > This is so stupid it hurts. It doesn't pass contrast guidelines because bright things on bright things are hard to distinguish You are misunderstanding the author’s claims, and then responding with mean-spirited insults. Try reading the whole article again more carefully, and with an open mind. If you are confused about something in specific a person who has studied color science a bit can try to clear up any questions you have. The author is not suggesting that you should put white text on a middle-blue (or whatever) background, but merely pointing out that the WCAG heuristic for contrast is not in accord with human lightness perception. The white-on-blue vs. black-on-blue is just a demonstrative example, showing that even though white-on-blue has higher contrast according to human perception, the WCAG heuristic instead rates the contrast of black-on-blue to be higher. This happens because the WCAG heuristic assumes human response to light intensity to be logarithmic, an inaccurate model which breaks down quite badly when you have dark text on a dark background. In practice both white-on-medium-blue and black-on-medium-blue buttons have relatively low contrast and should be avoided where possible. With white text a darker background would be better. With black text a (much) lighter background would be better.
smallnamespace 7y ago
> To evaluate readability you should look not at the average rating from all users but the lowest average for each condition/group as they will be the ones who cant read it. I mean, how scalable is that in the long run? Every average obscures a bag of unknown causative factors that we have yet to tease apart. As our medical knowledge increases and the number of conditions we can diagnose rise, the 'lowest average for each condition' monotonically decreases as a simple mathematical fact. Without an automated solution to making things accessible to every condition, designers and implementors will be buried under a mound of individual cases.
- phkahler 7y ago
  There are several known conditions. Each will perceive things differently. For any color combination each group of people should see it as high contrast. If a group that is only 1 percent of the population cant read some color scheme it may still be considered fine If their perception is averaged in with everyone else. Come to think of it, someone should have already done the work and color sets should be published somewhere.
gweinberg 7y ago
And yet I see grey text all the time. In fact, your own comment looks grey to me now.
- phkahler 7y ago
  Touche! But grey text on HN is arguably harder to read due to the lower contrast.

microcolonel 7y ago

I think there's a middle ground: use a better metric, such as CIE ΔE 2000

baddox 7y ago

Are you suggesting that the black text on blue background in the article is easier to read for certain low-vision individuals, while the white text on blue background version is easier to read for normal vision individuals? I have no data about this. It seems plausible, but it feels unlikely according to my intuition. To me it seems more likely that their naive algorithm for contrast ratio (which is based on their formula for relative luminance) doesn't match human perception in some cases. Color perception is complicated. https://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef https://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-rat... https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativelumi...

mzs 7y ago
The black definitely is easier to read for me. I don't mean which 'looks better' to me but in fact which is easier to read. You can test what someone with lower vision would prefer by looking at that example and closing a laptop screen to 40* or so. Which one can you still read?
- baddox 7y ago
  I'm not talking about aesthetics. I'm very nearsighted, and when I take my glasses off I can definitely read the white text from a further distance than the black text. But I know there are different types of vision issues, and I don't question that the black text may work better for some. I would just question an algorithm that claims that the black text is better in general than the white.
jacobolus 7y ago
No, the black text on blue background is hard to read for everyone, but is overrated by the WCAG’s mediocre heuristic because human visual response to light intensity is not actually logarithmic, but closer to a square root. (Under a particular level of light adaptation; if you allow your eye to adapt for 30 minutes you can move the response curve up or down to see in very dim or very bright conditions.) It would be better to come up with an estimate of plausible ranges of screen brightnesses and a plausible range of surrounding contexts, and then use a real color appearance model to decide on visual contrast at the extremes of those plausible scenarios. But whoever designed the WCAG guideline was either not an expert in human vision or perhaps thought that would be too complicated to use a model which more closely approximated perceptual responses. The WCAG guideline should be seen as nothing more than a loose suggestion, with lots of false negatives. That is, if it says something is illegible, then it should probably be changed. but if it says the contrast is okay, then that should be checked by a better model (or human inspection). Both white-on-medium-blue and black-on-medium-blue buttons are inaccessible and should be avoided if possible.

nwallin 7y ago

Human perception of brightness is almost entirely cued off green levels. #0000FF (ie full blue) simply isn't very bright. #0000FF contrasts far far far more strongly with #FFFFFF than it does with #000000. This is true even for (most types of) color blind individuals. There might be a color blindness that cues hard on blue levels but I can't speak authoritatively in that area. If you define brightness as (r+g+b)/3 you're doing it wrong. NTSC defines brightness something like .7g + .25r + .05b. (I forgot the exact numbers, but it's really extreme) JPEG assumes something a lot less extreme, but still >.55 green. Source: I had to implement a saturation function for work and assumed brightness is (r+g+b)/3 and it looked like fucking garbage. In fact image/video compression is full of hacks like this. 4:2:0 is dominant in the video compression space for a reason. Human brains simply don't give a fuck about the color blue.