Website Design Guide for Color Blind (2023)

Look closely. What number does the circle of dots represent? While all unaffected individuals would see the number "74", those suffering from color blindness might see the number "21", or even nothing at all. You can take your test here to find out if you are also suffering from the condition.

4.5% of the population are color-blind, according to Colour Blind Awareness. If males make up most of your audience, the percentage soars up to 8%. Since most designers are not color-blind, it’s not uncommon for them to overlook the design needs of the affected. While color-blindness comes in various shades, it generally boils down to the inability to differentiate between certain colors, getting colors mixed up, or not seeing colors clearly. When it comes to the web, this problem could be aggravated by the environments people use websites in. This includes sitting far away from a television screen, tiny mobile screens, screen glare, and low-quality monitors among other factors.

Accessibility in web design is already making big waves, since it is indispensable to cater to the needs of this wide demographic, who could potentially experience varying degrees of difficulty using your website if not designed the right way. Solely relying on color for affordance and readability makes it difficult for a color blind person to use the website, ultimately compromising sales and readership. This article covers some useful tips to help designers solve a plethora of dilemmas color-blind people experience when using websites.

Website Design Guide for Color Blind (1)

Types of Color Blindness

1.Protanopia and (red deficiencies)

According to webAIM, in the eyes of individuals suffering from Protanopia, the cones or the color receptors are not sensitive to long wavelengths (the reds). To these people, reds seem darker than the actual hues and appear more beige like. Shades of green are often confused with reds.

2.Deuteranopia and deuteranomaly (green deficiencies)

According to Colormax, cones in the eyes of people with Deuteranopia are insensitive to greens and the sufferers mainly perceive hues of blue and yellow. While the condition is more or less similar to Protanopia, reds do not look as dark in this affliction.

3.Tritanopia (blue deficiencies)

Tritanopia is marked by the absence of blue cones in the eyes of the sufferers. In general greens and blues can be confused in this condition, and yellows appear as lighter shades of red or disappear altogether.

Website Design Guide for Color Blind (2)

(Video) Understanding color blindness issues in web design

Guidelines for Designing a Better UX for Color Blind Users

These UX Design Tips to Maximize Conversion Rate would help you design a better web experience for your color blind audience and facilitate ease of use for them:

1.Color Combinations to Avoid

Some color combinations are especially hard on color blind individuals and thus should be omitted from your designs. The site wearecolorblind.com offers plenty of insights for designing with the color blind in mind and has deemed several color combinations unsuitable for these individuals, including Green & Black, Green & Grey, Blue & Grey, Light Green & Yellow, Green & Blue, Blue & Purple, Green & Brown, and Green & Red.

Website Design Guide for Color Blind (3)

2.Make it monochrome

One of the most definite ways of avoiding issues stemming from color blindness is to employ multiple shades of a single color rather than using multiple colors in your design. After all, minimalism is the new sexy, isn’t it? Colors having too similar a hue or having the same temperature are hard to tell apart. Nobody’s asking you to create a black and white website but viewing your website in greyscale mode helps you envisage how it would appear to your color-blind audience. Google Maps accomplishes it perfectly as it uses colors of different hues, in addition to using green for no traffic and red for busy, to allow color blind people to see the differences.

Website Design Guide for Color Blind (4)

3.Use High Contrast

Color blind people are able to perceive differences in brightness, saturation, and hue, as well as contrast. Web designers can leverage this to their advantage, since a plethora of people afflicted with this condition fare better with bright colors than dim ones which have a tendency to blur into one another. For instance, the game Word Feud only uses those colors for its tiles which are easy to distinguish for individuals with color deficiencies. Go MediaZine has a good article replete with examples on good and bad contrast.

Website Design Guide for Color Blind (5)

4.Use thicker lines

Website Design Guide for Color Blind (6)

(Video) HOW TO USE COLORS IN WEB DESIGN: Free Web Design Course | Episode 7

People with a mild case of color blindness are often able to see a color if there’s ample “mass” of it. Therefore, a less than sufficient thin line of color won’t show up as the right color to them. Even better, it’s more prudent to use texture instead. Especially in infographics and maps, texture can be used in addition to color to distinguish between myriad objects. For instance, if we run the image above on the vischeck simulator, a Protanope or a Deuteranope would easily interpret it.

Website Design Guide for Color Blind (7)

5.Use both colors and symbols

WCAG 1.0, WCAG 2.0, and Section 508 all stress upon the fact that color shouldn't be the sole medium to convey information. According to Section 508 , Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup."

Color shouldn’t be relied upon to convey a message, for instance, color blindness may impair a person’s ability to decipher common red error messages, such as "watch out", "warning", and "bad". As a good measure, designers should add in symbolic elements in addition to color-coded text to get the point across to a diverse audience and capture their attention. The error messages attached to Facebook's form fields are great examples of this technique.

Website Design Guide for Color Blind (8)

In addition, color-coded text can be supplemented with descriptive text to help such individuals make sense of the text. Gap is one such brand which solves the problem of using color to portray myriad options available in a product by adding a text label beside each color.

Website Design Guide for Color Blind (9)

Color filter with labels is easy to use, especially as seen by someone with protanopia. This helps individuals with normal vision as well, since some colors such as navy blue and black are hard to tell apart on a screen. Adding text labels makes it hassle free to differentiate similar looking colors and takes the guesswork out of it.

(Video) 60-30-10 Color Rule

Similarly, often primary buttons are presented with color alone. Instead, consider leveraging icons, borders, contrast, boldness, placement, and size, within the confines of your brand guidelines, to help detection. For instance, Kidly uses iconography, color, and size to accentuate its primary buttons.

Website Design Guide for Color Blind (10)

Another option to identify interactive elements is to wean off color and introduce some other visual change between their different states. For instance, while we are accustomed to buttons that change colour on hover, buttons with borders fare better, such as above. Changing the appearance of buttons make them stand out and shows users which elements are interactive.

Website Design Guide for Color Blind (11)

6.Modifying Brightness, Saturation, Hue

Similar to altering contrast, tweaking the brightness, saturation, and hue of colors allows designers to show definition and help end-users differentiate between various elements without using a plethora of different colors. By using one color, or even a small set of colors, changing either the hue, brightness, or saturation can reveal a distinguishing contrast within samples of the same color. This technique lets designers incorporate color throughout their designs as if adding a new color to the mix each time, without compromising the aesthetics. Each sample of the color is then perceived by the color-blind visitors as a different looking part of the design. For instance, we started out with the same color below but turning up the hue a notch produced the color on the right.

Website Design Guide for Color Blind (12)

7.Easy to Spot Links

Links on a web page should be easy to spot for everyone, including your color blind audience. Thus relying on color alone is not the best option.

The screenshot of the UK Government Digital Service (GDS) website above shows how someone with achromatopsia (the inability to see color at all) might be left scratching their heads when trying to find links on a web page. The only way left for these users is to hover with their mouse at every word, waiting to see if the cursor would indeed change to a pointer. This becomes even more difficult on mobile as they have to resort to tapping on text to make a page request. Links should be underlined, or even better incorporate icons, to ease navigation.

(Video) Colorblind Guide | FREE Online Courses for Colorblind People | Children/Parents Course

Website Design Guide for Color Blind (13)

8.Problematic Colors shouldn’t be Used Side-By-Side

Depending on the type of color-blindness, a lot of original problematic colors are automatically replaced by other hues. That is, for Protanopes or Deuteranopes, greens and reds become brownish, with greens being a tad lighter than reds. For Tritanopes, blues appear lighter and yellows appear pinkish.

Now imagine a scenario where you have picked exactly these colors for your design’s color theme, namely blue, pink, yellow or brown, green, red, and then placing such colors side by side would inadvertently create a "blending effect", with greens or reds melting into shades of grey or brown, and the greys and browns retaining their original colors.

Even worse, if such colors are combined by themselves as the color of background and superimposing text, or in graphs to convey information, it would be the height of reckless design decision. When designing for a color-blind audience specifically in mind, not using such problematic colors is the best option.

Conclusion

Designing for the colorblind is not often a bed of roses for designers who aren't colorblind themselves, and thus cannot actually comprehend the struggles of their less fortunate end-users. However, designing for the color blind audience in mind is indispensable now a days as color blindness doesn’t only affect a handful of people but actually a dilemma plethora of your end users have to contend with day after day.

Web designers should strive their utmost to take the needs of these visitors as best as they could. Even if color is capitalized on, it shouldn’t be a problem in terms of aesthetics or readability when used in conjunction with a well-organized layout. However, an important question remains: How can designers take accessibility into account when they cannot fully comprehend the condition at hand?

Fortunately, web is replete with myriad accessibility "simulators" where your web page is rendered in a certain way so that you can literally put yourself in the shoes of your color blind audience and view the webpage from their perspective so that you can identify problematic areas and tweak accordingly. For instance, "Colorblind Web Page Filter" filters your web pages as if viewed from the eyes of a color blind person, Color Oracle is a color blindness simulator for Linux, Mac, and Window, applying a full screen color filter to your designs, while Check My Colors gives feedback on an existing website, pointing out areas that can be improved. Such Simulators can help designers make informed design decisions and make UX pleasurable to use for people suffering from the condition.

FAQs

What is the key to designing sites that are accessible to people who are color blind? ›

For people who are color blind, proper color contrast is essential. This is especially true for color combinations like red/green, red/black, or blue/yellow. Without enough color contrast between two different colored elements, people who are color blind may not be able to distinguish between the two.

What is the best color to use for color blindness? ›

Use a colorblind-friendly palette when appropriate

For example, blue/orange is a common colorblind-friendly palette. Blue/red or blue/brown would also work. For the most common conditions of CVD, all of these work well, since blue would generally look blue to someone with CVD.

What Colours do colour-blind people struggle with? ›

Most people with colour vision deficiency have difficulty distinguishing between shades of red, yellow and green. This is known as "red-green" colour vision deficiency. It's a common problem that affects around 1 in 12 men and 1 in 200 women.

How do you make a website accessible for people with disabilities? ›

Top 10 Tips for Making Your Website Accessible
  1. Choose a content management system that supports accessibility.
  2. Use headings correctly to organize the structure of your content.
  3. Include proper alt text for images.
  4. Give your links unique and descriptive names.
  5. Use color with care.
  6. Design your forms for accessibility.

How does a blind person navigate a website? ›

They use screen-readers

As you can imagine, blind users do not see the contents of a webpage like sighted users do. Instead they rely on screen readers to read out the content and generally rely on them to navigate the web.

What techniques do blind people use? ›

The white cane helps people who are blind or severely visually impaired know when there are tripping hazards such as cracks, poles, etc. The cane is swept from side to side to clear one's path from these and other obstacles. Other techniques allow us to know when we've reached a crosswalk or the entrance to a room.

What is color blindness and as a designer what precautions we should take while designing? ›

In order to avoid color blindness pitfalls, here are a few handy rules and approaches to consider: Avoid the following color combinations, which are especially hard on color blind people: Green & Red; Green & Brown; Blue & Purple; Green & Blue; Light Green & Yellow; Blue & Grey; Green & Grey; Green & Black.

What color attracts eyes the most? ›

Red and orange seem to be the clear winner when it comes to eye-catching colors. These colors tend to stand out and are therefore used on many warning signs or safety equipment. Yellow is another color that comes in a close second to red and orange in popularity.

What is the weakest color blind? ›

Achromatopsia is extremely rare, occuring only in approximately 1 person in 33,000 and its symptoms can make life very difficult. Usually someone with achromatopsia will need to wear dark glasses inside in normal light conditions.

Do colorblind people have an advantage? ›

Shockingly, being colorblind has its advantages. The University of Edinburgh discovered that individuals with red-green colorblindness are better at seeing camouflage. Color can actually impede our ability to detect patterns and textures.

What jobs can color blind people not do? ›

As it turns out, a number of professional choices can be negatively impacted by a color blindness diagnosis. “Medicine, electricians, pilots, truck drivers, chefs, fashion, and many other occupations where people don't even realize there's a problem,” says Dr.

Is being color blind a disability? ›

Although considered only a minor disability, slightly fewer than 10% of all men suffer some form of colorblindness (also called color deficiency), so this audience is very widespread. Colorblind users are unable to distinguish certain color cues, often red versus green.

What are the 4 principles of web accessibility? ›

There are four main guiding principles of accessibility upon which WCAG has been built. These four principles are known by the acronym POUR for perceivable, operable, understandable and robust. POUR is a way of approaching web accessibility by breaking it down into these four main aspects.

What are the 4 major categories of Web accessibility standards? ›

The Web Content Accessibility Guidelines (WCAG) are organized by four main principles, which state that content must be POUR: Perceivable, Operable, Understandable, and Robust.

What are 3 different requirements to make a website ADA Americans with disabilities Act compliant? ›

WCAG Website Compliance Standards
  • Perceivable - Information and user interface components must be presentable to users in ways they can perceive. ...
  • Operable - User interface components and navigation must be operable. ...
  • Understandable - Information and the operation of user interface must be understandable.
13 Dec 2021

What are the 7 guidelines for a successful Web design? ›

7 rules of good web design
  • #1 Functionality. Every website visitor has some goals and expectations when scanning through a site. ...
  • #2 First impression. ...
  • #3 Site structure. ...
  • #4 Consistency. ...
  • #5 Whitespace. ...
  • #6 Responsiveness. ...
  • #7 Break the rules.
1 Nov 2017

How do I know if my website is blind friendly? ›

5 Quick Ways to Self-check the Accessibility of a Website
  1. Check alt text for images and other non-text content. ...
  2. Check for closed captions and transcripts on videos. ...
  3. Check color contrast. ...
  4. Make sure your site is keyboard-friendly. ...
  5. Make sure your site can be zoomed without loss of content or functionality.
3 Apr 2019

Do all websites need to be accessible to the blind? ›

The Americans with Disabilities Act (ADA) requires certain businesses to make accommodations for people with disabilities. Web content should be accessible to blind users, deaf users and those who must navigate by voice, screen readers or other assistive technologies.

What tool can be used to allow a blind person to browse the Internet? ›

Job Access With Speech (JAWS) allows visually impaired users to browse web pages, read email, and even fill out web forms with ease. Not only is it useful for keyboard-only users, but it can even help blind users navigate with a mouse by spelling out where the user is hovering over.

What is the best technology for blind people? ›

Top 10 Products for People who are Blind
  • LyriQ Text-to-Speech Reader.
  • Victor Reader Stream.
  • ZoomText Fusion Screen Reader – Professional Edition.
  • JAWS Screen Reader – Professional Edition.
  • BrailleNote Touch Plus 32 Plus – Braille Note Taker/Tablet.
  • Focus 40 5G Braille Display.
  • Brailliant BI 40X Braille Display.

What tool is used by blind? ›

Braille. Braille is a system of raised dots that is used by the blind and visually impaired to read and write.

Which is the commonly used software by a visually impaired person? ›

JAWS (Job Access with Speech) for Windows (Standard)

Screen reader that provides speech and braille output for the most popular computer applications. Works with Microsoft Office, Internet Explorer, Firefox, and much more.

What are the two colors which Cannot be recognized by a color blinded person? ›

Red-green color blindness

The most common type of color blindness makes it hard to tell the difference between red and green. There are 4 types of red-green color blindness: Deuteranomaly is the most common type of red-green color blindness.

What are the 4 design principles in color? ›

Effective design centres on four basic principles: contrast, repetition, alignment and proximity. These appear in every design. This article provides a brief overview of the basic principles discussed in this series.

What are some rules for using color in design? ›

What is the 60-30-10 Rule? It's a classic decor rule that helps create a color palette for a space. It states that 60% of the room should be a dominant color, 30% should be the secondary color or texture and the last 10% should be an accent.

Does color blindness get worse with age? ›

Color blindness can also happen because of damage to your eye or your brain. And color vision may get worse as you get older — often because of cataracts (cloudy areas in the lens of the eye).

What is the luckiest eye color? ›

While hazel was the most popular eye colour to receive a “like”, it only beat purple eyes - which aren't naturally possible - by a single match.
...
Hazel is the most attractive eye colour in females.
Eye ColourTotal MatchesFemale - %
Hazel6520.19%
Purple6419.88%
Black5717.70%
Blue5617.39%
3 more rows
12 Oct 2021

What is the rarest eye color? ›

At some point, you've probably wondered what the rarest eye color is. The answer is green, according to the American Academy of Ophthalmology (AAO). Only about 2 percent of the world's population sport this shade. As to why, that answer isn't so simple.

What colors are color blind friendly? ›

The first rule of making a palette for colorblind – avoid combining red and green. So if you're aiming to create a color blind-friendly palette try to use only two basic hues: blue and red (orange and yellow will also fit). The other colors should be made out of these two hues.

Do colorblind people have better vision? ›

Some colorblind people have better night vision. Colorblind people can better distinguish textures and patterns. Colorblind people actually see more details in the whole image. People with color deficiency are distracted less by colors, so they can have better concentration.

Is my website colorblind friendly? ›

To check whether a webpage is usable by people with color blindness: Open the accessibility-testing demo webpage in a new window or tab. Right-click anywhere in the webpage and then select Inspect. Or, press F12 .

How does a blind person access a website? ›

Assistive technology (AT) is a broad term that refers to hardware and software that enable people with disabilities to access technology. For those who are blind, the main AT are screen readers, braille displays, and speech recognition software.

How do you make an app colorblind friendly? ›

Starting Android Lollipop (API 21), Google provides a Color Correction feature for colorblindness: Settings > Accessibility > Color Space Correction. It is definitively a great help. However, as each colorblindness is unique, the configured corrections can help more or less depending on the person.

How does a blind person read a website? ›

They use screen-readers

As you can imagine, blind users do not see the contents of a webpage like sighted users do. Instead they rely on screen readers to read out the content and generally rely on them to navigate the web.

What is a good design rule for colors on a website? ›

According to this rule, 60% of the color used should be the main color, 30% the secondary color, and 10% the accent color. Keep in mind, black and white count as colors, too. Below are some examples of stunning websites that incorporate the 60/30/10 color rule.

What is the best color for website design? ›

And while each color can serve to create a specific feeling or reaction, certain colors are better choices than others for the majority of brands and websites. For example, blue is often considered the safest choice. This is, in part, because it's the most common “favorite” color among the majority of the population.

What colors should you not use together on your website? ›

Here are five color combinations you should reconsider using when designing for the web, and why.
  • Never Use Pure Black (#000000) ...
  • Red and Green Should Never Be Seen. ...
  • Neon Colors. ...
  • Light Colors on White or Detailed Backgrounds. ...
  • Bright Colors with More Bright Colors.

What tools are available to help blind people use the Internet? ›

People who are blind use screen readers, braille displays, and speech recognition software as examples of this technology.
  • Screen Readers. ...
  • Refreshable Braille Displays. ...
  • Speech Recognition Software (Dictation) ...
  • Keyboard Accessibility. ...
  • Pop-ups. ...
  • Clutter on pages and carousels. ...
  • ARIA mishaps. ...
  • Document headings and labeling.
14 Jun 2021

Does Google have a color blind mode? ›

Colorblindly is an Chrome extension that helps developers and designers simulate different types of color blindness. There are 8 different types of color blindness to simulate: Blue Cone Monochromacy. Achromatomaly-Monochromacy.

Are there any blind graphic designers? ›

The thing is, I'm an illustrator and graphic designer, but I'm also a legally blind illustrator and graphic designer. I was born with optic nerve hypoplasia, or ONH, which is essentially the deadening or lack of development of the optic nerve during gestation.

How do blind people use QR codes? ›

The VIP Code Reader app is designed for people who are blind or have low vision and can be used in place of your smart device's camera or other QR reading apps. The app makes a sound as you move your smart device get closer to the QR code location.

How do you describe red yellow blue to a blind person? ›

To describe a color to a blind person, try to use other senses, such as smell, taste, touch, and emotion. For example, have the person hold objects that are typically 1 color, like grass and leaves, and explain that green feels like the alive part of a plant.

Videos

1. Can a Colorblind Person Become an Architect? Full Guide for Colorblind architects and designers
(Colorblind Expert)
2. Complete Layout Guide
(Flux Academy)
3. colorwill.org - COLORBLIND GUIDE - Professional Course For Artists
(Colorblind Expert)
4. Introduction of ColorBlind Guide Online Courses
(Colorblind Expert)
5. Accessible Color Standards - Designing in the Browser
(Google Chrome Developers)
6. How to make an accessible brand color palette
(Verô)
Top Articles
Latest Posts
Article information

Author: Jonah Leffler

Last Updated: 01/23/2023

Views: 6504

Rating: 4.4 / 5 (45 voted)

Reviews: 84% of readers found this page helpful

Author information

Name: Jonah Leffler

Birthday: 1997-10-27

Address: 8987 Kieth Ports, Luettgenland, CT 54657-9808

Phone: +2611128251586

Job: Mining Supervisor

Hobby: Worldbuilding, Electronics, Amateur radio, Skiing, Cycling, Jogging, Taxidermy

Introduction: My name is Jonah Leffler, I am a determined, faithful, outstanding, inexpensive, cheerful, determined, smiling person who loves writing and wants to share my knowledge and understanding with you.