Modification to the default bootstrap button color scheme, so that they pass WCAG AA contrast levels
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
files
Gruntfile.js
README.md
index.html
package.json

README.md

Bootstrap Accessible Buttons

Bootstrap is great, but when it comes to accessibility, it falls a little short. Here is a color scheme that maintains the look and feel of bootstrap but passes WCGA 2.0 AA guidelines for accessible colors (4.5:1 contrast ratio).

View Demo

The CSS is pretty self-explanatory, but here are the color codes as well:

Button Colors (Default)

Button Background Color Contrast Ratio
Primary #1b6ec2 #FFF 5.18:1
Default #FFF #333 12.63:1
Success #008000 #FFF 5.14:1
Danger #D50000 #FFF 5.48:1
Warning #f4d03f #000 13.94:1
Info #8cd2e7 #000 12.49:1
Link #FFF #337ab7 4.56:1

Button Colors (Hover/Active)

Button Background Color Contrast Ratio
Primary #1b6ec2 #FFF 5.18:1
Default #EEE #333 10.89:1
Success #FFF #008000 5.14:1
Danger #FFF #D50000 5.48:1
Warning #FFF #8d6708 5.15:1
Info #FFF #217e9b 4.64:1
Link #FFF #2a6496 6.25:1

Sass File

Expanded CSS

Minified CSS