I realize that improving 95% of your web pages is a big promise. But hang in there with me for a few paragraphs and I’ll show you a quick, simple and cost-effective way to meet the accessibility needs of your users (57 million people in the US alone) without sacrificing the aesthetics of your designs. Developers, don’t leave yet — this affects you too!
Quick outline of what we’ll be covering:
- Accessibility guidelines and who came up with them
- Why accessibility design isn’t just for edge cases
- Specifics of the promise we made above
- An example of how we’ve used this method at DT
- Some resources to level-up your accessibility chops
First, some context.
The World Wide Consortium (W3C) is the main international organization which sets standards and respective guidelines for the web. In 1997, with endorsement from the White House, W3G started the Web Accessibility Initiative (WAI). The aim of WAI was to make it easier for people with disabilities to access and interact with computers and the web. Through that initiative, W3G created the Web Content Accessibility Guidelines 2.0 (WCAG 2.0). That is the last initialism, I swear. The goal of these guidelines was to set an internationally recognized set of standards for web content accessibility. There are three standards levels: A, AA and AAA.
Next, let’s clarify some nomenclature, because there are a few terms out there associated with accessibility that get mixed up in this space:
- Inclusive Design, Design for All, Universal Design, Usable Design: These address a much broader spectrum of issues surrounding the availability and usability of technology.
- Accessibility Design: This specifically focuses on people with cognitive, auditory, neurological, speech, physical and/or visual disabilities.
Accessibility affects more people than you think.
Now, let’s get into why accessibility design matters enough to incorporate it into all your designs moving forward. Personally, before I dove into accessibility, I rarely considered it in my designs. At most I’d consult clients on what I knew about colorblindness. While even colorblindness is often overlooked, the needs of the visually impaired community as a whole extend much further than the colorblind community, which itself only makes up about 4% of the population (roughly 8% of men, and less than 1% of women).
According to the World Health Organization [inlinetweet prefix=”” tweeter=”” suffix=””]nearly 26.8% of the population in North and South America have some sort of visual disability[/inlinetweet] — blind, low-vision or some other form of visual impairment (e.g., color blindness.) That’s a lot more than an edge case — that’s 1 in 4 of your potential users! In a recent Google study based on World Bank and CDC data, the United States alone has more blind or visually impaired people than there are Canadians who use the internet. The National Institute on Deafness and Other Communication Disorders states that 1 in 8 people in the US (ages 12 and older) have hearing loss in both ears. The same organization estimates that 8.5% of people in the US ages 55-64 have a disabling level of hearing loss. That number triples to nearly 25% for people ages 65-74. I could go on and on with stats like this, but you get the general theme: if you don’t consider accessibility, you’re likely alienating a good chunk of your users.
Promise delivery time.
The simple means by which you can improve your designs and provide greater accessibility to a large portion of your user base is…minimum text contrast ratio.
Alright, what does that mean? The WCAG 2.0 has set guidelines on minimum text contrast ratios — the mathematical difference between text color and background color behind the text — for the web. Simply put, these guidelines make reading text easy for users with low-visibility and other forms of visual impairment. Learn more about the rationale behind the ratios here.
Why 95% of all web pages?
Because 95% of all information on the web is written language. And while as I designer I’m often focused on the other 5%, we can’t undervalue the reality that many of our digital experiences are, and will likely continue to be, text-based. I mean you’re reading this, right?
Remember how I mentioned there are three levels of standards compliance for much of WCAG 2.0? Well there are two for text contrast ratios: AA and AAA. Here’s the breakdown:
Level AA (Minimum)
- 4.5 : 1 – type 12pt regular
- 3 : 1 – type 14pt bold or 18pt regular (and above)
- 7 : 1 – type 12pt regular
- 4.5 : 1 – type 14pt bold or 18pt regular (and above)
There are several different “text contrast tools” that can help you test the text contrast ratios of your designs. Here are a few we use at DT:
- https://github.com/getflourish/Sketch-Color-Contrast-Analyser (Sketch Plug-in)
Other compliance instances to consider.
So this is all fine and dandy when you have just a simple body copy over a nice, clean, gradient-free background. But what happens with text over an image? Or logotypes? Or what happens when a user zooms out on their browser to 75% and forgets about it? Below are some WCAG 2.0 guidelines for a few of the common exceptions we deal with:
- A minimum text contrast ratio of at least 4.5:1 isn’t required for text or images of text that are:
- part of an inactive user interface component
- pure decoration
- not visible to anyone, or part of a picture that contains significant other visual content
- have no contrast requirement
- There is no minimum contrast requirement for text that is part of a logo or brand name.
- Unfortunately there are no specific guidelines here. WCAG only recognizes that thin fonts, even at the required sizes and weights, will may not be visible for people with visual impairments. Avoid them altogether if possible.
- Essentially this is out of your hands. All you can design for is default browser sizing.
More on the WCAG 2.0 text contrast guidelines here.
Text contrast compliance in our client work.
To drive home the everyday tactical practicality of text contrast compliance, I’m going to walk you through an experience I recently had with a client who was creating a web app from the ground up. They were aiming for Level AA text contrast compliance. This particular client was concurrently working with an agency to revamp their brand identity. Their agency sent us this color spectrum indicating not only the desired colors, but the use-quantity relative to each color:
The first three blues were to serve as brand colors. The darkest blue being the primary brand color. The yellow was to be an accent, possibly for notifications. Greys could serve as muted text and background colors. Intent colors were not included.
The next thing we did was vet the colors. We created a matrix of colors and indicated whether or not each combination met the AA guidelines. That Sketch plug-in comes in handy here. Just remember that when selecting the font and background color, the contrast analyzer is also considering in the size and weight of the font selected. Be sure to use the minimum font sizes and weights mentioned above.
We knew we wanted a muted text color option and the ability to have white type on any of the branded blues. Since no grey was passing on a white background, and only 2 of the 3 blues passed as a background to white type, we needed to make some adjustments.
You can tell there’s a slight difference between the new and the old, but I was surprised at how much a small change made in gaining compliance. We now had a compliant muted text color and the flexibility with white type on any of the brand blues. Here’s the compliance breakdown before and after our color adjustments:
The big takeaway for us was the level of impact a small time investment could create. We only spent a couple of hours working through the text compliance and the potential impact is massive — hundreds of thousands if not millions of potential users. Another takeaway is that noncompliant muted text runs rampant on the web!
Pro-tip: Make sure you set your colors before starting your style guide and component library.
The last lesson is how useless yellow is within a UI. Alright, that’s a little harsh. But unless black text on yellow fits your designs or you’re okay with turning that color brightness down until you’re into the browns, using bright yellows with text is cautiously advised against. What we managed to do was use yellow as an accent color in illustrations and other small branding elements that were not text-based.
I can imagine reading through this post, it may seem like we’re suggesting to add more constraints to your designs. In part, we are. However, if we look beyond our day to day work and look toward the potential impact of our designs in people’s lives, designing with accessibility in mind will only further that impact.
Best of luck implementing accessibility guidelines to your next designs! If you have any questions or would like to share some accessibility experiences of your own, please share them in the comments.
Interested in learning more?
Outside of text contrast, these are a few WCAG 2.0 guidelines that both our designers and developers frequently use in our client work:
- 1.1 Text Alternatives
- 1.3 Adaptable
- 1.4 Distinguishable
- 2.1 Keyboard Accessible
- 2.3 Seizures
- 2.4 Navigable
- 3.1 Readable
- 3.2 Predictable
- 3.3 Input Assistance