Have you ever needed to use a magnifying glass to read something? From minuscule warnings on medicine bottles to tiny washing instructions on clothing labels, almost everyone has had trouble reading something. For people with low vision, this is a daily struggle when they navigate the web.
Millions of people around the world have low vision or limited visual acuity. Although users with low vision are not legally blind, their sight is limited to the extent that using computers, tablets, or smartphones to navigate the web can be difficult.
That shouldn’t be the case, especially since there are ways to remove the barriers these users experience. By resizing the content and making sure there is enough contrast between the content and the site’s background, you’ll begin to make your website more accessible for users with low vision.
Although low vision affects how users interact with all content, text is a particularly tricky problem. Most web text is too small to be readable for these users.
Luckily, the ability to zoom in on websites has been standard on most browsers for several years. By zooming in to 150%, 200%, or more, users with low vision can enlarge the appearance of content — text, especially — to make it legible.
While that’s a helpful feature when a user zooms that far in, they are usually faced with a website that is tough to navigate. Only small portions of the content appear at a time and scrolling side-to-side and up-and-down to piece together what the site says can be frustrating. Not to mention that zooming can cause text and other elements to overlap, obscure each other, and cut off critical information on the screen.
Responsive design to the rescue
Luckily, responsive design has also become commonplace around the web and is a must for a site to be highly accessible. Responsive design is a web development methodology that involves using true type fonts and relative measures for text and other elements such as percentages, ems, and rems rather than absolute measures like pixels.
The goal of responsive design is to allow one website to resize gracefully on different size screens. Although the impetus behind responsive design has always been to make the web friendlier when viewed on mobile devices with smaller screens, it’s equally effective at making sites friendlier on any size screen when zoomed.
However, not all responsive designs are created equal, and it’s well worth testing to ensure that your site — assuming responsive design has been used to create it — scales up as well as it scales down.
To meet the Web Content Accessibility Guidelines (WCAG), users should be able to zoom to 200% without elements overlapping, getting cut off, and without needing to scroll horizontally to see everything. If the responsive design allows users to zoom further to 300% or even 400%, that’s even better.
More contrast, please
Another tough factor for users with low vision is adequate contrast. You have probably seen a website with a color scheme that makes reading difficult: grey against charcoal grey, for example, or medium blue against light blue.
Users with low vision require more pop in the contrast ratio for content to be visible, and that’s especially true when it comes to text. For normal size text, the contrast ratio between text and the background should be 4.5:1 and, for larger text, 3:1 to meet the medium level of WCAG (level AA). To meet the more stringent AAA level, the contrast ratio should be 7:1.
The ideal color scheme for users with low vision would be black on white (or white on black), yielding a whopping contrast ratio of 21:1. However, it’s common to use color to differentiate specific types of content, links in particular.
Testing the contrast ratio of a site may seem daunting, but it’s straightforward with the UserWay contrast checker.
Address conflicting needs
Occasionally, the needs of users with different disabilities clash. In this case, the needs of users with low vision can sometimes clash with the requirements of users with color blindness.
Take care when choosing a color scheme to provide not only adequate contrast for users with low vision but also proper differentiation of users with color blindness. If body text and link text are either too close in color or differentiated in certain problematic color combinations, users with color blindness will struggle.
In addition to checking contrast ratios with the UserWay contrast checker, you should also test your color scheme using one of the many color blindness emulators available such as Toptal’s color filter (best for websites) or the Coblis simulator (best for files).
Give users the power
An easy solution to the color scheme problem is to install the UserWay Accessibility Widget. This innovative tool gives users the power to change the contrast and color scheme without permanently altering your site. Thus, users with low vision — or with color blindness — can select an option that works best for them.