Clik here to view.
Quick, easy contrast ratios. Image: Screenshot/Webmonkey.
Making websites accessible to users with disabilities — things like poor vision, blindness, limited dexterity — has been central to the mission of the web’s overseers since the dawn of the browser.
Following accessibility guidelines actually helps just about everyone, especially when it comes to making your site readable. And one of the cornerstones of accessibility is making sure your background and text colors have proper contrast ratio. But how do you know what’s a proper contrast ratio? For that turn to WCAG 2.0, a set of accessibility guidelines that most government and many private sector websites adhere to.
Unfortunately, while the W3C has plenty of guidelines for building the web, it’s not in the business of creating tools to go with them, which means bringing the guidelines into the real world can sometimes be a hassle. That’s why developer Lea Verou built this awesome contrast ratio tool. Verou works for the W3C (though the tool is not an official W3C project) and needed a way to ensure that her color choices passed WCAG muster. That’s exactly what the contrast ratio tool does: give it any form of CSS color — hex, rgb(), rgba(), hsla(), etc — and it will automatically calculate the contrast ratio and let you know which level of the WCAG guidelines your contrast meets.
Verou’s contrast calculator even accepts semi-transparent colors for sites using overlays. To make the semi-transparent colors work Verou had to write her own algorithm. For semi-transparent backgrounds, the WCAG contrast ratio is presented with an error margin, since the actual contrast can vary depending on what’s under your semi-transparent overlay.
The contrast ratio tool supports all modern browsers and has “basic support for IE9.” The code is available on GitHub.
Also worth noting is Verou’s blog post on accessibility and contrast ratios. Like many of us, Verou “used to think that WCAG-mandated contrast ratios were too restrictive and basically tried to force you to use black and white.” The truth is, as Verou writes, “in practice, I found that in most cases they are very reasonable: When a color combination doesn’t pass WCAG, it usually is hard to read.”
