6 Ways To Design Accessible Websites For Users With Colorblindness and Low Vision

Considering that the internet experience is predominantly visual, one of the first steps designers can make toward designing more inclusive websites is by ensuring that a website meets the contrast and color requirements. According to the Web Content Accessibility Guidelines (WCAG) requirements, an accessible website should be perceivable, operable, understandable, and robust. Designing websites that prioritize contrast and color accessibility allows them to be experienced by those with mild visual impairments, like color blindness and low vision. 

While some milestones have made strides to make the internet more inclusive, 98% of websites remain inaccessible to people with visual, auditory, cognitive, and physical disabilities. By prioritizing color and contrast accessibility in your design, you’re taking a crucial step in your journey to make your business more accessible for everyone. Compliance with the web accessibility guidelines can help your website achieve higher engagement, connect with more subscribers, and establish a new pipeline of customers. Color and contrast accessibility is just a stepping stone, but it’s a great place to start making your user design more inclusive. Here are six ways to design accessible websites for color blindness and low vision users. 

What are mild to severe visual impairments?

By prioritizing color and contrast accessibility in design, a website will be accessible to users with mild visual impairments. The two visual impairments that make poor color and contrast design challenging are color blindness and low vision. 

Colorblindness and user experience

Color blindness is when cones in the retina are missing or inefficient, making it difficult to differentiate between colors, or sometimes, uninterpretable. Color blindness can complicate how a user experiences a website’s features, especially one that is not compliant with WCAG requirements. Even though color-blind users may be able to see an image or graphic on a website, if it is not compliant with color and contrast requirements, it may be stressful or impossible for users to get information from images without captions or color-coded graphics (i.e., bar charts, graphs, maps, Venn diagrams). 

Red-Green Colorblindness

Red-green color blindness is when the red and green cones in the retina are working inefficiently or missing altogether. Red-green color blindness can be classified as protanomaly, a primary red deficiency, or deuteranomaly, a primary green deficiency. 

• Deuteranopia: Deficiency with green cone pigments or known as green-blind. 
• Protanopia: Deficiency with red cone pigments or known as red-blind. 

Blue-Yellow Colorblindness

Blue-yellow color blindness is when the blue cones in the retina are working inefficiently or missing altogether. Blue-yellow color blindness is known as tritanomaly, a primary blue deficiency. 

• Tritanopia: Deficiency with blue cone pigments or known as blue-blind. 

Complete Color Blindness

Complete color blindness is when there is no detectable cone function in the retina. Total color blindness, also known as monochromacy or achromatopsia, is a rare disorder when a person only sees in greyscale. 

Low vision and user experience 

Low vision is an umbrella term for visual disabilities that cannot be solved with glasses, surgery, or medication. It makes it difficult to do everyday tasks like reading, driving, recognizing faces or facial features, and distinguishing content clearly on screens. 

Central vision loss 

Central vision loss is the inability to see things in the center of one’s vision and see one or more dark or blurry spots. 

Peripheral vision loss

Peripheral vision loss is when someone sees gaps in the corners of their sight and can only see clearly what’s directly in front of them. 

Night blindness

Night blindness is the inability to see in the dark or low light. 

Blurry or hazy vision

Blurry or hazy vision is the inability to focus on objects sharply and, instead, see things with a glare or film. 

People with low vision may struggle with one or a combination of the issues listed above, making it difficult to use web pages that aren’t accessible. Web pages with small text and images, poor contrast, improper headers, and images without captions or alt text are inaccessible features that complicate users' experience with low vision disabilities. 

6 Ways to Design More Accessible Websites 

1. Review your webpage alongside the Web Content Accessibility Guidelines 
   1. Level A: the most basic Web accessibility features;
   2. Level AA: the most common barriers for disabled people;
   3. Level AAA: the highest level of accessibility.
2. Use descriptive and appropriate header text in descending order (H1, H2, H3, etc.)
3. Enable font adjustment features on your website
4. Provide alternative text for images & non-text content 
5. Design in greyscale and evaluate webpages with a color contrast checker
6. Use semantic (HTML) markup to improve the user experience of assistive technology, such as screen readers and closed captioning. 

Even if color-blind and low vision users aren’t your current customer base, it’s almost sure that they’re part of your audience or sales funnel. Accessible websites aren’t just about making a sale but aligning you and your business with inclusive practices that make everyone’s life easier. 

Be sure to follow the Tragic Media for more blogs on web design, accessibility, and best practices in the design industry! If you want more resources on how to build accessible websites for users with disabilities, check out: 

• Web accessibility for visual impairments
• Improve Accessibility for Users Who are Visually Impaired with These 9 Tips
• Web Content Accessibility Guidelines (WCAG) Overview
• How to Build a User-Friendly Website for the Visually Impaired in 2021