twbs/bootstrap

$gray-light color inaccessible on white background

Closed this issue · 2 comments

fvsch commented

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)?

jamiebuilds commented

.navbar-light .nav-link also has poor contrast using rgba(0, 0, 0, .4)

zacechola commented

This is definitely related to discussion in #17286.