form validation state colors not colorblind-friendly

[jlguenego]

On the following demo url (http://getbootstrap.com/css/#forms-control-validation) colorblind people cannot easily see the difference between error/warning/success color.
My suggestion would be to choose more saturated colors like for instance:
success: #00B900
warning: #E1B500
error: #FF0000

Thanks for thinking to the accessibility of bootstrap.

[cvrebert]

Probably it would be better for those concerned about colorblindness accessibility to use the version with icons that's shown in the next section? The meaning of the icons is fairly clear even without color. (Which isn't to say that we'd necessarily oppose improving the color scheme)

[jlguenego]

Indeed, using the icons is a good alternative approach.
But improving the color scheme would be definitively better for the colorblind user experience. Thanks.

[cvrebert]

If possible, a simple live example demonstrating the proposed new color scheme would be helpful.

[devanddesign]

I'm not even colorblind and I can barely tell the difference in the colors. I always manually change them in my own implementations to something brighter.

[jlguenego]

@cvrebert We are working on a "colorblind color scheme". I come back with something tomorrow.

[jlguenego]

Here is a live example of a proposed new color scheme.
http://plnkr.co/4t5kBETBAxZAXWhF9of4

[cvrebert]

Does that come close to the minimum contrast level recommended by http://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast ?

[cvrebert]

X-Ref: #11605.

[cvrebert]

CC: @masterbee of #11432

[cvrebert]

• Contrast ratio of proposed #21DF17 green-on-white: 1.81
• Contrast ratio of proposed #FFCC00 yellow-on-white: 1.51
• Contrast ratio of proposed #FF330F red-on-white: 3.66

So with regard to the WCAG 2 AA contrast recommendation, none of the proposed colors satisfy the general minimum contrast ratio of 4.5 (as calculated by this tool), although the green meets the looser 3.0 minimum ratio that applies only to "large-scale" text.

[jlguenego]

True. Checked and confirmed on http://webaim.org/resources/contrastchecker/.

Unfortunately following the WCAG (AA or AAA) regarding the color contrast cannot satisfy colorblind (and even normal) people with the actual situation.

Therefore we have modified the plunker with 2 new proposals:

1. same as before with maximum satisfying contrast. (some contrast have been increased, but without reaching the WCAG minimum recommanded).
2. new one with background color in the field to indicate the status (success, warning, error). This one complies with WCAG AAA.
   I think this is the best we can do for colorblindness.
   Thanks.
   Plunker updated (same url: http://plnkr.co/4t5kBETBAxZAXWhF9of4)

[mdo]

Changing these values for v3 isn't going to happen—it's quite a stark change for folks who simply want to upgrade to the latest. v4's colors can and will be changing though, so we can revisit then.

[cvrebert]

X-Ref: #54.