search

Esri / calcite-web

Authoritative front-end development resources for Calcite design initiative. Includes extendable base components and styles, as well as a modular and efficient framework for ArcGIS properties.
http://esri.github.io/calcite-web/
Apache License 2.0
109 stars 58 forks source link

links with the table-striped gray background row color don't pass WCAG #655

Closed fgarofalo10 closed 8 years ago

fgarofalo10 commented 8 years ago

related to https://github.com/Esri/calcite-web/issues/649

Perhaps the actual issue is the gray background for .table-striped tr:nth-child(even) td { background-color: #f8f8f8; }

WCAG passes AA for blue text of #0079c1 if the background color is #fcfcfc .table-striped tr:nth-child(even) td { background-color: #fcfcfc; }

@nikolaswise @paulcpederson @alansangma

paulcpederson commented 8 years ago

@fgarofalo10 there is no brand gray in between white and off white: https://github.com/Esri/calcite-colors/blob/master/scss/variables.scss#L95

That said, we mix $white and $off-white to get #fcfcfc for the hover state of tabs, so we've used this color before. I wonder if we should add this color to the palette (maybe as $Calcite_Gray_075?)

Doing this makes the stripe very subtle:

screen shot 2016-08-17 at 11 04 00 am

Not sure if that is too subtle? Another option would be making links inside a striped table darker blue. The easiest way to do that would be to add a link-dark-blue modifier class.

fgarofalo10 commented 8 years ago

@kyle-03674 @bstifle thoughts on the additional color, added to the palette?

kyle-03674 commented 8 years ago

I'm not sure the lighter gray background helps here. I like the solution in #649 where the button fill became white, but the row fill was the same. The row fill, as @paulcpederson says, is very subtle, so subtle than many displays would blow out that detail and just look "white." In fact, on many displays, $Calcite_Gray_100 might not even show.

Is there a problem to leaving tables as they are? Maybe I missed something

fgarofalo10 commented 8 years ago

@kyle-03674 the accessibility compliance issue also occurs with a blue link <a href="#"> (#0079c1) against the current gray of a striped table row .table-striped tr:nth-child(even) td { background-color: #f8f8f8; }

my proposal is to use #fcfcfc which the color contrast passes WCAG 2.0 AA compliance for text/link color of #0079c1 in the foreground and #fcfcfc as the background

paulcpederson commented 8 years ago

ok, I've elected to just make the links $dark-blue which passes AA #661

kyle-03674 commented 8 years ago

ok

paulcpederson commented 8 years ago

will be part of next release