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.
