$gray-light color inaccessible on white background
Created by: fvsch
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)?