This content originally appeared on NN/g latest articles and announcements and was authored by Kelley Gordon
Summary: To design accessible visuals, account for color contrast, don’t rely on color alone, make interactive elements easy to identify, provide useful alternative text for images, and test your visuals with real users.
According to the CDC, 61 million adults in the United States live with a disability. Given the number of people who have a disability and the rise of Americans with Disabilities (ADA) website-related lawsuits over the past years, it is imperative that we design for these individuals. After all, accessible design drives better usability. Accessibility standards such as the Web Content Accessibility Guidelines (WCAG) are a good starting point for those aiming to improve the accessibility of their design. Additionally, platform-specific UI recommendations such as Apple’s Human-Interface Guidelines and Google’s Material Design also include accessibility guidelines for designers working within those ecosystems. This article presents 5 general guidelines that can be used to improve the accessibility of your visuals:
1. Design for Color Contrast
People with vision impairments can have trouble reading text on low-contrast backgrounds. A higher contrast ratio between text and its background helps users with a low vision to read without contrast-enhancing assistive technology. This color contrast can also help users with normal vision to have a comfortable reading experience. According to the WCAG , the color-contrast ratio between text and its background should be at least 4.5:1. For text that is at least 18pt or 14pt bold, the ratio is a bit more generous at 3:1.
There are several tools to check color contrast. I like using accessible-colors.com because it provides decent alternative color suggestions if your contrast ratio is not compliant. To check for the color-contrast ratio, you will need to input the text size, the text weight, and the hexadecimal codes for text color and background color.
Read Full Article
This content originally appeared on NN/g latest articles and announcements and was authored by Kelley Gordon
Kelley Gordon | Sciencx (2022-10-30T16:00:00+00:00) 5 Visual Treatments that Improve Accessibility. Retrieved from https://www.scien.cx/2022/10/30/5-visual-treatments-that-improve-accessibility/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.