An Accessible Color Scheme for Bootstrap Buttons

A while ago while doing an accessibility review of a site I was working on, I realized that the button styles I was using, which I imported from Bootstrap 3, were failing my accessibility checker. The default colors of the primary, default, and warning buttons all fall short of the 4.5:1 contrast ratio required for WCAG 2.0 specs.

At first, I assumed I just didn’t have the latest version of bootstrap, but after searching around I found a post on bootstrap’s Github page, which essentially said they aren’t interested in changing their design to accommodate at this time. Disheartening to see from a big company/framework, but not to be deterred, I headed over to Google. I assumed I could find some neat little CSS classes someone had created, and continue my day. I found a post from Scott Galloway on Codepen that I thought was perfect, but when I ran it by my coworker for review, he pointed out that if someone was color-blind (as he was), it was really difficult to determine which button was which:

Screenshot showing bootstrap buttons with simulated color-blindness

Out of easier options, I took a shot at it myself. Working with some of my coworkers, I came up with some requirements we had for the buttons:

  1. Pass WCAG 2.0 Guidelines
  2. Work well for common color-blind variants
  3. Maintained the look and feel of the Bootstrap

A common recommendation was making a custom color palette and changing them completely. Our issue with that solution was that the buttons were part of a custom CMS, and if you’ve never worked on a CMS, users tend to get unhappy when you drastically change their designs without warning. Because of this, the last point of maintaining the look and feel was important. In a perfect world, we could change the buttons without anyone noticing.

Here is a demo of what we came up with

(The trick was to invert the hover/active color to have a white background and colored text, otherwise making the info and warning buttons dark enough to pass accessibility made them either hard to differentiate, or just plain ugly.)

It worked! We swapped the styles out in our custom CMS and have never received a complaint from our users about the change, and can feel good that the buttons now pass accessibility. I figured there may be some other developer out there right now looking for the same thing and threw it on Github. Hopefully, it can save someone a little bit of time and make their site more accessible.

(On a side note, yes, my site has some accessibility issues, it’s on the to-do list, my only excuse is I made the theme about 5 years ago, and am just getting back into writing here.)

 

Bootstrap Icon Search Update

So my  site bootstrapicons.com has been up for a little while, and like all things, there have been some things that I have noticed that could be improved. I also have received some great feedback (Thank you!) that I wanted to incorporate into the system. So, I have been working really hard on it lately (okay so maybe “really hard” is relative, but I spent a few night drinking red wine and tinkering with it) and have a new release. Feel free to head over to http://bootstrapicons.com  and check out the changes.

Here is a little list of the new features:

  • Added support for bootstrap 3.0.2 icons
  • Added support for font awesome 4.0.3 icons
  • Updated the search to use tabs that allow all sets to be search without reentering the search terms
  • Added a tag index page
  • Smoothed out some of the design
  • Did some housekeeping on the tag approval/admin side

Introducing Bootstrap Icon Search

I really love the bootstrap front-end framework, and one of my favorite things about it is that it comes with a great icon set. The biggest issue I have with it is that the class names to call those icons are not always either easy to remember or accurate for how I use them. For example, I like to use the icon-envelope as an icon on any systems that has a messaging system. Every time I have gone do use it however, I struggle to remember what the name of the  @%#$ icon class is!! It got to the point that I just kept a paper printout at my desk. That seemed like a bad way to do it, so I created a website that allows you so search the icons based on “tags” that are submitted by users. That way, I will be able to find my message icon, and hopefully, some other people will be able to as well. You can find the site at http://bootstrapicons.com – the more people that use it and submit tags, the better it will function, so please take a look and let me know what you think!