Design Match logo

The Colour Blind Test and Tools to Improve Website Design

Read this blog to know the colour blind tests and tools to improve website design for people with different vision abilities.

The Colour Blind Test and Tools to Improve Website Design cover

Millions of people around the world are affected by colour blindness or achromatopsia, a condition that makes it difficult for the eye to see certain colors. Due to science, the colour blind test has been developed to help identify color blindness.

Scientists have developed accessibility instruments like color-blind glasses and lenses to help a colorblind person live a normal life. And accessibility tools also extend to digital products. Scientists and developers have come up with simulation tests and software to improve website design for colorblind people.

Photographer: Helena Lopes

What are the causes of colour blindness?

There are several causes of color blindness. But the usual cause is genetics. This means that parents pass down the color blindness gene. If your color blindness is genetic, your color vision will not get any better or worse over time.

You can also be colorblind later in life if you have a disease or injury that affects your eye or brain. Color blindness happens if your eye or the part of your brain that helps you see color gets damaged.

How to check for colorblindness or achromatopsia?

There are several online color blind tests available to check for achromatopsia. These are some of the few:

Ishihara Test

A color vision test, or the Ishihara test, measures your ability to tell the difference between colors. The Ishihara color blindness test is the most common color blindness test. It consists of a number of dishes called the Ishihara plates, each with a different image made up of dots in different colors. If you fail the Ishihara test, you will fail to see the Ishihara color (red-green color blindness).

Farnsworth-Munsell 100 Hue Test

Eye doctors use the Farnsworth Munsell 100 Hue Test to evaluate color vision for more than 50 years. It evaluates the extent to which your color vision can discern between specific colors and slight hue variations within a given color.

It is more detailed than the Ishihara test. And consists of arranging different colored disks in order from lightest to darkest. If you have color vision deficiency, you will have trouble seeing the difference between some of the colors.

EnChroma Colour Blind Test

The EnChroma Colour Blindness Test is a free online test that uses a series of images to assess color vision. The test is designed to work with any type of color blindness, including deuteranopia (red-green), protanopia (red-green), and tritanopia (blue-yellow).

The EnChroma test is based on the Ishihara color “hidden digit” test method developed by Professor Shinobu Ishihara at the University of Tokyo and is combined with a computer-adaptive algorithm to measure the level and type of color vision deficiency (CVD). It is available in a numbers mode for adults and children ages 10+ and a shape mode for kids ages 5+. So you can start checking the color vision deficiency at age 5.

the colour blind test
Photographer: Nicolas Hoizey

Red-Green Color Blind Test

There is also a specific test for red-green color blindness. And it is the most common type of color blindness. The test consists of a series of images with different colored dots to determine red-green color blindness. Failure to see the red-green color on the image will identify a color vision deficiency for the red-green color.

Mosaic Color Blind Test

The mosaic test is a test specifically for blue-yellow color blindness. It consists of four dishes, each with an image made up of dots in different colors. The results of the tests will determine the colorblindness of a person to the color blue-yellow. A colorblind person cannot distinguish the blue-yellow image in the tests.

D15 Color Blind Test

The D15 Color Blind Test is a test specifically for blue-green color blindness. It consists of 15 dishes, each with an image made up of dots in different colors. The D15 Color Blind Testing will identify a person with blue-green color blindness.

Pseudoisochromatic Plate (PIP) Colour Blind Test

The pseudoisochromatic plate (PIP) color vision test is a test that can be used to test for any type of color blindness. In this test, printed pseudoisochromatic plates are used to check for color vision deficiency or its severity. The principle is that the color of a target (digit or letter) embedded in a background of another color appears “falsely of the same color” to color-deficient people.

the colour blind test
Photographer: Joyce McCown

What are the usual problems color-blind people experience when using websites?

There are many usual challenges for people who experience color-blindness when using websites. These include:

  • Text that is difficult to read because the colors do not contrast well
  • The image on the website is difficult to see because the shades do not contrast well
  • The eye can’t see the buttons and links because of the lack of color contrast.
  • Videos are difficult to see
  • A form on the website is challenging to fill out

How to improve website design for people with color blindness?

Use high-contrast color schemes

Many contrasting color schemes are exciting and sometimes even aesthetically pleasing to look at. But contrasting colors serve an additional purpose: user accessibility.

high contrast color schemes
Photographer: Jeremy Bezanger

Avoid using color as the only means of conveying information

Relying on color alone to communicate information causes barriers to access for many readers: colorblind and low vision users may not be able to perceive the color differences, and screen readers do not announce colors to non-sighted readers.

Use accessible color palette tools

A few tools can help you choose colors that are accessible to people with color blindness. These tools include the Color Safe Palette Generator and the WebAIM Color Contrast Checker.

How do you use accessibility tools to improve website design?

There are a few accessibility tools that can be used to improve website design for people who are color blind.

Color Oracle

Color Oracle is a software program that simulates the effects of different types of color blindness. It is a free color blindness simulator for Windows, Mac, and Linux. It takes the guesswork out of designing for color blindness by showing you in real time what people with common color vision impairments will see.

ChromeLens

ChromeLens is a free Chrome extension that simulates different types of color blindness. It is a quick and easy way to test web pages for color blindness accessibility.

NoCoffee Vision Simulator

No Coffee Vision Simulator is a free Chrome extension that simulates different vision impairments. It puts a filter over your web page that shows how a user with diabetic retinopathy, low contrast sensitivity, or several other vision problems might see it.

WebAIM Colour Blindness Test

The WebAIM Color Contrast Checker allows the user to enter the hex value for each color. Users can select a color using the color picker widget (specific functionality varies by browser). And the checker calculates the contrast ratio and rates the colors with a “Pass” or “Fail” rating.

accessibility tools to improve website
Photographer: Tran Mau Tri Tam ✪

Conclusion

There are many common problems that color-blind individuals experience when using websites. These can be overcome by using high-contrast color schemes, avoiding using color as the only means of conveying information, and using accessible color palette tools.

Many contrasting color schemes are attractive. And sometimes even aesthetically pleasing to look at. But they serve an additional purpose: user accessibility. Therefore when designing a website, it is essential that designers base their interface on accessibility so that everyone can enjoy the site, regardless of their color vision. Accessible design allows everyone to get the value of your online presence.

WORKSHOP

Why your Design Sucks

(and how to fix it)

Watch Now

Get Design Tips

Get design tips for your startup straight to your inbox by subscribing. Join our community!