Viewing the Web Through Colorblind Eyes

Most colorblind people can see things as clearly as others do, but are unable to distinguish red, green, or blue. — Some issues with developing websites that the colorblind can perceive.

Being colorblind, you might think it curious that Jake Albion chose to become a Web developer who designs websites for small clients at his firm, iPartnerMedia (iPM).

Albion has had an artistic bent since he was young, and figured website design would be a good career choice. He has learned to compensate for his colorblindness by using color codes in browsers, and became well-versed (out of necessity) in the Americans with Disabilities Act (ADA), which lists different Web development standards for levels of compliance.

"For a colorblind person, contrast is very important,'' Albion says. "ADA standards look at whether there is enough contrast between two colors for a person to see it, so if you have an orange background and you want to use green text … for a colorblind person like me, I wouldn't see it."

iPartnerMedia uses a "basic checklist of ADA standards" and implements some of those into its website development, he says. Albion also uses the free, open source content management system WordPress, which he says has made a big push to become ADA-compliant, and therefore more inclusive.

Colorblindness, or color vision deficiency, affects approximately 1 in 12 men and 1 in 200 women in the world, according to the Color Blind Awareness organization. There are three main types of color blindness; red-green color blindness is the most common, followed by blue-yellow color blindness. A complete absence of color vision, or total color blindness, is rare, according to the National Eye Institute of the U.S. National Institutes of Health.

This means there is an entire population of users who struggle to use the Internet.

Often, color is used on websites to provide differentiation between components, notes Kathy Wahlbin, vice president of enterprise compliance and general manager of the consultancy The Paciello Group. "We often convey meaning through color,'' like using red to express an error message, she says.

One of the reasons some organizations are not designing with colorblind accessibility in mind is "they're not getting lawsuits about it,'' Wahlbin says bluntly.

Designers and developers tend to rely upon their own experiences and knowledge of how users interact with websites, says Wahlbin. "It's not that they're deliberately trying to exclude people; they just don't know any better."

Additionally, most people don't know someone who is colorblind, and "It's not something that gets talked about a lot."

The World Wide Web Consortium's Web Accessibility Initiative (WAI) has come out with WCAG 2.0 Guidelines on how to build an accessible website. There are three levels of adherence to the guidelines, and anyone can run an accessibility analysis on their site using Chrome's accessibility audit in its developer tools, for example, which can evaluate a site's level of access and recommend ways in which to improve accessibility, says Alex Nied, a senior software engineer at digital consultancy SPR, who specializes in front-end development. Neid says the onus is on developers to ensure that the Internet and other technologies are used to help people with a wide variety of impairments.

Neid first became interested in the issue when he began working closely on a project with another software developer who was colorblind. "We ran into a situation where a designer had provided a design with colors…that he couldn't see, and he said, 'you'll have to provide different information for people to see [the information on the site],''' Neid recalls. While many developers understand accessibility as it pertains to screen readers and keyboard navigation, Neid says, "A lot of them think that's it, and once they've accommodated those two things, they've met their obligations to making it a 'Web-accessible website.' But it's a much broader topic."

The three levels of compliance with the WCAG 2.0 Guidelines range from A to AA to AAA (the last being the "gold standard," the most stringent). Most larger companies with a Web presence meet the middle (AA) level of compliance, says Yvonne Romano, a senior digital designer at global design firm Designit.

Romano believes websites are not always designed with compliance in mind, because not everyone understands what that means. "I don't know if it's taught and given the same weight in design or engineering schools the way the ADA is taught at architecture schools." Also, she says, "People don't necessarily know where to start or what the resources are." She adds that consultancies and design firms often don't apply the same level of importance to ensuring that smaller projects are compliant.

"What becomes complicated for development teams is functionality gets prioritized over design or accessibility sometimes," she says. "Another challenge is … there's a little bit of a stigma [that] designing for access will make [a site] unattractive or boring or overly complicated."

However, designing for colorblind access not as cumbersome as one might think, Romano stresses. There are a couple of key points to keep in mind when designing a site for the colorblind, she says. One is paying attention to visual contrast; because there is a spectrum of colorblindness, the more contrast you can add into differentiating colors, the better.

"It involves levels of saturation and hue,'' Romano says. "It's not so much which colors make the most sense; it's how the colors look when they are next to each other." For example, putting yellow next to lime green or orange will make those colors hard for a color-blind person to differentiate. The solution is to either make one color significantly darker, or use a totally different color."

Additionally, "Sometimes when you have too many colors, patterns is another way to add differentiation," she says. Use of text is also key, she says, and you can simply make sure that colors are not your only method of conveying important information.

Developers should also remember that you don't have to be colorblind to have difficulty seeing colors on a site, says Walhbin, citing as an example people who read from their mobile devices while they're outdoors.

It's important that officials "raise accessibility considerations to the entire team at every phase of the project lifecycle,'' says Neid. "Make sure that stakeholders care. Make sure your designers are designing with accessibility in mind. Make sure that code review includes consideration for accessibility.

"Developers hold one piece to the accessibility puzzle, but they probably can't complete the picture without participation from the larger team."

Esther Shein is a freelance technology and business writer based in the Boston area.

An Accessibility Toolbox

Web developer Jake Albion says there are two reasons to prioritize accessibility at the outset of a website development project:

Accessibility expands the audience of users for the website. Designing for accessibility is no different than designing for the various screen sizes that will display a website. It's part of building the optimal experience for every user.
If a client gets in trouble for not having ANY accessibility on their site, it is much more challenging and time-intensive to go back and include accessibility. You would essentially have to rebuild the site, so it is best to use some basic A11Y (see below) practices to ensure every site meets minimal guidelines.

Albion said implementing accessibility "isn't hard, if you take the time to integrate it into your day-to-day processes with a checklist, like we do here at iPM. We don't just build websites to fit various devices; like many developers, we build websites that marry our clients and end-users goals in mind.

Following are some resources for accessibility generally, and specifically for developing sites for the colorblind: