You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Hi. Currently the $gray-light’s contrast ratio on top of a white background doesn’t meet the WCAG2 minimum for body copy. Current value is:
$gray-light: #818a91!default;
The contrast ratio for #818a91 on #ffffff is 3.51:1 (tested with http://webaim.org/resources/contrastchecker/), and WCAG 2 (AA) calls for a minimum contrast of 4.5:1 for body copy.
It seems that this color is used to signify:
Muted text
Disabled elements
For muted text, a darker value such as $gray might be better?
For disabled elements, maybe shooting for the highest accessible value would be alright? In my tests, both #767676 and #71777f are just at or above 4.5:1 (on a #ffffff background).
Or, going for a more generic solution, maybe just lowering $gray-light in the #707070 range (e.g. #6a7279, keeping the slightly blue hue)?
The text was updated successfully, but these errors were encountered:
Hi. Currently the
$gray-light
’s contrast ratio on top of a white background doesn’t meet the WCAG2 minimum for body copy. Current value is:The contrast ratio for
#818a91
on#ffffff
is 3.51:1 (tested with http://webaim.org/resources/contrastchecker/), and WCAG 2 (AA) calls for a minimum contrast of 4.5:1 for body copy.It seems that this color is used to signify:
For muted text, a darker value such as
$gray
might be better?For disabled elements, maybe shooting for the highest accessible value would be alright? In my tests, both
#767676
and#71777f
are just at or above 4.5:1 (on a#ffffff
background).Or, going for a more generic solution, maybe just lowering
$gray-light
in the#707070
range (e.g.#6a7279
, keeping the slightly blue hue)?The text was updated successfully, but these errors were encountered: