Category Archives: Web

Color Blindness Simulation in Short Films

Carlos Hernandez Matas created in 2011 three short films demonstrating the three main forms of color blindness: Deuteranopia, Protanopia and Tritanopia. There are many simulators for color blindness available online. One of them can be found right here on Colblindor: Coblis — Color Blindness Simulator.

Carlos explaines how he did those videos:

This is a program that retrieves images from a live video feed or from a video file stored in a drive and performs in real-time a color transformation to show how the video would be seen by one of the three kinds of dichromat color blind people. In this video, it’s shown the transformation for people with tritanopia.

Deuteranopia

Protanopia

Tritanopia

More information can be found on his website at carlos.hernandez.im.

Testing Color Vision Online

Dr. Terrace L. Waggoner is a well known optometrist and researcher when it comes to color vision and color deficiency testing. He developed different tests mostly based on pseudoisochromatic plates and has an online appearance at Colorblind Home Page, which has a lot of very useful information concerning color blindness.

During the last year his son T.J. Waggoner started an online color vision testing possibilty together with his father. This test of course is based on the research done by Dr. Waggoner and consists of a set of pseudoisochromatic test plates. I had the possibilty to take this online color vision deficiency test and would like to give you some insights into the test and as well I would like to share my thougths about it with you.

Discount code «colblindor»: get 20% off at www.Testing Color Vision.com!

I already reported about this new online test possibilty at Online Pseudoisochromatic Plates Color Vision Test. Since then they made some major improvements on the test and it can give you some more detailed results on your actual color vision deficiency type and severity.

So first about the test itself: It consists of four different parts, starting with a general color blindness test the second to fourth part are related to the three different main types of color vision deficiency: Protan defects, deutan defects and tritan defects. Each part has a set of pseudoisochromatic plates (the circle pictures with the dots) with some “hidden” numbers. Now what you have to do is:

  1. Have a look at the plate (you’ll get only 2 seconds to do that).
  2. Choose on the answer page, which number you have seen. Or choose nothing, if you haven’t seen anything at all.
  3. Press Next and you’ll be shown the next plate.
Test Result

At the end of the test you’ll get a result sheet which shows your correct and wrong answers for each section. On the right side you can see my personal test result.

As you can see, the four different parts are shown each seperately. I haven’t seen a lot — nothting new to me — but what I like is the extra feedback that according to this test result I’m a Severe Protan (Red-Blind), which correlates with all my other results perfectly.

Are this test results reliable?

At this point it is getting a bit more complicated. Can you believe in this result? Does it tell you the truth? Or is it just another unreliable online color vision test?

Unfortunately nobody can tell you the truth at this point. It is still very well known, that if you want to get to most precise result, you have to check your vision specialist and take an anomoloscope color vision test — the golden standard when it comes to color blindness testing.

But this new possibilty could get closer and closer to a very good result. Of course you shouldn’t cheat, but I can tell you it’s not easy (if you don’t have somebody besided you which tells your the right answer) and you would only cheat yourself anyway.

There are no academic results around yet for this new test. This always takes quite a long time. But some studies have started, it looks like if the FAA has also a look into it and some other studies try to find out if this could be a new possibilty for color vision deficiency testing.

If you would like to try out this new online color blindness test at www.Testing Color Vision.com just use my discount code «colblindor» and you’ll get 20% off!

I now that displays are differently calibrated and therefore you can get different test result while using different computers or electronic devices. But are those differences not getting smaller and smaller? And are vision specialists not as well a little bit error-prone? Which is better? — What do you think…

Designing Accessible Color Spectrums

Joshua Tauberer wrote a nice post about how you can take color blindness into account while choosing a new color scheme.

Based on the confusion lines of the CIE 1931 color space he made a transformation into the CIE LAB color space. In this space equal distances in the color space represent equal amounts of perceptual distance. It’s nice to see that the confusion lines which emanate from a single point in CIE 1931 are in the CIE LAP space represented by parallel lines.

The arrows in the graphic below don’t show the confusion axis but paths that go perpendicular to the confusion lines which will have maximal perceptible differences for a specific type of color vision deficiency.

Protan Spectrum Lines in CIE LAB – from razor.occams.info

There are some more nice graphics included in the article and even some code which can be used to generate those. Visit the original article at Designing accessible color spectrums.

Unfortunately I think it is still not that easy for non-colorblind people to choose good colors which are distinguishable even for the strongly color blind among us. But if you stick to less colors with large brightness differences you are always on the better side.

We are colorblind.com

Tom van Beveren from the Netherlands put together a very comprehensive site on all sorts of stuff people should know, if they want to build/design a website which doesn’t exclude colorblind visitors. Because almost 5% of all people are suffering from some form of color vision deficiency, this is something every web publisher should care about.

we are colorblind
wearecolorblind.com

The site We are colorblind.com includes a lot of very interesting topics related to color blindness on the web. It is structured as follows:

Patterns for the Color Blind: A list of very useful patterns you can follow while you’re designing your web content. If you follow those patterns, colorblind people will definitely find their way around on your page.

Quick Tips: This section provides supportive information for all the patterns from the above mentioned list. If you dig into the quick tips you’ll learn more on how color blind people see the world and how you can use this information.

Color vision and web Tools: Hopefully this is an ever growing list of great tools to help you while you are building your web site or just on your way through the web.

Good and bad online Examples: The examples section gives a good overview of good solutions, which help people with color vision deficiency. The list also includes bad examples; web sites unusable by color blind visitors.

If you think about building a new web page, redesign your site or get your online content ready for colorblind visitors, make sure you visit wearecolorblind.com and follow the tips and patterns provided by Tom.

Tom: Really great work! Thanks.

Colorblind Unaware Colorchoice

As I switched my domain to color-blindness.com a few weeks ago, I lost my Google PageRank. While waiting for the next PageRank update I came across the LousigerBlick blog and had quite some problems deciphering it. This is definitely a good example of a colorblind unaware colorchoice.

Below you can see an actual screenshot of its design. Because of my almost red-blindness I have great difficulties in reading the normal text which is in a dark gray tone (is that right?). Links and titles which are white are no problem to distinguish from the background color, but when hovering over the links in a first glance they look like as if they would disappear as they are also turning gray.

LousigerBlick Blog

Before you release your design ask yourself if you did a color blindness check, used a colorblind web page filter or made a color contrast analysis. There are many tools available to check your choice of colors; don’t wait; do it now if you didn’t do it before.

Designing with Colors

Designing your weblog or homepage is already quite a challenge. When suffering from color blindness this gets an even bigger task.

Mark Boulton started the series Five Simple Steps to designing with color where he digs into color theory and tries to give some hints how to design your web page using colors correctly.

For me, as one of the colorblind individuals among us, already the first part includes the bottom line: Begin with Gray. When I designed Colblindor I had in mind to show what it means to be colorblind and therefore I worked with colors. But when I think about this now it could be even better starting with gray tones – and maybe even stick to them. This would make it definitely readable to all the colorblind visitors and I wouldn’t have the problem not to see it like others see it.

Maybe this will be the next big thing to do: Go back to basics. But maybe Mark shows us some more interesting tips in the next steps so I’ll stick around to see what I can do to make my weblog more readable to all visitors.

Colorcell – The Most Beautiful Color Combinations

Colorcell wants to find the most beautiful color combinations. I came across this project today through Picto’s entry about The terrible fashion curse. He talks about a wardrobe of a colorblind and how four colors are enough to choose from. Colorcell.org is about choosing the nicest color combination made out of four colors.

What can you do:

  • Create a new colorcell out of four colors.
  • Choose your favourite colorcell in the so called livingspace which can hold at most 100 living cells.
  • Kill your cell, which is also called the suicide option.

If you select a cell the fitness of this cell is increased. Based on the fitness a cell will live longer in the livingspace. But take care, if a cell gets selected to often it will die because of overfeeding.

Every day there is a whole process going on in the livingspace. Cells are aging, some are dying and get burried in the cell cemetery and some cells, most likely the ones with a higher fitness, can crossover and give birth to a new cell.

This project is running since 25th March 2002 and there is a whole load of statistics to look at. If you want to compete with my cell, go to colorcell and create your own most beautiful color combination.

Related articles:
Color Schemes Generator 2
Choosing the Right Colors
A Colorblind decides on Colors

Direct link to the Colorcell Project.

Color Charts

You found a color which you would like to use on your web site but don’t know if it is purple or blue? Or this picture shows some nice details, but are they just brown or shiny red?

For somebody affected by color blindness colors can often not be named like a fork or a spoon but usually are guessed. So you are never sure if it is brown, green or red, you just guess and let yourself be overruled by somebody who knows it better.

What to do if you would like to know the names? In nature it is impossible as long as there are no special glasses which can label the colors you see… But on computers, where colors are always built up from values it is easy to label them. Unfortunately it is not often used and color names associated to the color values like RGB are a rare commodity.

The people behind the Colorblind web site at Telodo Bend did a great job. It offers a comprehensive list of colors with heximal and decimal values and most import including the according color names. The following charts are offered:

So if you want to build a new web site and would like to use some special colors, this is a great resource to check for specific color names and their corresponding color values.

Related articles:
Microsoft knows about Color Blindness
Choosing the Right Colors
Perfect Pitch and Color Blindness

Web Design for the Colorblind

If you are interested in web design and wonder how you can design a web site taking into account that one out of twelve persons is colorblind, you have to read this well researched article.

How to Design Web Accessible Pages for the ColorBlind

Rachel starts with a short and comprehensive overview on color blindness and heads afterwards into some details about how to design web sites for colorblind users. On top of that she ends with a large link list pointing to other sources on the topic and tools for web site designers. — Well done.

Update: It looks like the site went inactive just this weekend! I only realised after writing this article, that the weblog wasn’t updated for quite a long time. At the moment the article is still available through Google cache here.

Related articles:
Web Site Accessibility
Color Contrast Analyser
Colorblind Web Page Filter
Simulating Color Blind Vision

Web Site Accessibility

ClearFlite Air Purifiers improved the accessibility of their web site. According to the news ClearFlite Air Purifiers Announces W3C Compliant Visually Impaired Web Site the company just released a new Accessible section on their site designed for people not only with severe visual impairment but also for those affected by color blindness.

Visiting their site including the Accessible section and speaking from a colorblind point of view I would like to share some universally valid conclusions.

  • Defective Color Vision ≠ Visual Impairment
    Don’t lump together people affected by color blindness and people with a severe visual impairment. A color vision deficiency doesn’t conclude poor eyesight. Therefore there is no sense in putting up a page written in large letters and suppose that somebody affected by color blindness makes use of it.
  • Design your Main Sites Colorblind Friendly
    If you want to improve the accessibility for people affected by color blindness think about redesigning your main site. Remember approximately every tenth men has some kind of color blindness and choosing some colorblind friendly color combinations usually doesn’t hurt that much.
  • Point out your Efforts
    There is no reason why you shouldn’t point out to all visitors that you made some special efforts to improve the accessibility of your site. People appreciate it, the one’s who can make use of it can easily find and understand your efforts and with all other’s you will score well.

Think about these points when you have plans improving the accessibility of your web site.

Related articles:
Colorblind Web Page Filter
Simulating Colorblind Vision
Choosing the Right Colors

Direct link to the news article: ClearFlite Air Purifiers Announces W3C Compliant Visually Impaired Web Site