If you were to guess how many people around the world have some form of vision impairment, what would you say? Two billion puts you close … but not quite there. According to the World Health Organization (WHO), at least 2.2 billion people have a near or distance vision impairment.
Knowing that billions of people suffer with this disability, as well as with disabilities relating to mobility, cognition, hearing, self-care, and more, Intuit® has made accessibility a priority. In Empowering global teams to deliver accessibility at Intuit, Reuben Evans, an Intuit developer writes, “As developers, we have the responsibility of building an inclusive experience so that every user can use our product equally.”
That’s why we design with accessibility in mind, creating life-changing, empowering applications for everyone. Today, we’ll examine how to use the high contrast mode on computer screens, which will help people with vision impairment use their computer. We will use accessible logos as an example.
Accessible SVG logos in high contrast mode
Users with visual impairments can benefit greatly from using the high contrast mode on their computer screens. A high contrast mode that uses a limited color pallet contrasts colors to make the computer easier to use for people with low-vision conditions.
However, high contrast mode might behave differently in different operating systems. Browsers such as Edge, Internet Explorer, Firefox, and Chrome all support high contrast mode, but not equally.
For example, while a QuickBooks® logo would be readable in Mac OS accessibility mode (Figure 1), it might be invisible in Windows High Contrast Mode (WHCM), specifically using Firefox (Figure 2). Unlike other operating systems that convert colors, WHCM overrides colors with defaults or user-set values.
Figure 1. QuickBooks Logo (top left) readable in Mac OS accessibility mode
Figure 2. QuickBooks Logo (top left) not readable in Windows High Contrast Mode
To have an accessible SVG, one might think of using CSS keyword currentColor in the fill property of an SVG. currentColor, which represents the value of an element’s color property, will take its value from the inherited value of the color property. Although using currentColor would provide an accessible SVG in Mac and Windows, as well as most browsers such as Firefox, it might not work properly with Chrome in Windows because Chrome behaves differently.
Canvas and CanvasText, which are new standard system color keywords, map to the deprecated Window and WindowText system color keywords. They give users the ability to customize their websites with the relevant foreground and background colors when in high-contrast mode.
CanvasText can be used in the fill property of an SVG logo to apply the user’s text color (Figure 3). Using CanvasText will provide accessible SVG logos in all operating systems and/or browsers.
Figure 3. QuickBooks SVG Logo filled with CanvasText property. The value of “d” attribute is not shown for simplicity.
Figure 4. Accessible QuickBooks Logo (top left) in Windows High Contrast Mode using CanvasText property
Accessible logos are just the start
The WHO says that uncorrected vision impairment contributes to the annual global costs of productivity losses, which numbers into the billions (specific examples include US$ 244 billion for myopia and US$ 25.4 billion for presbyopia). Addressing accessible logos using high contrast mode on the computer is just one great example of how Intuit is factoring these challenges into our application design.
We’ve also addressed accessibility in a number of articles, including Providing accessibility is worth it with analytics; 5 tips for making your app accessible; Setting priorities for accessibility issues; and Helping developers write accessible code, with the hope that other companies will join us in building an inclusive experience for all people. As Debra Ruh, an advocate for the rights of persons with disabilities and founder of TecAccess, says, “The only disability is when people cannot see human potential.”
Intuit sees potential in every person, and is committed to celebrating and supporting diversity, equity, and inclusion as we commit to powering prosperity around the world.