Web Design: Accommodating Colour-Blind Browsers
Our free service allows you to instantly get quotes for colour blind friendly websites, (with no-obligation) by filling out just one simple form. We carefully hand-pick our suppliers, which saves you hours of searching. Whatever your web design requirements, fill in the simple form above to receive quotes from top web design companies in your area.
Get free quotes from UK web designers
Without colour we would live a dull existence. Imagine gazing into a grey sky or devouring a colourless chocolate cake? In the same manner that colour bears great significance in our daily lives, so too does colour play an important if not crucial role when designing a website. Colour enhances, completes and gives a much needed presence to the image or persona of a website.
Yet, there are browsers who are not able to view the world in full-blown colour…
Approximately 8% of males and 0.5% of females have a deficit in their colour vision, due to an inherited abnormality in the cone cells of the retina. It’s unwise not to take these browsers into account as their special needs could mean that 1 out of 20 visitors might not be able to use a website at all or with great difficulty. This greatly depends on whether the website in question is “colour-blind friendly”. Text might be illegible and images unrecognizable. Consider the amount of visitors and customer conversions that you might lose if your website is not accessible and usable by the colourblind.
It is seen is considered professional, and stands your company in good stead to establish a website that doesn't exclude the impaired or disabled. After all, an accessible website is more likely to be ranked well with the search engines than an inaccessible website.
There are three different colour vision impairments to take into consideration.
colour is essentially perceived because a light particle, or photon, triggers a cell in the eye which is called a cone. The cone sends a signal to the brain that it has received a trigger. Each kind of cone is responsible for sensing a range of wavelength thus centering on red, green, or blue. Combinations of these cones fire at different intensities to produce the spectrum of colours in various degrees of brightness and saturation. Sometimes the instructions for the cones are "wired" abnormally, causing the cones to react to a different range of light. Ninety-nine percent of colour-blind people have trouble distinguishing between red and green.
- Trichromat Vision:"normal" colour vision, uses red/green/blue colour receptors ... this is the kind of vision that 11 out of 12 visitors have.
- Anomalous Trichromat Vision: Anomalous Trichromat vision, uses three colour receptors but one pigment is misaligned
- Protanomaly Vision: reduced colour red sensitivity
- Deuteranomaly Vision (common): reduced colour green sensitivity
- Tritanomaly Vision: reduced colour blue sensitivity
- Dichromat Vision: Dichromat vision, uses only 2 of the 3 visual pigments - red, green or blue is missing.
- Protanopia Vision: unable to view colour red.
- Deuteranopia Vision: unable to view colour green.
- Tritanopia Vision: unable to view colour blue.
- Monochromat Vision: (able to see only one colour)
This unpredictability makes it hard to simulate the colour blind browser. However, there are ways and means to ‘get around’ these limitations.
Designing for colour-blind browsers
Although designing a website for the colourblind will not limit your colour palette, you’ll need to be wary of the colour combinations that you use. Learning what colour combinations not effective is a great place to start.
As a rule of thumb, do away with Red and Green Combinations. Although most people see Red and Green as contrasting, those with Anomalous Trichromat Vision colourblindness will not be able to tell these colours apart. This also goes for combinations with variations of green and red, including colours such as purple and orange.
- It is essential to establish the most important content. The more important the content, the more important it is to make these items “colour-blind friendly”.
- Navigational text which includes image and button text, menus, headers, and sub-headers need to be clear. Make sure that these items are very high in contrast. This means that you should either make these items black and white or opposite ends of the colour saturation pole.
- When using large format pieces of copy, using dark text on a white background is absolutely essential. Use as much colour as you want in the surrounding parts of the page, as long as it doesn't take away from the contrast of the text.
- If you aren't sure if a page is contrasted enough, desaturate your website in Fireworks or Adobe Photoshop and see if the images still have an impact. Desaturating the image will remove all the colour from the image and this way you will be able to tell if the image has enough contrast without colour to be seen.
- When a dichromatic person sees something green, both the red and green cones are activated. Since red and green make yellow, green objects appear yellow. A site that contains green text on a yellow background causes both the text and the background to appear yellow, making the text invisible. A dichromatic person with green cones shifted toward the red will also see the green as more yellow.
- Use Vischeck online which also allows you to see what a design would look like to someone who is colour blind. Either run Vischeck on your own image files or on a web page. The Web Design Evaluation Tool is also a free online utility that allows you to see the 3 different ways that your page can look depending on the viewer's vision and colour disability.
colour-blind browsers form a huge part of the global community and therefore should be taken into consideration when designing a website.
