Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

$gray-light color inaccessible on white background #20952

Closed
fvsch opened this issue Oct 19, 2016 · 2 comments
Closed

$gray-light color inaccessible on white background #20952

fvsch opened this issue Oct 19, 2016 · 2 comments

Comments

@fvsch
Copy link

fvsch commented Oct 19, 2016

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
Copy link
Contributor

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

@zacechola
Copy link

This is definitely related to discussion in #17286.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants