Remember thrusting your hand into a big pail of mixed-up, broken crayons (or gently reaching for your box of perfectly ordered, mint-condition crayons), then leafing through your construction paper to find the perfect hue to go with your chosen sticks of pigmented wax? Or, did you hunt for the perfect piece of construction paper first, then search for the ideal crayons to go with the paper? No matter how tidy you kept your supplies or in what order you chose them, even at a young age we searched for correct color combinations. “Correct” was something different to each of us, but it often meant finding the right contrast between the background (construction paper) and the foreground (crayons) so our work would stand out among our classmates’ masterpieces.
From a very young age we understand that color affects our lives. However, as children we don’t know that people experience color in different ways. As children, we might not understand the term “colorblind” and even for an adult it’s hard to comprehend that color still affects people who are 100% colorblind—those who can only see in shades of gray. People who are colorblind are affected differently than people who can experience the full-color spectrum.
Contrast—the secret sauce#section2
Contrast is the perceived difference in colors that are in close proximity to each other. Using contrast effectively not only differentiates your design from others, it’s the essential ingredient that makes content accessible to every viewer. People who are fully colorblind, those with specific types of colorblindness, and people with low-vision need to access content on the web. As designers, we must ensure that every viewer is able to perceive content on the sites we create. What’s more, we don’t have to limit ourselves to the high contrast combination of black and white. We can embrace our big pail of colors and create websites that unabashedly employ color with appropriate contrast.
Black and white#section3
Today, designers are more aware of color choice ramifications. Many businesses, organizations, and institutions follow rules of accessibility, requiring designers to make color decisions based on contrast. This has created a greater need and desire to test for color contrast. A variety of tools and resources help meet this need, and a great way to determine the best fit for your workflow is to take some time to experience the tools for yourself.
Every designer has a different workflow, but research is often one of the first stages of the design process. One way to guarantee that design effectively uses contrast is to evaluate your layout in grayscale. To evaluate a live website’s contrast, you can use a tool such as graybit.com that converts existing websites to grayscale. Use graybit.com to research some of your favorite websites and test out your sites, as well. Ask yourself the following questions: Can you read the text? Do the visual elements retain their hierarchy? Take note of what works well when you view the websites in color and what stops working well when you view these sites in grayscale.
Fig 1. InterACT website in full-color.
Fig 2. The InterACT website in grayscale.
The images above show the full-color InterACT website and the grayscale rendition created by graybit.com. The content is still readable even in grayscale. This site was designed first in grayscale and then translated into color. If you can make a solid design in black, white, and shades of gray, it will often allow you to translate your design to almost any color combination—as long as that color combination maintains the same level of contrast between the visual elements. Create your sketches and roughs in black and white and then create comps in grayscale. This workflow not only allows your mind to stay focused on the hierarchy of elements on the page, preventing you from getting hung up on color choices, it also helps you to create a design that uses proper contrast.
To evaluate a website’s contrast while it’s still in the design stage, use an image manipulation tool, such as Photoshop, and view the design in grayscale versus RGB. If you would like to view the design you’re working on and even see your entire desktop including all of your applications in grayscale you can use Nocturne, which is an application that allows viewers to have additional control over their screens for viewing in low light situations. Use Nocturne to get a quick sense of how the contrast of your design is developing. Compare this image of my desktop that includes a photo that has strong golds, reds, and blues and the standard color swatch palette from Photoshop versus the image as seen in grayscale using Nocturne.
Fig 3. Full-color view of desktop.
Fig 4. Viewing desktop in grayscale using Nocturne.
For extra credit, try designing using color while viewing what you design in grayscale. When you’re finished, turn off Nocturne and examine what you created. Note the color combinations that work well. Why do they work? I venture to guess that good contrast is the answer.
Passed with flying colors#section4
Once you’ve tried designing in grayscale and are ready to move onto the color stage, there are many tools that can help you choose a proper color palette. Color Scheme Designer is one of my favorites. This tool provides a lot of control and options to help you choose a color palette without making the process overwhelming. It can also simulate how people with various types of colorblindness will interpret your color scheme. You can export palettes in a number of different formats; this makes it an easy and efficient tool to add to your workflow. If you are not colorblind, these simulations can educate you on how a person who has a specific kind of colorblindness interprets color. The following images show how Color Scheme Designer simulates the many ways people see color including: normal vision; Deuteranopia (green-blind); Deuteranomaly (green weak); and full colorblindness.
Fig 5. Color Scheme Designer simulating normal vision.
Fig 6. Color Scheme Designer simulating Deuteranopia.
Fig 7. Color Scheme Designer simulating Deuteranomaly.
Fig 8. Color Scheme Designer simulating full colorblindness.
Visit colblindor.com to learn more about specific types of colorblindness. Coblis”“Color Blindness Simulator can also help you to get a better sense of how some viewers might see your work. This tool allows you to upload an image and view it as if you had different types of colorblindness. For example, you can use this tool to compare how people with normal color vision, Protanopia (red-blind), Tritanopia (blue-blind), and Blue Cone Monochromacy (almost completely color blind) would see an image of colored pencils. You’ll begin to understand how each person experiences color differently and why contrast becomes an important ingredient in creating readable design.
Fig 9. Normal color vision.
Fig 10. Protanopia (red-blind).
Fig 11. Tritanopia (blue-blind).
Fig 12. Blue Cone Monochromacy (almost completely colorblind).
Shades of gray#section5
Websites that use contrast help every viewer to comprehend content more proficiently. Checkmycolors.com is an easy-to-use contrast-analysis tool. Just type a URL into the field, click “Check” and checkmycolors.com provides an extremely thorough analysis of the website’s various color combinations. It checks for contrast ratio, brightness difference, and color difference. It creates a chart that shows the website’s foreground and background color values and samples of how the foreground and background appear on the site. A word of caution—most websites have many “failures.”
Fig 13. Failing the checkmycolors.com test.
The only site I tested that did not have any “failures” was checkmycolours.com.
Fig 14. Passing the checkmycolors.com test.
Check your sites when you’re ready to see a whole bunch of red/X boxes and the word “failures.” If your site passes, congratulations—you just might be a color contrast expert.
Even though it can be a little disheartening to see how many color combinations create poor color contrast, we can use these tools to gain insight on where we need to make revisions. These tools can help us to make educated decisions about where we need to make contrast concessions for the sake of design. If a design element has no bearing on the readability of the main content does creating high color contrast matter? Maybe not. You might reason that the most important aspect of many websites is the content, and as long as the design does not get in the way of the content then maybe all viewers do not need to see every aspect of the design.
Fig 15. Link color at InterACT.
Fig 16. Hover state of the link.
Fig 17. Grayscale link at InterACT.
Fig 18. Grayscale hover state of the link.
On the other hand, there are aspects of websites that are important for visitors to recognize. For example, it is important for visitors to easily understand when they are hovering over a link. Visual cues are critical when creating differentiation between link states; however, color contrast is not the only way to clearly show these states. Link states can have visual characteristics that do not require the visitor to rely solely on color to determine the current state. If you add visual cues to show the various link states, color contrast becomes less of an issue. For example, InterACT’s website creates visual distinction between link states by changing the color and adding an underline to the hover state. The underline ensures that even in grayscale people can see the difference between states.
Each designer must determine the balance between design and readability—a decision often made easier when considering the target audience and the purpose of the website. The resources listed here are just a few of the many color and contrast tools available on the web; this is not a definitive list. The specific tools are not as important as making sure you include appropriate color contrast as part of your process. This will allow viewers, no matter how they interpret colors, to read and enjoy your website. Just as choosing the correct color combinations when you were a child would help your picture stand out in a sea of your classmates’ work, choosing correct color combinations when you design a website will allow your site to stand out on the web.
http://colorfilter.wickline.org/
http://www.w3.org/WAI/WCAG20/quickref/#visual-audio-contrast
the checkmycolors.com is just check the css not the way human see the page I think
I love that line
bq. Each designer must determine the balance between design and readability—a decision often made easier when considering the target audience and the purpose of the website.
Isn’t everything easier when you consider the target and purpose while creating?
thanks.
…but the W3 WAI site (http://www.w3.org/WAI/) scores < 4%. Gotta love it.
I’ve been using the OS X based tool “Sim Daltonism”:http://michelf.com/projects/sim-daltonism/ for years. It’s a dead simple app but allows you to see 10 levels of varying color blindness live.
“aDesigner”:http://www.eclipse.org/actf/downloads/tools/aDesigner/index.php is another tool which can be used to test how your pages look to people with different levels of colour blindness.
Thank you very much for this article. I’ve long been aware that I should have colour-blindness in mind when picking schemes but I always thought that meant just choosing distinct colours. But browsing around the sites you listed it has become obvious that is not how it works at all.
Colour Scheme Designer in particular is a gem.
Thanks
Nicely put Leslie. Those pictures demonstrate what i usually try to tell my designer friends. Color is indeed important of course. But contrast is much more important. Just like adding alt tags for blind people, you should check how your web site seems in every way.
If the site is burning my eyes, then there indeed is something wrong with the contrast 🙂
http://www.CheckMyColours.com is a well intentioned site with potential, but it seems like it is still a young site; I tested a site design where all of the content was wrapped in a white-background div and it said everything was unreadable.
Thanks for this article! I’ve been trying to find a site like http://graybit.com/ for a while! Excellent post. -sara cannon
Thanks to everyone for posting additional tools! It’s great to check out what other people use. I look forward to delving into them further.
@David Rodriguez
I find everything to be easier when considering target and purpose while creating but it turns out not everyone thinks this way (who knew?). So I find myself stating it”¦ just in case.
@Stargazer
Of course, these tools are _just_ tools. They are ways to help guide us while reminding us that contrast needs to be considered when making design decisions. It’s ultimately up to us to make sure that we use the tools responsibly and in ways that make sense within our process.
Color is indeed important specially for children, that’s the way on how can they can show their expressions. Through drawing and coloring, they can draw what they want.
As a colour-blind website designer, I think it’s important to understand that colour-blindness is much more prevalent than a lot of people think. It’s great to see that articles are popping up on websites as credible as this one.
I’m not sitting on my high-horse by posting on here, I just think it’s a really great thing.
Just in case anyone is interested, I’m colour blind to green stuff. Fortunately, it’s only helped me. There aren’t many green websites out there that are effectice, so I don’t have to worry about that; plus, green clothes aren’t the nicest thing in the world. Though it does annoy my girlfriend when she asks me to try on something that she insists is green but I see as some sort of vile mustard colour.
Anyway, I digress. Thank you for the wonderful article.
I been using “Colour Contrast Analyser”:http://www.wat-c.org/tools/CCA/1.1/index.html (CCA).
This used to be available only for Windows, though I believe there is a “Mac version”:http://www.paciellogroup.com/resources/contrast-analyser.html#macdownload now available as well as a “Firefox plug-in”:http://juicystudio.com/article/colour-contrast-analyser-firefox-extension.php .
A description:
bq. It is primarily a tool for checking foreground & background colour combinations to determine if they provide good colour visibility. It also contains functionality to create simulations of certain visual conditions such as colour blindness.
Determining “colour visibility” is based on two sets of algorithms: Luminosity Contrast Ratio and Colour Difference and Brightness Difference, suggested by the World Wide Web Consortium (W3C)
I hope you find it helpful. I sure have.
Fujitsu’s “Color Doctor”:http://www.fujitsu.com/global/accessibility/assistance/cd/ also works very well. Alas, it is only available for Windows.
I’m pretty sure “Deuteronomy” is a book of the Bible, not a variant of colorblindness. 😉
@GarrettW
Nice catch. Looks like Microsoft Word hid an Easter Egg in the article on the last spell check Passover.
Long overdue article – well done! I design some scientific sites where the users are predominantly male and the information is often colour-coded. It amazes me that other similar sites don’t check combinations in relation to colour-blindness. I tend to use the Vischeck free Photoshop plugin: http://www.vischeck.com/downloads/.
Because many people believe that “colorblind” means only able to see gray, a term I’ve found that is more descriptive is “color vision deficiency” or just “color deficiency”
I’m a little bit surprised you talk only about colour-contrast.
I consider contrast should be considered from a widely larger point of view.
Example:
you talk about the InterACT website: we know orange and light blue turn to the same level of grey when “monocromized”. So, if you want to target visually impaired audience or low-fi devices (B/W printers or viewers) you should avoid it “a priori”. In your case, the logo and the main title “Connecting Education & Industry” have a very low visibility (Fig. 2). Is it a good design?
Links have a very low visibility too (fig. 16). Why don’t underline the normal link state rather than the :hover?
Why don’t improve the contrast between links and text thanks to shape too, not only colour?
Generally speaking, a good interface approach should distinguish main content and interaction elements from decoration and possibly 2nd level content.
A good contrast is provided by shape, positioning (layout), size and colour.
An excellent example of it is the International Swiss Style (from 70ies, so nothing really new).
I’m sorry but I agree Checkmycolors.com is based on css only so not really useful.
This is really well timed for me, I had someone comment on my blog recently they were having a hard time reading it because the text and a background pattern were competing. I adjusted it this past weekend, but next time I’ll have some more tools to reference due to this article. This also a bit of trial and error I suppose, since subtle issues can appear from display to display. Thanks again.
You should remember that the contrast of colors used in a page
is a matter discussed in the WCAG (web content accessibility guidelines) by the w3c.
An online tool that helps meeting those accessibility
requirements is my “accessibility color wheel”:http://gmazzocato.altervista.org/colorwheel/wheel.php
It checks by standard algorithms whether a color pair has good contrast and simulates various types of color deficiencies.
Great article, Leslie. I always thought that color is important, but that contrast might be even more important.
using same color could really be annoying and difficult to differentiate which is important and which is not.. and thus the best solution is to use contrast color to highlight the important thing to the user… thanks for sharing this..
Steve
I think there may have been an issue with greybit.com when I tested it with my website “www.dotvolution.com.(Website design)”:http://www.dotvolution.com
I put my url in there and the whole site was just white. That isn’t possible to have made such a huge error in the design. I think it was probably just a bug.
Interesting read! Perhaps I am intuitive on this particular aspect of design because I’ve never really thought about contrast or contrast at least in this context. I’ve also rarely had a client tell me to make something pop more or tell me certain elements looked washed out.
Is it normal for most designs to make a big deal out of this?
I love your blog, it really helps spell out what differences and difficulties there can be with the way a designer views the same thing. Keep them coming. mainstreethost.com
Thanks aDesigner for sharing another tool. However, knowing this fact that people having colorblindness interpret colors in their own way will help me focus more on choosing colors and setting contrast for them.
Designers often find themselves in a conflict between aesthetics and usability; people always quote Jakob Nielsen but his own website is hardly lovely to look at?! I feel, contrast can play a huge part in usability effectiveness BUT it is also a great tool for designers on the basis of aesthetics if used sensibly. It’s the opposite of a double edged sword… if you get what I mean!
Our “color picker”:http://www.workwithcolor.com/hsl-color-picker-01.htm calculates the (relative) luminance of a color through which one knows upfront the amount of contrast between two colors. This can save you from having to start over, which can happen if you check for contrast at the end of the design process.
P.S.: We use an individual approach to calculate what we define as the luminance of colors.
Contrast is very effective for radiance in objects and controlling bleeds too, overall it isnt used as well as it should be.
i like CheckMyColours.com also thank you for share other useful links to.