top | item 35169610

(no title)

gketuma | 3 years ago

So is the fix to remove the underlines? Or to stop using red/green color combination? Trying to learn as well. Thanks

discuss

order

coreyp_1|3 years ago

For me, it's not just an "underline" issue. In my case, it's a "thin line" issue, and letters are usually made up of thin lines, especially the monospace font used here. But that's just me. (Side note: I still use monospace fonts in programming, I just choose one that has thicker lines in relation to the character size.)

For example, when I saw the website in question, I did not notice the red or green text color at all. I did see the underline, though. I didn't know it's significance, however, because the key is at the bottom of the examples (5 rows of blocks of text examples) rather than the top. Oddly enough, in this particular instance, the green of the text looks more like a light grey, and I can see the red better than the green. Normally it's the other way around, but it might have something to do with the particular shades involved.

Importantly, there are different forms of red/green colorblindness. For some people, the colors are literally indistinguishable. They look exactly the same.

Mine is a form of reduced sensitivity. I can see it if it's a large area. E.g., if you're wearing a red shirt, then I know it's red, and it looks completely different from a green shirt. If it's just a thin line of red, though, then I might not pick up on it unless I concentrate. It just doesn't stand out when the lines are thin.

Fabric can be weird for me. Some fabrics cause issue because they will use red threads interspersed throughout the cloth in order to achieve a red/pinkish overtone, and I won't notice it at all (unless I really concentrate on it). It's because the red is coming from thin lines. I have to be careful with tweed, for example.

But again, that's just my experience.

messe|3 years ago

I have the same kind (IIRC it’s called deuteranomaly).

I find increasing the brightness of the display helps, but it’s still a pain in the arse to distinguish the two when the lines are thin in this example.

Just for fun, can you make out the lettering in this image posted to the fediverse: https://mathstodon.xyz/@csk/109786201604517074

If you have deuteranopia or deuteranomaly, you should be able to just about make it out. With normal colour vision, on the other hand, it’s meant to be nearly impossible to see.

illiarian|3 years ago

> because the key is at the bottom of the examples (5 rows of blocks of text examples) rather than the top.

It's worse in mobile. It's several screens of example blocks before you get to the key.

capableweb|3 years ago

Depends on the use case. If you want to signal deletion, strikethrough can be more appropriate than coloring. If you really have to use color, I've heard brown-blue combo should be easier, or at least blue-yellow color blindness is a lot rarer than red-green, so it'll be more accessible.

But the most accessible would be to use appropriate structure (together with appropriate semantic structure for those that cannot see at all) rather than appropriate coloring.

yuchi|3 years ago

The solution from literature is “use color as much as you want (within the limits of sufficient contrast for readability) but nether rely exclusively on it, always add some other visual device, such as icons or (even better) textual additions”.

heisenbit|3 years ago

Make color areas bigger and use higher contrast light/dark versions to keep some distance between red and green. Generally avoid thin red to signal anything important.

MisterTea|3 years ago

The fix is "designers" need to understand that there are people with visual disabilities and take steps to stop discriminating against them.

nativeit|3 years ago

Wait, so just no more using red? Anywhere, at all, in any facet of design? What about other differentiated abilities. Should “designers” stop using anything under 18-pt font? 24-pt? How accessible must an interface before you will grant “designers” their un-quoted status as designers?