Coloring Websites with Accessibility

[Approximate Reading Time : 4 mins]

The use of colors makes a website more aesthetic and engaging. It is an important checkpoint when it comes to accessibility. What a person without disability will describe as ordinary text might be a roadblock for people with disabilities (PWDs) if the right colors are not used for the text and the background. Of all the visual impairments, color blindness is often downplayed as something that is not a big deal.

Color can enhance the message, but it shouldn’t be the messenger.

—Noah Glushien

Color blindness is a deficiency or anomaly in the eyes’ retinal photoreceptor cones that help us to view and differentiate between colors. People with this condition might be unable to distinguish between colors (red and green commonly), be unable to detect a certain color (red, protanopia; green, deuteranopia; blue, tritanopia), or see no color at all (achromatopsia). Color blindness affects men more than women.

Worldwide, 8 percent of men and 0.6 percent of women suffer from a form of color blindness, which is about 300 million in total. Many people might not even know that they are color blind. Color alone can make completing interactions and receiving information difficult. To estimate the traffic that a proper color palette can bring to your website or application, it is better to know your users.

Even when color contrast is prioritized, the choice of colors is not. ADA does not specifically include color blindness, but the use of color is a WCAG 2.1 success criterion with a conformance level A. A proper color palette is therefore for a website to conform to even the lowest level of accessibility. It can be done by following simple guidelines without eliminating colors and images or diminishing the aesthetics of a web page.

• Use a high-color contrast ratio of 4:5:1 for normal and 3:1 for larger texts, without affecting dyslexic people.
• Avoid text overlaid on imagery, or reduce the opacity of the background.
• Include text labels in charts and graphs to supplement colors.
• Add stripes, dots, and patterns to distinguish between colored components.
• Use sound, shapes, and animations to support information.
• Provide information in multiple ways when diagrams and maps are used.
• Add icons or text cues to indicate incomplete or invalid form entries.
• Use placeholders with labels.
• Enable zoom option and the option to increase font size.
• Provide good color contrast for focus indicators.
• Use text to denote required fields and errors.
• Use percentages to show password strength.
• Differentiate between links by underlining the text or additional visual cues. Avoid underlined hover state.
• Develop a color-blind mode.

Improper color contrast ratio makes text difficult to read or invisible. Many color-blind simulators and preview tools are available to get an idea of how vision is affected. WebAIM’s reports suggest that 86.3 percent of home pages had insufficient contrast as of February 2020. Data visualization is another area where colors have meanings assigned to it. Only colors must not be used to convey information, and the same content in other forms should accompany these data. Staying clear of problematic color combinations will help.

Information on a website must be easily recognizable and understandable. It can benefit people using text-only or monochrome displays and browsers and old people with poor vision and be effective against issues like screen glare, bad lighting, small screens, and distant screens too. Websites with accessibility techniques are ranked higher in Google, which will help your site to appear higher up in search results. The readability of a website directly affects readership, which ultimately affects sales. Amnet, having been in the industry for more than two decades, has the skilled professionals required to make your site conform to the latest standards and guidelines. Try a Benetech-certified accessibility vendor for your accessibility needs.

Sources:
1.https://www.boia.org/blog/use-of-color-for-accessibility-explained.
2.https://alistapart.com/article/a-designers-life-with-color-vision-deficiency/.
3.https://www.w3.org/WAI/WCAG21/Understanding/.