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

Secondary muted text too similar to primary text #14621

Closed
ziemkowski opened this issue Sep 15, 2014 · 1 comment
Closed

Secondary muted text too similar to primary text #14621

ziemkowski opened this issue Sep 15, 2014 · 1 comment
Labels

Comments

@ziemkowski
Copy link

Bootstrap 3.2 changed the muted text from #999 to #777 in response to issue #13847. Subsequently, the input placeholders have been reverted back to #999 as part of issue #14107 and the nav bars were changed due to the weakened contrast between the new darker secondary color and the primary color, in issue #13943.

The same issues that lead to the the other items being reverted apply to other text still at the darker #777 value as the contrast ratio between the default primary color and secondary color is now a mere 2.82:1, which can be tricky to notice even for an average user in certain viewing conditions.

The previous #999 value had an ideal contrast ratio to the default primary of 4.43:1.

While I appreciate and value the accessibility support in Bootstrap, I feel that this change has made it harder for the average user. At the same time, users who need higher contrast can force this upon all websites using their operating system's enhanced contrast settings.

My developers complained about it, and they almost never notice tweaks to the interface, so I`d expect a number of customer complaints and issues when deployed to production.

Please consider rolling back the changes in issue #13847.

Just compare these before/after shots to see how striking the change is:

Placeholders can easily be confused as regular values and the help text now looks similar to regular text:
image image

Dropdown headings are less obvious:
image image

Disabled options aren't as clearly disabled, especially if the item has padding that separates it from primary active text:
image image

While not as difficult to distinguish primary to secondary, the headline secondary text still presents a problem of not clearly separating the content... the full text of primary and secondary appear more like one phrase with a random text change than as two separate pieces, especially while quickly scanning a page:
image
image

Considering the user's operating system can enhance the contrast for users that require it, is it worth degrading the readability and intuitiveness of the average user? I don't imagine the widgets would be similarly degraded in the name of poor aria property availability.

@cvrebert cvrebert added the css label Sep 15, 2014
@mdo
Copy link
Member

mdo commented Sep 17, 2014

We won't be tweaking this again in v3.

@mdo mdo closed this as completed Sep 17, 2014
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants