Oct 02, 2012

How can I determine what website colors and contrast are best for readability?

I ran into an issue that I've never had before when designing a website for a client that happened to be colorblind.  When I showed him the prototype, he couldn't read a significant portion of the text that looked perfectly legible to me. I don't know exactly how prevalent color blindness is, but there must be millions of people for whom this is an issue. In this particular case, once I was aware of his colorblindness, I could simply adjust the palate to address it. But more broadly, is there a way to check contrast/color to ensure the widest range of readability?


It is not always to choose the right color and contrast for your website. There are many factors involved in the process. However i usually check on the color matcher for this purpose. When ever there is a problem for me to find the complementary color, i use this tool. Also as a professional, if a client is insisting on creating the site to make it readable for the color blind users, you have to go through all the possibilities. Look at some of the restaurant website designs i have created, it usually have the range of colors that is readable for any user even the color blind ones.



I personally have a mild colorblindness issue, and certainly too much or too little contrast can cause readability issues.  You have to also keep in mind that there are a wide variety of displays, lighting conditions, user settings, etc., so you will never be perfect for 100% of viewers.  Even so, I like to use a tool that measures color and brightness differential.  It's been around for years, so it's not the slickest, but it works.  



This article might be of use:

Tips for Designing for Colorblind Users

"...ust remember that it’s actually really easy to make your site accessible for colorblind users. You only have to put forth a conscious effort where it affects how the site works or when color perception could impair the readability of text. Who cares If you have a brown background that colorblind users think is green? Most of the time, they sure won’t.

Just make sure that when it matters, such as with links, charts and games, you look for ways to add contrast. Use highly contrasting colors colors, implement patterns, apply symbols, and use tricks with strokes, shadows and the like to make sure there is significant visual difference in all the right places. It can often be helpful to use a colorblindness simulator to help decide how the colors on the page affect the overall experience."
Internet MarketingThere are many different types of internet marketing and the one we decided warrants a more in-depth look at is affiliate marketing. First of all, it is the most widespread type of internet marketing out there and it is also the easiest to get into if you are a newbie to the world internet marketing.

As someone who is cursed with color-blindness, this is a question near to my heart.


About 8% of men are color blind to some degree, while it's rare among women (well under 1%), so if you have a popular website, it will be visited every day by people who have problems with some colors. (I have trouble discerning some browns from greens and some blues from purples.)


I found a site for designers called Color Laboratory that "allows you to select colors and see how they appear next to one another, and in various foreground/background combinations." More importantly, it also allows you to "see those colors as they might appear to color-blind users."


Also, this site offers some advice to web designers trying to accommodate the color-challenged.


Thanks for thinking about us, AppDevGuy!



Answer this