Welcome!

Think Labs is an ongoing effort by Seven2 to provide research and educational opportunities in the web development and mobile field. To see what we’ve been cookin’ up, check out our blog postings.

Created by
Seven2 Login

Categories
Tags
Team Think Labs | Stayin’ ‘Rasty with Color Contrast Ratios
4216
single,single-post,postid-4216,single-format-standard,ajax_fade,page_not_loaded,,,wpb-js-composer js-comp-ver-4.2.3,vc_responsive
Radiant Space Badger brings knowledge of Color Contrast to you.

Stayin’ ‘Rasty with Color Contrast Ratios

The concept of color contrast is something anyone in the design industry is familiar with. Our eyes automatically tell us whether two colors contrast or not and, especially as designers, we use that knowledge while making artistic color choices. What some may not know is that there have been specific guidelines and standards: WCAG (Web Content Accessibility Guidelines), set in place by the W3C (World Wide Web Consortium), that determine what is acceptable color contrast.

WHY DOES IT MATTER?

These standards are primarily set in place to ensure web accessibility for people with Color Blindness. Although it is rare for someone to have no color perception at all, more people than you may think experience some form of limited color perception. It’s rare in women and Non-Caucasians, but it affects 8% of Caucasian men. Even someone you may know and love might be Color Blind…

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

Mitch, a color blind man who is still an amazing artist.

 

 

COLOR CONTRAST RATIOS

Color Contrast Ratios are numeric representations of the contrast of two colors. For example 21:1, which is the maximum value of black vs white. The higher the first number, the higher the contrast.

Examples of Color Contrast Ratios

How the heck do I figure that number out, you ask? You don’t. You use one of the many handy Color Contrast Analyzers people have made just for you.
These analyzers use magic algorithms to analyze hex values to determine the ratio of two colors.

Here are some examples of analyzers:
http://webaim.org/resources/contrastchecker/
http://leaverou.github.io/contrast-ratio/

It’s pretty cool to think that there is this layer of mathematic sorcery that relates to what our eyes perceives!
WHAT EXACTLY ARE THE GUIDELINES?

There are basically two levels of W3C compliance, AA and AAA. AA is the minimum and AAA is an enhanced version. The level you choose to adhere to depends on your target audience.

AA requires a contrast ratio of 4.5:1 for normal text and 3:1 for large text.
AAA requires a contrast ratio of 7:1 for normal text and 4.5:1 for large text.

The guidelines seem to mainly refer to the contrast of text over background colors, but can be considered for any other important visual elements as well. More detailed info can be found here on the W3C Site, under guideline 1.4: http://www.w3.org/TR/WCAG20/

Some brands may have their own accessibility guidelines, for example, AT&T has their own minimum of 2.4:1.
THANKS FOR READING

Hopefully this has been somewhat enlightening to at least a couple people. It’s always important to know what WCAG guidelines you are responsible for, whether on a Brand level or W3C. Color Contrast Ratios are a good thing to be aware of, even if you don’t need to check the contrast of all the text in your designs. Our eyes usually do a good enough job, but you can always check your colors to be more confident in your choices.

 

Link Farm:
Lea Verou’s Color Contrast Ratio Tool:
http://leaverou.github.io/contrast-ratio/
http://lea.verou.me/2012/10/easy-color-contrast-ratios/

Simple Color Contrast analyzers:
http://webaim.org/resources/contrastchecker/

http://www.colorsontheweb.com/colorcontrast.asp

Want to know a little, but still too much, about how eye’s see color?
http://www.w3.org/Graphics/atypical-color-response