5 ms·

Please stop using green vs red like this, it's very difficult for many people, including me. Especially for thin lines.

by pimlottc 4y ago

danklammer 4y ago
This is great feedback. I will update to be more accessible.
- peterfirefly 4y ago
  You might be able to get away with changing your reds and greens so (most) colour blind people can see the difference between them.
- Matheus28 4y ago
  You could add a strikethrough on the red ones, and keep the color. .nope { text-decoration: line-through; }
- scns 4y ago
  https://colorhexa.com https://colorhexa.com shows how each color "is perceived by people affected by a color vision deficiency".
coreyp_1 4y ago
I didn't even realize that the red/green was present until you mentioned it! I do actually perceive it, now that you draw attention to its existence, and can tell the difference, but you are correct: thin lines are aggravating to deal with! And it's not just the red/green issue: it's also in distinguishing them from grey when the lines are thin. Side issue: when I was a kid, my math teacher insisted on grading using those thin BIC red pens. The problem is that it was indistinguishable from my own writing (at a glance), and it took forever to find my mistakes that were "clearly marked" by the teacher. Thin red lines are pointless to me. I guess it's a good thing that I'm naturally good at math!
- gketuma 4y ago
  So is the fix to remove the underlines? Or to stop using red/green color combination? Trying to learn as well. Thanks
  - capableweb 4y 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.
  - coreyp_1 4y 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.
323 4y ago
Maybe a browser extension should exists which automatically replaces colors with more accessible ones.
- nielsbot 4y ago
  I think you can do this with system accessibility settings? At least on macOS and iOS.
nielsbot 4y ago
Someone filed an issue already https://github.com/system-fonts/modern-font-stacks/issues/1 https://github.com/system-fonts/modern-font-stacks/issues/1
Pr0ject217 4y ago
100%. I can barely read it. Perhaps changing the background of the text to red and green (and the text to white) would improve its legibility. There are likely better ideas, though!
BrandoElFollito 4y ago
I am reading the comments about red green but I do not see at all where they are (I am colorblind to some extend so this may be the reason). Could someone please link to a screenshot with some indication where to look? Thanks!
- vanderZwan 4y ago
  The creator of the site has already updated the colors in response to the feedback. If you still don't see it, there is a handy Daltonization add-on that might help with sites like this: https://addons.mozilla.org/en-US/firefox/addon/let-s-get-color-blind/ https://addons.mozilla.org/en-US/firefox/addon/let-s-get-col... https://chrome.google.com/webstore/detail/lets-get-color-blind/bkdgdianpkfahpkmphgehigalpighjck https://chrome.google.com/webstore/detail/lets-get-color-bli... I used to use it myself until I got my colorlite glasses (although it still is practical to show to others how a website might be unreadable for me without the glasses)

Please stop using green vs red like this, it's very difficult for many people, including me. Especially for thin lines.

danklammer 4y ago

This is great feedback. I will update to be more accessible.

peterfirefly 4y ago
You might be able to get away with changing your reds and greens so (most) colour blind people can see the difference between them.
Matheus28 4y ago
You could add a strikethrough on the red ones, and keep the color. .nope { text-decoration: line-through; }
scns 4y ago
https://colorhexa.com https://colorhexa.com shows how each color "is perceived by people affected by a color vision deficiency".

coreyp_1 4y ago

I didn't even realize that the red/green was present until you mentioned it! I do actually perceive it, now that you draw attention to its existence, and can tell the difference, but you are correct: thin lines are aggravating to deal with! And it's not just the red/green issue: it's also in distinguishing them from grey when the lines are thin. Side issue: when I was a kid, my math teacher insisted on grading using those thin BIC red pens. The problem is that it was indistinguishable from my own writing (at a glance), and it took forever to find my mistakes that were "clearly marked" by the teacher. Thin red lines are pointless to me. I guess it's a good thing that I'm naturally good at math!

gketuma 4y ago
So is the fix to remove the underlines? Or to stop using red/green color combination? Trying to learn as well. Thanks
- capableweb 4y 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.
- coreyp_1 4y 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.

323 4y ago

Maybe a browser extension should exists which automatically replaces colors with more accessible ones.

nielsbot 4y ago
I think you can do this with system accessibility settings? At least on macOS and iOS.

nielsbot 4y ago

Someone filed an issue already https://github.com/system-fonts/modern-font-stacks/issues/1 https://github.com/system-fonts/modern-font-stacks/issues/1

Pr0ject217 4y ago

100%. I can barely read it. Perhaps changing the background of the text to red and green (and the text to white) would improve its legibility. There are likely better ideas, though!

BrandoElFollito 4y ago

I am reading the comments about red green but I do not see at all where they are (I am colorblind to some extend so this may be the reason). Could someone please link to a screenshot with some indication where to look? Thanks!

vanderZwan 4y ago
The creator of the site has already updated the colors in response to the feedback. If you still don't see it, there is a handy Daltonization add-on that might help with sites like this: https://addons.mozilla.org/en-US/firefox/addon/let-s-get-color-blind/ https://addons.mozilla.org/en-US/firefox/addon/let-s-get-col... https://chrome.google.com/webstore/detail/lets-get-color-blind/bkdgdianpkfahpkmphgehigalpighjck https://chrome.google.com/webstore/detail/lets-get-color-bli... I used to use it myself until I got my colorlite glasses (although it still is practical to show to others how a website might be unreadable for me without the glasses)