Admin accessibility

I was told by a customer who has red-green deficiency that the enabled/disabled icons in the admin don't have sufficient contrast. I'll post a set of new images soon.

Hmm... thought there were images but they're just color codes in the stylesheet.

swguy:

Hmm... thought there were images but they're just color codes in the stylesheet.

As someone with a red-green issue, I share the concerns. I would love to see that be a graphic. I have to hover over the item to see if its disabled or not.

i wonder if these colors might be better:

.txt-status-off{
  color: #e31c3d;
}
.txt-status-on{
  color:   #32cd32;
}

I'll post the changes once we have agreement.

I'll suggest using an FA-icon (like fa-ban for disabled and fa-check for enabled) underneath that coloring to give a better 'hint' as to the button's functionality/display.,

swguy:

I'll post the changes once we have agreement.

I agrees for FA need with @Lat9

508 color is different with color and character. we did the same for maps.. character, color or SVG... both SVG and FA responsive.

like:```
<i class="fa fa-user-circle-o fa-lg" style="color:rgba(17,59,217,1);"></i>

davewest:

I agrees for FA need with @Lat9

508 color is different with color and character. we did the same for maps.. character, color or SVG... both SVG and FA responsive.

like:```
<i class="fa fa-user-circle-o fa-lg" style="color:rgba(17,59,217,1);"></i>

please lets move away from inline styling.

lat9:

I'll suggest using an FA-icon (like fa-ban for disabled and fa-check for enabled)

Very interesting idea and truly frees you from even needing to worry about coloring.

swguy:

Very interesting idea and truly frees you from even needing to worry about coloring.Great thoughts from Cindy.
Just want to say that, with the current emphasis on accessibility, the option to colorize should always be available. Doesn't need to be it's own div ID but, some distinctive method of colorization should be available to the user through CSS.

Also, accessibility has different standards for text and, say, a check mark.

.txt-status-off{color: #e31c3d;}
.txt-status-on{ color: #32cd32; }The first (#E31C3D) passes all but AAA standard for normal text. #EC697F is all that is needed for a graphical object. #AC152F meets all AAA requirements for graphics and text on a #FFFFFF background.

Unfortunately, #32CD32 fails all checks. #29A829 is the minimum for a graphic and #196719 would be needed on a #FFFFFF background to meet AAA standard.

Good tool at https://webaim.org/resources/contrastchecker/ for checking text or graphic compliance.

If you are working with text that's a link, https://webaim.org/resources/linkcontrastchecker/ is a great help.

I really like this idea. My concern is for others. While I have issues with red/green, there are others who have issues with blue/yellow and some with focus/clarity issues. I really appreciate you guys considering this to make ZC more accessible to all!

:cheers:

https://www.toptal.com/designers/colorfilter/ is a good site to test all forms of color blindness.

And a very good learning article at https://css-tricks.com/accessibility-basics-testing-your-page-for-color-blindness/