Designing for accessibility, step 1: Color contrast
The A11Y Project puts it best, and most bluntly: “Accessibility is hard.” If you’re feeling lost, start with color contrast.
A primer on accessibility
Accessibility has been a buzz word in the design community lately. What does it mean? “The Web is fundamentally designed to work for all people, whatever their hardware, software, language, culture, location, or physical or mental ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability” — Henry & McGee, W3C.
There are two de facto standards for accessibility: Section 508, which applies to the public sector, and WCAG 2.0, which applies to the private sector. These two standards are essentially checklists that are used to evaluate websites. Section 508 is a legal mandate, while WCAG 2.0 is not. So, unless you are a government employee or subcontractor, you are not legally required to make your website accessible. But, there are countless reasons to care about accessibility! Each of your users should be entitled to an equal experience.
Side note: Although all .gov websites have been legally required to comply with Section 508 since 1998, very few of them do, without consequence. This absurdity, along with several other unsettling findings, was the subject of my thesis at UC Berkeley.
What you can do, as a designer
Optimizing a website for accessibility is largely a developer’s task. For example, one WCAG 2.0 guideline requires websites to be keyboard-navigable, for the user who is unable to operate a mouse. This doesn’t pose a large burden on the designer; even animation-heavy and scroll-jacked sites can be keyboard-navigable.
However, there are a number of guidelines that a designer can directly address. These include reducing motion, limiting popups or unexpected flashes, and easiest of all, ensuring adequate color contrast.
Each guideline of WCAG 2.0 has three conformance levels: A (minimal), AA (mid-range), and AAA (highest). AA is widely considered the industry standard. The AA standard for color contrast is a 4.5:1 ratio between foreground (i.e. text, images) and background. For examples of what a 4.5:1 ratio looks like, check out Brent Jackson’s tool called Colorable.
Testing contrast
If you have an existing brand or UI palette, check the contrast ratios. I recommend using Lea Verou’s Contrast Ratio tool, simply for its ease of use. You may also like the EightShapes Contrast Grid for evaluating more extensive palettes. Neither the W3C (the foundation overseeing WCAG 2.0) nor the General Services Administration (the government body overseeing Section 508) provide testing tools, so you’ll have to rely on third-party tools by kind-hearted developers. The A11Y Project maintains a list of resources, as does Google.
Making adjustments
If your current contrast ratios are shy of 4.5:1, you’ll need to make some adjustments to meet the AA contrast standard. Keep in mind that adjacent colors aren’t held to the contrast standard. What really matters is contrast between foreground and background, so you won’t have to reskin your entire palette. With perhaps minor color adjustments, you can ensure good contrast while preserving your brand image. I know this is easier said than done, so let me reiterate my opening statement: Accessibility is hard. This is the easiest part.
Consider the following from Sebastien Gabriel, designer at Google Design:
“Accessibility has always been part of Chrome’s DNA… Admittedly on the visual side, our color scheme needed a new pass to make it both simpler and compliant to the WCAG 2.0 rules for good contrast. We made sure that all our typography as well as iconography reaches at least AA level or 4.5:1 contrast ratio.”
Google is not alone in meeting the AA standard. The Twitter UI update that rolled out last month includes an “Increase color contrast” feature. When this is toggled, most of the palette meets not just AA, but AAA compliance for contrast.
Feasibility
If you have doubts about feasibility, you’re not alone. Consider this excerpt from Yesenia Perez-Cruz and Sanette Tanaka at Vox Media:
“Vox Media has made strides in improving the accessibility of our sites since Curbed’s design language was initially defined… the link color from Curbed’s original style guide did not have enough contrast with the homepage background color to pass contrast tests as defined by the Web Content Accessibility Guidelines. We explored a few options, including changing Curbed’s color palette, but ultimately decided that drastic changes to the design language were out of scope for this project. We compromised by bolding our links. While still unaccessible, the links will hopefully benefit from having a second visual indicator that helps them stand out from body text.”
When I asked for additional information on why adequate contrast was out of scope, Tanaka explained that colors are an integral part of the brand’s larger design language, and that changing this design language is no small feat. While I’m glad that Vox Media is aware of their accessibility shortcomings, the excuse doesn’t sit well with me. It’s unfair to your users to prioritize the unity of your design language over accessibility. Accessibility deserves consideration, especially if rebranding efforts are already underway.
Remember that everyone deserves access to your website. Creating a fully accessible product can be a long journey, so color contrast is a great place to start.
❧
Neil Shankar is a designer on Creative Engineering at Google, embedded through Left Field Labs. Visit tallneil.io.
