Copy & paste the code below to embed this comment.
Leslie Jensen-Inman
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.
Copy & paste the code below to embed this comment.
hash_token
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:
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)
Copy & paste the code below to embed this comment.
David Leader
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.
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..
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?
Copy & paste the code below to embed this comment.
rmaenza
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.
33 Reader Comments
Back to the Articlesaracannon
Thanks for this article! I’ve been trying to find a site like http://graybit.com/ for a while! Excellent post. -sara cannon
Leslie Jensen-Inman
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.
margapierre
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.
traxor
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.
hash_token
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:
I hope you find it helpful. I sure have.
kurtis
Fujitsu’s “Color Doctor”:http://www.fujitsu.com/global/accessibility/assistance/cd/ also works very well. Alas, it is only available for Windows.
GarrettW
I’m pretty sure “Deuteronomy” is a book of the Bible, not a variant of colorblindness. ;)
Leslie Jensen-Inman
@GarrettW
Nice catch. Looks like Microsoft Word hid an Easter Egg in the article on the last spell check Passover.
David Leader
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/.
Peter Cook
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”
Jan Tonellato
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.
ChrisDigital
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.
gmazzocato
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.
Clea Walford
Great article, Leslie. I always thought that color is important, but that contrast might be even more important.
sbxwebdesigner
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
dotvolution
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.
adamfullerdesign
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?
rmaenza
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
maneet puri
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.
Frank Communications
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!
Work With Color
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.
B2B Marcomms
Contrast is very effective for radiance in objects and controlling bleeds too, overall it isnt used as well as it should be.
Saç kaynak
i like CheckMyColours.com also thank you for share other useful links to.