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:

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:

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 nearly 26.8% of the population in North and South America have some sort of visual disability — 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)

Level AAA

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:

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:

Incidentals

Logotypes

Thin Fonts

User Resizing

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. Perceivable

2. Operable

3. Understandable

4. Robust

Comments
  • Hey Juan

    We test colour accessibility across all of our projects also. Typically we mock up a single component in the different colour combinations to illustrate the point. However, I really like the simplicity of using the single character against the background. It’s a great visual way to communicate all the different combinations quickly and succinctly – Great work.

    Another point I’d add to this article is that to meet all WCAG standards be that AA or AAA requirements overlap 3 main areas,

    1) Design
    2) Content
    3) Code

    The ability to meet these requirements is therefore as shared responsibility the client and agency must own together i.e. when designing / building as digital design agencies we can ensure colour contrast standards are met and the HTML is marked up to identify the role of content to screen readers etc. However we cannot ensure the content editors, when adding content to the site add the appropriate ALT tags, captions to videos etc.

    Too often I hear clients say we must be AA compliant and overlook the requirements this has on their own content production.

    • Juan-David Quiñones

      Thanks, Kyle. That’s a great point on requirement overlap.

      Have you ever delivered accessibility guidelines specific to a client’s content? Any remedies you’ve found useful in supporting, if not ensuring, compliant levels are maintained?

      • Hey Juan, great question we’ve been discussing this a lot internally at the moment.

        Typically on all projects we’ll receive the brand style guide and make colour adjustments to ensure compliance with AA standards (we find AAA conformance requires too much deviation) we’ll then play this back as a recommendation.

        For other projects where accessibility conformance is a requirement we enter into a conversation of why this is and discuss the requirement overlap. I offten find the stakeholders requesting this don’t actually understand what the guidelines consist of therefore a quick educational overview can often be helpful to the client. We can then also emphasise to them the internal responsibility for content production and suggest to them having an accessibility ‘champion’ internally.

        Of course the more the requirements deepen the extra impact on development and testing. Therefore we’ve been suggesting internally recently to draft up what we do as satntdard vs what would be extra development to make the client aware of the impacts.

        We don’t have this yet but it’s something we’re looking to work towards this year as the conversation is coming up more frequently these days