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.)

 

Jumping Into Local Development

I realize that I am probably at least a few years behind the curve, but my office is finally switching from working directly on a development server to working locally and using git for version control. The last couple of weeks have been fun, and I am finally able to do some of the things that I have wanted to for a while. I thought I might share a few of things that have been most useful, mostly so my coworkers would have a place to find it all.

iTerm

I develop on a MacBook Pro and decided to use the iTerm terminal replacement program. It certainly isn’t necessary, but the biggest reason I like it is I can open split panes, new tabs, or new windows with ease. This lets me keep my commands and ssh sessions organized, which can be really helpful. You can use Cmd+d to open a new vertical tab,  or Cmd+Shift+d to open a horizontal one. The other feature I  have come to like is copy on select. Regardless of whether you use iTerm or the built in terminal, there are a few other things below you can do to make your command line life a little easier.

.bash_profile

Aliases

The first thing I did add some aliases. If you are not familiar with what an alias is or how they work, there are is a good article here.

The first thing I did was upgrade the “ls” command a little bit:

  •  –G enables colors (This might be platform specific, on my MacBook it was –G but on our server it was –color)
  • -F adds symbols to characterize file types. The most obvious is directories with have a trailing / after them, but it will also mark symbolic links, executable files, and a few  others.
  • -h is probably my favorite, it formats file sizes as human readable, so instead of ‘576’ it will read ‘4.5K’ when displaying file types.

So all together the alias is: alias ls=’ls -GFh’

Sublime provides a fairly robust command line tool called ‘subl’ to make it easier to launch files in sublime, so make that a little shorter I created the following alias:

alias st=’/Applications/Sublime\ Text\ 2.app/Contents/SharedSupport/bin/subl’

I also created some aliases to restart, stop and start my local servers. This saves time if you do something wrong that requires a server reboot. It will vary by your local setup, but for example this restarts my apache and Coldfusion servers:

alias serverrestart='sudo apachectl restart && /Applications/ColdFusion10/cfusion/bin/coldfusion restart'

Git Command Completion

Add this to your .bash_profile to enable git command completion on tab.
source /usr/local/git/contrib/completion/git-completion.bash

Display the git branch and commit status in the command Prompt

#include required libraries
source /usr/local/git/contrib/completion/git-prompt.sh
source /usr/local/git/contrib/completion/git-completion.bash

#enable the commit status
GIT_PS1_SHOWDIRTYSTATE=true
#Display the branch and status to the right of the working directory
export PS1='local: /\W\[\e[0;30m\]$(__git_ps1)\[\e[m\]]\$ '

Do you see the \[\e[0;30m\]? That’s how you see colors in the command prompt, it can be really useful, like setting your remote server to be red so you don’t accidentally delete files from the wrong server. You can learn more here and here.

Adding Some More Color

Git

Based on this excellent article, I added the following to my git config, which makes git color coded and easier to read:

[color]
ui = true
[color]
branch = auto
diff = auto
status = auto
[color "branch"]
current = yellow reverse
local = yellow
remote = green
[color "diff"]
meta = yellow bold
frag = magenta bold
old = red bold
new = green bold
[color "status"]
added = yellow
changed = green
untracked = cyan

Vim

Even if you don’t want to, you will probably end up in vim sooner or later, might as well make it pretty!

Sublime Text 2

After watching  Ben Alman live code at jQuery conference last year, I was very intrigued by sublime text. There are a lot of nice features, but so far I have enjoyed the command line integration and the extensibility the most.

Packages

The first thing to do is set up the excellent package control plug-in. After that, adding new plug-ins is as easy as hitting Cmd+Shift+P. The packages I have found useful, in no particular order:

  • BracketHighlighter
  • Coldfusion
  • Enhanced HTML and Coldfusion
  • HTMLAttributes
  • jQuery
  • SublimeLinter

*A quick note about Coldfusion code completion, it didn’t have camelCasing so I fixed that, you can learn more here.

Multiple Cursors

  • Cmd+Click will add a cursor
  • Cmd+double-click with add entire word as highlighted
  • Cmd+Ctrl+G will select all instances of a word in a document

Snippets

I haven’t had a lot of time to plan with these, but I have found the clips2snippets library useful. It takes exported coda clips and translates them into snippets, although it does seem to be more then a little buggy.

SSH

Switching from the excellent  Coda2, one of the biggies I lost was not having the close terminal integration with the remote server, to fix that I have a few tips:

  1. Set up ssh keys to allow password-less logins
  2. Set up a ssh alias to your test server, that way you don’t have to type the long, and usually obscure, name every time.
  3. Update your remote .bash_profile to mimic your local one, nothing is more frustrating then typing an alias on your local machine only to have it yell at you.
  4. Set a color on the remote server’s command prompt so you always know where to go.

Well I think that’s about it for now, I’m sure as I continue to develop locally I will have more resources, so I will try to update the page as I go along.

Web Editor: WinSCP and Notepad++

I found a new combination for Windows web design/programming that I really like: WinSCP and Notepad++.  I have been a fan of Notepad++ for a long time.  It’s quick, has a ton of features I use (color coding, element matching, auto-complete, supports a ton of file formats, etc.) and all around it just works.  I also really enjoyed the built in FTP synchronizing. When I recently got a new computer with Windows 7 though, I found that the Notepad++ FTP plug-in isn’t available by default.  While trying to figure out how to enable it I found a post talking about the WinSCP/Notepad++ combo, so i gave it a try.

First the setup, it’s really pretty simple.  Just get WinSCP and run the installer.  The do the same for the latest Notepad++ .  After that run WinSCP and connect to a scp/sftp/ftp source.  Go to Options > Preferences > Editors and change whatever extensions you want (.htm, .html, .css, .php, etc) to use Notepad++.

Now whenever I open a file with one of those extensions from WinSCP it automatically opens in Notepad++.  If you modify the file and then save it, the changes will automatically be uploaded to the remote server.  I have been using this setup for about a week and really like it.  having a full features FTP client makes it a lot easier to move around images and other files that I am using on the site, and it integrates just as well with Notepad++ as their old built in plug in.

Overall, while it might not replace Dreamweaver if you are coding all day every day, Notepad++ and WinSCP work great for quick fixes and is usable enough that you won’t go crazy if you need to spend a few hours with it.  And the price is just right: FREE!