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.

Sign up for GitHub

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

Jump to bottom

@gray-light (#999) below WCAG minimum contrast #13847

Closed
ssorallen opened this issue Jun 17, 2014 · 9 comments
Closed

@gray-light (#999) below WCAG minimum contrast #13847

ssorallen opened this issue Jun 17, 2014 · 9 comments
Labels
css
Milestone
v3.2.0

Comments

@ssorallen
Copy link
Contributor

According to Web Content Accessibility Guidelines, the minimum contrast ratio between <18px text and its background should be 4.5:1. #999 on #fff (@Gray-Light / ".text-muted" on "body") has a contrast ratio of 2.85:1, lower than recommended even for large text.

#767676 for @gray-light would give a contrast ratio of 4.54:1 and pass for all sizes of text.

I used the WebAIM Color Contrast Checker to test the values.
@cvrebert cvrebert added the css label Jun 17, 2014
@cvrebert
Copy link
Collaborator

X-Ref: wet-boew/wet-boew#5490, wet-boew/wet-boew#4463

@mdo
Copy link
Member

mdo commented Jun 17, 2014

Yeah, I'm probably down to change to #777 in the future. Probably a v4 thing though? Or should we just say fuck it and :shipit: with v3.2?

@BBosman
Copy link
Contributor

BBosman commented Jun 17, 2014

As "Accessibility" is a feature of the current version of Bootstrap you could qualify this as a bug against that feature. So my suggestion would be :shipit: with v3.2.

@ssorallen ssorallen mentioned this issue Jun 18, 2014
Merged
@cvrebert
Copy link
Collaborator

IMHO, seems draconian to consider color tweaks to be backward-compat breakers. +1 for doing it in v3.

@mdo
Copy link
Member

mdo commented Jun 18, 2014

Yeah, silly comment 😁.

@mdo
Copy link
Member

mdo commented Jun 18, 2014

Fixed by #13854.

@mdo mdo closed this as completed Jun 18, 2014
@mdo mdo added this to the v3.2.0 milestone Jun 18, 2014
@juodumas juodumas mentioned this issue Jul 10, 2014
Closed
@chrisbainbridge
Copy link

@navbar-inverse-color/@navbar-inverse-link-color are both defined as @gray-light. Doesn't this change make the ratio of @navbar-inverse-bg (#222) to @navbar-inverse-color/@navbar-inverse-link-color (now #777) fall below 4.5? Previously it was #999/#222=4.5, but changing it to #777/#222 lowers the ratio to 3.5, making inverse navbars less readable. Either the @navbar-inverse colors need to be lightened, or @navbar-inverse-bg-color needs to be lowered to #1a1a1a to compensate for this change.

@cvrebert cvrebert mentioned this issue Aug 8, 2014
Closed
@cvrebert
Copy link
Collaborator

cvrebert commented Aug 8, 2014

@chrisbainbridge Does #13943 address your concern?

@chrisbainbridge
Copy link

@cvrebert Yes, thank you.

@ziemkowski ziemkowski mentioned this issue Sep 15, 2014
Closed
stempler pushed a commit to stempler/bootstrap that referenced this issue Nov 4, 2014
@ssorallen
(less) Darken @Gray-Light to meet accessibility guidelines
efc44cc 
`@gray-light` darkens from twbs#999 to twbs#777, which puts `.text-muted` at the
threshold for the 4.5:1 WCAG minimum contrast[1]. twbs#777:#fff is 4.48:1.

The “Example” headers in docs become #959595, which is contrast ratio
3:1, the minimum for larger text. Since the headers are less important
than the surrounding text, 3:1 is fine and an improvement on the
previous #bbb:#fff (1.92:1).

Fixes issue twbs#13847.

[1] http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
css
Projects
None yet
Milestone
v3.2.0
Development

No branches or pull requests
5 participants
@ssorallen @mdo @cvrebert @chrisbainbridge @BBosman