Bootstrap: Form validation state colors aren't colorblind-friendly

[JackDanger]

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.

Issue #14744 was closed a year and a half ago to postpone an accessibility issue until v4. Due to the ongoing problem I propose reopening it and attempting to create colors that don't ruin the experience for the 96% of people with color vision but allow the 4% without to still use bootstrap-constructed forms.

[cvrebert]

I think advising the usage of additional validity indications besides color alone would be more robust, since that's best-practice anyway and it's not certain whether such colors exist (particularly since we also have WCAG's color contrast requirements to contend with), but certainly we should attempt a search for such colors.

[cvrebert]

CC: @patrickhlauke because accessibility

[patrickhlauke]

just to be clear, the current colors for v4 http://v4-alpha.getbootstrap.com/components/forms/#validation are now markedly different from those that #14744 wanted to address in v3 http://getbootstrap.com/css/#forms-control-validation - so i'd say it's not really relevant to reopen that particular bug.

however, these new validation colors (as well as the contextual colors/background http://v4-alpha.getbootstrap.com/components/utilities/#contextual-colors-and-backgrounds with exception of text-primary, bg-primary and bg-inverse) all suffer from low color contrast against white. so a new review of all these colors (independent of whatever was discussed in #14744) is possibly the better way forward.

[bastienmoulia]

color | current value | contrast ratio
-----|-----|-----
red | #d9534f | 3.96 : 1
orange | #f0ad4e | 1.95 : 1
yellow | #ffd500 | 1.42 : 1
green | #5cb85c | 2.48 : 1
blue | #0275d8 | 4.63 : 1
teal | #5bc0de | 2.09 : 1
pink | #ff5b77 | 2.99 : 1
purple | #613d7c | 8.51 : 1

To respect the contrast recommandation from the W3C in WCAG 2.0 (AA level) the contrast should be at least 4.5 : 1 for normal text and 3 : 1 for large text.

So for the red, orange and green, the 3 colors of validation form, to get a compliant contrast we can use:

color | proposed value | contrast ratio
-----|-----|-----
red | #da3b36 | 4.51 : 1
orange | #ad6500 | 4.53 : 1
green | #068a06 | 4.52 : 1

But the orange is more brown... With a contrast of 3 : 1 we can have:

color | proposed value | contrast ratio
-----|-----|-----
orange | #da7e00 | 3.01 : 1

But the contrast is not all, there is different sort of colorblindness. The most common (8% of the population) is Deuteranopia. They tend to see reds as brownish-yellow and greens as beige.

The image above made with https://www.toptal.com/designers/colorfilter is one idea of what colorblind can see but there is many others.

So icons are important and colors must be harmonized to have a beautiful library. But the W3C recommandation are just recommandation. We can adjust some color to be darker but I think the W3C values are hard to reach.

[JackDanger]

@bastienmoulia I appreciate your work here. I think your proposal is good and I agree the W3C values are hard to reach but any improvement is useful here. And I can confirm as someone with deuteranopia that the left and right images above my comment are, in fact, identical to me.

[mdo]

New colors in #22836:

• Red
• Green

No more yellow as it doesn't have an associated CSS pseudo-class like :invalid and :valid.