How Web Designers Can Use Color to Improve Web Accessibility 

Color is a crucial aspect of web design. It can either help or hinder the usability of an entire site to its users. While many web designers are versed in design principles, not every one of them does it with accessibility in mind. 

“People with disabilities must be able to use the web, and can do so when standards bodies, developers and content authors all do their part,” wrote the creator of the World Wide Web, Sir Tim Berners-Lee, for Wired. In the same spirit, here are the basics of what web designers need to know about the use of color to improve web accessibility. 

How Web Designers Can Create Inclusive Design Through Color

Check Your Luminance Contrast Ratio 

Contrast can let users differentiate web page elements. At its core, luminance contrast ratio means the difference of brightness between two colors. This applies to text and its background. Some people who are visually impaired might need a high luminance contrast ratio. They might like to read something such as bright, yellow text on a black background. 

Text that is significant to the user must have a contrast ratio of 4.5:1 (Level AA). This is the minimum unless it is for larger text (3:1). It’s important to mention that there are different levels of conformance depending on the group and situation. Adherence to this specification is a legal requirement. Its legal obligation is important and makes text easier to read for many.

Individuals can use an extremely complicated formula to figure out web page elements or opt to use a contrast tool. The World Health Organization’s most recent data suggests that at least 2.2 billion people worldwide are visually impaired. A small step like this can potentially empower millions of users who want to use your site. 

Let Users Select the Colors of the Site

In addition to creating the World Wide Web, Sir Tim Berners-Lee also created the World Wide Web Consortium (W3) to keep web standards consistent. From this, the Web Content Accessibility Guidelines (WCAG) were born. One of the current guidelines notes that an efficient technique to create good web design is allowing users to pick their own foreground and background. 

Not every person with a disability benefits from the aforementioned luminance contrast ratio. Some may prefer to read low luminance text. For example, people with dyslexia might choose to read dark brown text on a light brown background. Site visitors with autism might forgo a focus on luminance and choose a calm color palette draped in light pinks. Allow users to pick their own CSS colors for their webpage visit through a color picker to curate the happiest experience. 

Be Consistent with Colors 

If a button is dark grey, all buttons should be dark grey. It’s that simple! It might be tempting to match an element to a picture or heading color, but it will confuse the user experience. When paired with a consistent size and shape, it’s much easier to locate an element on a page. 

This goes for every respective element within a website, whether that is for form fields, links, or focus indicators. Apply this rule to every element on a page to help everyone find what they are looking for quickly.  

Consider a Largely Greyscale Theme  

Of course, it’s okay to pop some color into a website. Web design would look extremely homologous if everyone always used the same color scheme. That said, greys simplify a webpage and offer a slew of benefits. 

People that are colorblind often can’t see certain colors or sometimes, colors at all. Since color blindness is extremely common (almost 300 million) it makes sense to create a scheme that looks the same across the board. Heavily relying on hues that are bright and obnoxious and distracts from the overall message of a site and may isolate a large portion of users unnecessarily. 

Use Color to Define Focus States 

Browsers add a pseudo-class of CSS to add contrast around an element that is in action called focus indicators. Like, when a user clicks on an element in a navigation bar or hovers over an input. This usually shows as a blue outline, which web designers might remove. This is a huge mistake! 

Many people with disabilities like focus indicators because it lets them know what part of the page they are on easily. Use apparent color and contrast around the element in focus to leave no doubt about what part of the page a user is interacting with. Try to coordinate it with the rest of the theme when possible.

What Makes a Website Accessible? 

Web accessibility means making something available for everyone to use, including people with physical and mental disabilities. As Internet access is a basic right in the United States, it goes without a doubt to say that web accessibility is beyond important. Web accessibility means that a website is not only usable to everyone but easy to use for everyone too. 

There are plenty of websites that make it difficult for individuals with disabilities to navigate. This can range from checking out on an e-commerce site to avoiding a seizure because of flashing imagery. It’s not too hard to make a website accessible for every person with a disability, so why not do it? Plus, it offers a competitive advantage over other companies with sites that neglect to do this. 

While visual impairments can particularly affect those who use websites, there are other factors that can stop people from using your site easily. These include: 

• Auditory
• Physical
• Cognitive
• Speech
• Neurological

Disabilities aside, there are also situations that can impair people’s ability to use a site. For instance, elderly people may enjoy looking at a larger font size. Individuals with epilepsy may even experience a seizure because of a flashing gif on the site. Think of all the ways that design could impede people from using your site when looking at it as a whole. 

Levels of Web Accessibility 

Just because your site is accessible doesn’t mean that it’s inclusive. There are various levels of accessibility as defined by the Web Content Accessibility Guidelines (WCAG). Creating a website should be more than avoiding a lawsuit, it should be about making your site available for everyone to use. 

Making your site as accessible as possible has a variety of benefits. It turns potential customers into conversions, levels up your SEO advantage over competitors, and again, avoids a lawsuit in regards to the Americans with Disabilities Act of 1990. 

There are three levels of conformance to WCAG guidelines:

1. A — basic accessibility requirements exist 
2. AA — above average accessibility requirements are met
3. AAA — meets the gold standard of accessibility practices, making your site inclusive for everyone 

Other Ways to Make Your Website Accessible 

Link Text That Makes Sense

Once upon a time, website content creators would link text just to link it (eg. click here). Unfortunately, this is still a practice many people still use to this day at the expense of those with impairments. When a screen reader goes through linked text it will say “here.” This isn’t useful for anyone unless the linked piece is all about the word here. 

Instead, link text that makes sense. For instance, if you’re linking a reference that is about how to land a digital marketing job, link the part in your site that says “how to land a digital marketing job.” 

Choose Larger Buttons 

While it’s important to keep color in mind when choosing buttons, size is also important. Smaller buttons can be an issue for those with low-visibility issues. Buttons are the heart of most calls-to-action, so make it easy to locate by making them a bit on the larger side. Don’t have it take up the whole page, but stand further away from the screen and see if you can still discern it easily. 

Customizable Text 

We talked about customizing your site so users can choose the colors of the foreground and the background. Let’s take it a step further by letting users choose the size of the text on your site. This helps people with visual impairments but also helps people using smaller screens or even using your site from a farther distance. 

Use a Screen Reader 

Individuals with visual impairments use screen readers to help them navigate a site. The screen reader will use the code of your website to differentiate each element from the other. It can also skip straight to lists, find buttons, and recognize where there are links. 

Screen readers can be helpful tools that can help websites be accessible as possible without having a team member with a visual impairment. That said, nothing is better than running your site past a quality assurance team that has someone with a visual impairment on it. 

Use Alt Text That Makes Sense 

It’s true that alt text can help boost SEO scores on a webpage. It can be tempting to stuff a keyword or two into the alt text of an image, but it makes for a worse user experience if it doesn’t make sense. Try to use alt text that uses keywords and makes sense to the user. 

The Digital Intellect Believes in Inclusion 

We here at The Digital Intellect, believe in inclusion, as it will boost the company’s overall goals and morale. Inclusion and accessibility aren’t just important for those who need them, but they will boost your company’s overall goals as well. One of the goals of our company is to make content and websites that everyone can use, regardless of our client’s audience. 

As Google’s algorithm becomes more and more in tune with the needs of everyone, regardless of your social abilities, it’s crucial to make your site inclusive. Each update penalizes websites that disregard the importance of accessibility for all. Doing this may seem like an impossible goal, but our team is well-versed in making sites and content mindfully. Reach out to us now to see how we can help you achieve your web design goals! 

References

• Web Content Accessibility Guidelines (WCAG) 2.1
• Automated Accessibility Testing Is Not a Shortcut
• https://www.wired.co.uk/article/tim-berners-lee 
• https://www.who.int/en/news-room/fact-sheets/detail/blindness-and-visual-impairment 
• https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-visible.html 
• https://www.colourblindawareness.org/colour-blindness/#:~:text=Worldwide%2C%20there%20are%20approximately%20300,different%20causes%20of%20colour%20blindness
• https://www.w3.org/WAI/WCAG21/Techniques/general/G175.html