Web Accessibility and Color Doesn't Have to Be Grey

For an endless number of excuses, dealing with or even understanding the importance of color to web accessibility can easily fall low on the priority list. However, it's a very important aspect of web accessibility and, actually, not that difficult to understand and adhere to.

There are 2 main parts related to color in WCAG 2.0 Guideline 1.4 - Distinguishable - use of color and contrast.

Use of Color

Use of color is the more straightforward of the two. Most trivially, there shouldn't be text that reads something like "Click the green button below to accept changes" or "Red messages are errors, yellow messages are warnings" anywhere on your site if there's nothing other than color that distinguishes the green button from other buttons or the errors from the warnings.

Contrast

Contrast is where things might seem a little grey, but again, it's quite simple to be compliant...especially with all the available tools. The level AA color contrast ratio is 4.5:1 and 3:1 for large text. The level AAA ratios are 7:1 and 4.5:1. I use the WebAIM color contrast checker to determine contrast ratio.

Still confused about contrast ratios? Let's take a look at Twitter Bootstrap. Let me start by saying Twitter Bootstrap is an awesome framework, and I tell everyone how awesome it is. I don't believe it makes any claim about following WCAG guidelines, so in no way shape or form am I about to criticize it. Some of Twitter Bootstrap's default styles have accessibility issues. Here are some of their ratios:

class/sample	color	background	ratio	pass/fail
.muted	#999999	#ffffff	2.8:1	fail
.text-warning	#C09853	#ffffff	2.7:1	fail
.text-success	#468847	#ffffff	4.3:1	fail (only passes large AA)
.btn-success	#ffffff	#51a351	3.1:1	fail (only passes large AA)
.label-warning	#ffffff	#f89406	2.3:1	fail
.alert	#C09853	#FCF8E3	2.5:1	fail
.alert-info	#3a87ad	#d9edf7	3.3:1	fail (only passes large AA)

Use the NoCoffee vision simulator Chrome extension to see why contrast is important by maximizing the contrast loss. The samples in the table above should be, if legible at all, more difficult to read than the rest of the text on the page. Also, notice how the larger text is much easier to read, which is why the guideline have different ratios for large text.

If you wish to download Twitter Bootstrap and like the default styles, but would like to tweak them so they're accessible, you can customize the download with more accessible colors at http://twitter.github.io/bootstrap/customize.html.

Further Explanation

Check out the newly added color section in the It's Tired in Here web accessibility page.