search

dobtco / dvl-core

Base styles for the DOBT View Layer.
https://design.dobt.co/
1 stars 1 forks source link

Button contrast #137

Closed ajb closed 9 years ago

ajb commented 9 years ago

Closes #135

So Bourbon's button mixin a) is deprecated, and b) checks the "lightness" of a color and uses it to set the text size. Here's what our current colors look like when used with the Bourbon button mixin: http://take.ms/SpJ9X

It's also worth noting that both Foundation and Bootstrap's button colors do not pass WCAG AA. They're both around a 2.5 contrast ratio, and it's a problem that they've had trouble solving in the past. Oh, and Primer's buttons are just as bad, too.

My preference is to take a pragmatic approach, and try to improve the contrast ratio of our success & error colors when used as a background for white text. I admittedly have not tried making all button text dark, but this is because I just don't think it looks good. In this PR, you'll find updated an updated $successColor and $errorColor that achieve a 3.5 and a 4.8 contrast ratio w/ white text, respectively. The success color won't pass WCAG AA since our default font size is 16px, not the 18px required for a 3.5 ratio to be acceptible. But that said, this gets us to a point where we're way better than two of the most widely-used frameworks out there.

You'll also note that I refactored most of the code in buttons.scss, so you'll want to inspect and test closely. It's working fine AFAICT.

You might also want to tweak the colors that I picked. I didn't use much discretion besides "let me just pick something that's a darker than the current one".

jrubenoff commented 9 years ago

This looks alright. You'll need to update any repo which uses the button_color mixin (Screendoor, and maybe others?) before merging this in.