Color blind safe web colors

[Picuino]

I am designing a website with multiple test-type questionnaires in which I use the red color to indicate the errors and the green color to indicate the correct answers.

What similar colors could I use so that the colorblind can see them?

https://www.picuino.com/questionary/en-electric-components-name.html

[jpanhalt]

There are resources that can help decide which colors are most easily distinguished by colorblind people.  My father was red/green (very common type) as was a professional friend.  They do well with traffic lights and one even practiced pathology without any special accommodations.

Here's a link that might help your: https://davidmathlogic.com/colorblind/#%23D81B60-%231E88E5-%23FFC107-%23004D40

[nctnico]

I usually add a pictogram like a check mark (for OK) or a cross (for bad). A different shape is also possible but less intuitive.

In the perspective of color blindness being so widely spread, it is odd that red & green are used so often for very important indications (like traffic lights). But people can function just fine. Someone I know figured out that he was color blind by the age of 16. Nobody (including himself) had noticed until then.

[Pinkus]

I am color blind too (red-green) and this does not mean I cannot see these colors. It is just if they are not pure and/or if the size is very small, it gets difficult to recognize the color or to see a difference. e.g.: if i were a bird, i would probably starve to death, since i would not be able to see the red berries in a green hedge from a distance.
In web shops I often have the problem, that the 'traffic light' for the availability shows only a few pixel sized colors - red - yellow - green. I find it often very difficult for me to distinguish between red and green. Here I wish the red would be more brighter, then it is easier to recognize.

In your website example the red and green are pretty pure and are shown in large areas - I do not have any problem to recognizing what is red and what is green. (though other people could have more problems).

Side note: i just remember, that I once read, that Viagra would help here (temporarily of course). I might ask my doctor for a description but I am just afraid that after taking the pill, I no longer have any increased interest in recognizing the correct colors...

Side note 2: I really wish all oscilloscopes would allow custom colors for the different channels because I'm really stuck here - it's very difficult to impossible to distinguish between yellow, orange and green (blue is easy). For my next oscilloscope this function will be an important criterion.

[Siwastaja]

Use color for emphasis, not as the only source of information.

So that if someone decides to print that page with a B&W printer, that still works out!

Or, don't only think about color blind; think about blind as well. They use screen readers. Neither colors or pictograms work.

The solution is simple: append a text: RIGHT, WRONG.

I'm not color blind but AFAIK, the actual hue of the color makes a big difference. Shift the green one towards cyan a bit, and you increase odds of distinction. This is why traffic lights are not pure green, but "traffic light green", slightly cyanish color. Now it appears your red color includes some blue component, and this is exactly the wrong thing to do, IMO.

[Picuino]

I have changed the red and green colors for two other similar colors from the Bang Wong palette.


Edit:
I've added a line-through text decoration of the incorrect text to make it even clearer.

[RoGeorge]

You can never know with the colors, not any color-blindness is the same, it depends from one case to another.  Then it depends from one monitor to another, then it depends from temperature color (especially now that so called "night color shift" is the norm for almost any OS, it depends with the ambient light (a mobile screen in the sunlight won't cope well with colors), then it depends with the browser settings (some are using inverted color, or browser extension like "Dark Reader" that automatically replaces colors to change any webpage as if would be a webpage with a dark theme, especially with big desktop screens or big TV screens), and so on.

Seems to be plenty of space available, so just to be sure, I'll mark the answers with text, or with a suggestive icon/graphic symbol.  I'll keep the coloring, too.

[fourfathom]

I'm red/green deficient (it sounds like Pinkus and I have similar issues), and the text "motor" is much easier for me to read over the new reddish background, but it's still a bit irritating.  It might be less so if the text was a bit fatter.  I personally have no trouble differentiating large areas of red or green, but black text on dark red is hard for me.  FWIW, blue text on red background is almost painful for me to look at.

[sleemanj]

Chrome has emulation of various vision problems built into it's developer tools for a couple years now.

Open the developer tools (menu > more tools > developer tools), then in the developer tools open the menu, More Tools > Rendering, then vision problems is in there.

Screen recording showin gwhere to find it here: https://twitter.com/mathias/status/1237393102635012101?s=20

[Picuino]

Ok, I finally changed to these image colors.
They are red and green for the most people and I have chosen two colors that I believe are also easily distinguishable for the colorblind people.

Thanks to all.

[fourfathom]

I know you've chosen, and I can easily differentiate between the red and the green (with the big areas of solid color), but FWIW I still have a difficult time reading the black "Speaker" text on the red background.  and a "lighter" red or fatter text would help with this.  But I can read it as is, if necessary, and I'm used to it.

[PlainName]

I think the colours get lost in the design whatever they are and whoever perceives them. The bars are all the same length and with three colours on four bars, it's not actually obvious that the colour is denoting anything other than being a different bar. (Having said that, if they all start out white and then change, that would be meaningful.)

As someone else said above, non-colour indicators would help enormously. I figure you don't want the tick/cross thing, so why not make the correct answer bold, or a large font, or something that makes it stand out from the other three.

[pardo-bsso]

Hi,

these two articles might come handy:

https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast
https://developer.mozilla.org/en-US/docs/Tools/Accessibility_inspector/Simulation

[tom66]

We had an RGB lamp on one of our products.  For showing an alarm, it would go solid red, but if it was 'all clear' it would pulse turquoise, 100% green with about 20% blue.  You have two types of indication there, and the blue component further helps the user contrast the colours.

[Siwastaja]

With high-power RGB LEDs, the green emitter typically being slightly off to cyan helps even if you don't mix in any blue. Pure green emitters are specialized and expensive, the usual options are the super inefficient old cheap yellowish green, and the modern high efficiency cyanish green, latter of which is good for the color blind, but not optimal for maximized color gamut.