Color Contrast Ratio

If you are choosing colors for a website, how do you know if they meet accessibility standards? Color-blindness is fairly common and should be taken into consideration in your design.

Recently, Wired had this to say on the subject

Making the web accessible to everyone has been central to the mission of the W3C since the dawn of the browser. Accessibility guidelines abound, but sadly, easy to use tools are less common. Developer Lea Verou’s new color contrast ratio tool changes that by giving developers a simple way to test their color schemes and create more readable websites — and that benefits everyone on the web.

The W3C guidelines for contrast recommend at least a 3:1 ratio for readability (more like 4.5:1) and has three levels of general accessibility conformance: A, AA, or AAA. The more contrast, the easier it is to read – for everybody.

Black and white have a color contrast of 21:1 and gets a AAA rating for any sized text. This blue has a color contrast of 3.7:1 and gets a AA rating for large text (defined as above 18pt or bold above 14pt). This orange has a color contrast of 3.8:1 and also gets a AA rating for large text. This green, however, has a color contrast of 2.4:1 and fails the test.