btn-secondary-outline appears disabled
Closed this issue · 9 comments
Sorry if it's been mentioned already, but the normal state of btn-secondary-outline looks disabled.
For reference: below are the current button text/border contrast ratios:
- Primary: 4.6
- Secondary: 1.6
- Success: 2.5
- Warning: 1.9
- Danger: 4
CC: @patrickhlauke as this also touches on accessibility
Those contrast ratios are against a white background, but the button background is actually set to transparent in the mixin.
Edit, with another test:
Against a #000 background:
- Primary: 4.5
- Secondary: 13.1
- Success: 8.5
- Warning: 10.8
- Danger: 5.3
but then again, our very own examples in the docs are against white background...
not much that can be done here unless we make an assumption that most devs will use it against a light/white background, and darken those accordingly (which then makes them worse against any darker backgrounds) or we add a general note somewhere about devs needing to check their contrast ratios.
@patrickhlauke we could (though lot's of work) make unique colors for light or dark backgrounds and apply them via a mixin similar to http://thesassway.com/intermediate/dynamically-change-text-color-based-on-its-background-with-sass
While that's text color, the concept is the same. Just look at $body-bg which we have for the body background color
My thought would be to darken the secondary gray slightly to make its contrast more similar to the others.
Toggling light/dark colors may be more work than it's worth. And you would still have issues when someone chooses a background color similar to a button color.
The buttons may not always be on the body as well, so using $body-bg might not be the most helpful. My vote would be to 1) Use $gray-dark instead of $btn-secondary-border to adjust the example contrast in the docs and 2) add an a11y callout.
Ironically the disabled button is more contrasted with color: #373A3C compared to #CCC. Something like #8C8C8C for color/border would look better.
I Suggest The Darken The Secondary Button And Increase The Border - radius and The Change The Border-color of Warning To These Value - #D50000