UX DesignNEW InVision Studio

How to Achieve WCAG 2.1 Accessibility Standards

Learn how to meet WCAG accessibility standards — or read this article and more in our ebook: A Beginner’s Guide to Designing UX. Read offline, any time, on any device 🎉

Buy $10

Quick summary

Accessibility refers to ability-of-use, especially for disabled users. When 19% of the world is disabled in some way, the concept of inclusive design is a no-brainer.

What you'll learn

  • Why accessibility standards
  • WCAG 2.0 and 2.1 concepts
  • Measuring color contrast
  • How to design inclusively
  • Different types of disabilities

What is Accessibility?

Accessibility refers to ability-of-use, especially for disabled users. Approximately 19% of the world is disabled in some way, so it’s fair to say that neglecting accessibility testing will surely impact bottom lines. While low-vision blindness is what diminishes most user’s ability to interact with UIs and engage with content, UI designers also need to consider those who experience difficulty reading, hearing, or physically interacting.

Luckily, the WCAG 2.0 Web Content Accessibility Guidelines (and its supplementary material, WCAG 2.1), offers tried-and-tested tips to improve accessibility.

WCAG 2.0 and WCAG 2.1 accessibility standards

Designing for Visual Impairment

Designing for visual impairment (e.g. low-vision, color blindness, etc) should be a top focus when thinking about accessibility standards, because even though VUIs (Voice User Interfaces) are rapidly surging in popularity, we still mostly interpret user interfaces with our eyes, and it’s likely to stay that way for the foreseeable future.

Low-Vision Blindness

While there is a medical definition of what constitutes as “low-vision”, what we mean in the context of accessibility is those who experience a visual impairment that isn’t color blindness. The extraordinary thing about designing for low-vision blindness, is that even those with optimal visual acuity (also known as “20/20 vision”) can benefit from improved accessibility. We can make user interfaces more accessible to eyes by:

  • Making text larger
  • Increasing contrast

Large Text

Large text increases readability for users of all abilities. Low-vision blindness is different in every case, so while there isn’t really a minimum font size to adhere to, when it comes to website accessibility, the browser default is 16px (also known as “medium”), and it’s recommended not to use font sizes any smaller than this.

It’s also worth noting that the WCAG 2.1 Web Content Accessibility Guidelines explains that, in addition, the viewport should be zoomable by 400%.

Increased Contrast

Contrast refers to how easy it is for the user to distinguish one element from an adjacent element (i.e. to see it clearly, and to understand how important it is in relation to other elements, and the layout as a whole). Optimal contrast levels can be achieved by considering these three contributing factorscolor, size, depth, and depending on how much we want to blur the lines on the factors of contrast, proximity as well.

Read on as we discuss color contrast in more detail.

Below: well-optimized sizing and color contrast.

Optimal color contrast for website accessibility

Color Contrast

WCAG 2.0 Color Contrast Guidelines

Although difficult to understand at first, color contrast is easy to achieve because the WCAG 2.0 Web Content Accessibility Guidelines outlines a method of achieving optimal accessibility. Color contrast analyzers make the measuring easier, too.

Color contrast analyzers operate by comparing two colors and scoring the contrast between 1-21 (with two main levels of conformity at AA and AAA). Sometimes the score is represented as a ratio, for example 100% black (#000000) and 100% white (#FFFFFF) have a ratio of 21:1 (which meets the highest benchmark of AAA). The benchmark that we need to aim for depends on the size of the font, because larger font sizes contribute to contrast too, and thus the color may not have to be as luminous.

Normal text (below 14pt bold/18pt normal or 18.66px bold/24px normal):

  • AA: 4.5:1 and above
  • AAA: 7:1 and above

Large text (14pt bold/18pt normal or 18.66px bold/24px normal, and above):

  • AA: 3:1 and above
  • AAA: 4.5:1 and above

AA accounts for the loss in contrast for those with low visual acuity, congenital and acquired color deficiencies, and the loss of contrast as a result of natural ageing. AAA is a fantastic result to achieve, but it isn’t required. Anything less than AA is simply…Fail.

Aim for WCAG 2.0 level AA, with AAA as an added bonus.

Color Contrast Analyzers

Color Blindness

Colors have meaning, for example, yellow can mean either cheerful or optimistic. By “can”, we mean that colors have different meaning in different cultures or scenarios, for instance, yellow can also be used as a cautionary color, meaning “hazardous”.

However4.5% of the world experience color blindness, or to use the correct term, “color vision deficiency”. Color vision deficiency is described by Wikipedia as “the decreased ability to see color or differences in color”. It’s worth noting that men are far more likely to have a color vision deficiency (for example, red-green color blindness affects 8% of males, but only 0.5% of women), so always consider your audience.

Getting into the gritty details of color blindness might be excessive for a beginner article on accessibility, although we’ll quickly run through the different types.

Red-green color blindness:

  • Protanomaly: 1% of males see warm colors appear more green
  • Protanopia: 1% of males see red as black, and warm colors as yellow
  • Deuteranomaly: yellow and green appear warmer, affects 5% of males
  • Deuteranopia: 1% of males see reds as brownish-yellow, and greens as beige

Blue-yellow color blindness:

  • Tritanomaly (rare): blues appear greener, difficulty telling warm colors from pink
  • Tritanopia (rare): blue appears green, and yellow appears light grey or violet

Complete color blindness:

  • Cone monochromacy: no contast at all
  • Rod monochromacy or achromatopsia: no color at all (extremely rare)

Accessibility Testing for Color Blindness

One of the tools mentioned above—the Stark Sketch Plugin—has an added bonus: it shows us what it’s like to see our design through the eyes of different color vision deficiencies. Alternatively, consider using a color blind simulator for live website testing.

Accessibility testing with a color blind simulator

Color Blindness and Night Shift Mode

Apple devices (macOS/iOS) have a feature that makes it easier to read at night by switching blue light (light that keeps us awake and damages our eyes, FYI) to red light. When working on a design that might involve a lot of reading, especially a night, this is something to consider—red will appear even redder with Night Shift mode activated.

Assisting the Assistive Technologies

Text Labels

Clarity is an absolute must in UI design; even those with terrific vision will quickly become frustrated when it’s not clear what a button will do, where a link will take them, or what an icon represents. By introducing text labels that accurately describe buttons, icons, and links, assistive technology and voice-recognition software can work better.

Status Changes

Regarding dynamic on-screen changes (such as a newsfeed item appearing, or a notification alert), designers should communicate (to developers) the fact that assistive technologies like screen readers need to be able to read these changes to those with visual impairments. Some accessibility standards can only be implemented by developers, making these communications important during the design handoff stage.

Rethinking the Reading Experience

Design for Dyslexia

About 5-17% of individuals have dyslexia (a relatively obscure disability, hence the wild numbers). Dyslexics find it hard to interpret words and letters, which doesn’t mean that all designs require a dyslexic-friendly font, however some fonts are clearer than others, and this is something to consider when thinking about inclusive design.

Write Simple Language

Consider using simple language as well. Although we love to sound smart, and use copy that stands out and wows users, using simple sentences makes digesting content easier for those with reading disabilities, and even those who speak a different tongue.

Follow Typography Best Practises

As well as the contrast tips we’ve already discussed, UI designers should also consider text legibility (as defined in the WCAG 2.0 specification for “Visual Presentation”):

  • Don’t “justify” text (align to both the left and the right)
  • Establish hierarchy with H1, H2, and H3 headings
  • Define line spacing at at least a space and a half (1.5)
  • Paragraph spacing should be at least 1.5 times larger than the line spacing
Accessibility standards for typography

Accessibility Standards and Interaction

Design Large Tap Targets, and Use Simple Gestures

People with motor disabilities such as cerebral palsy, muscular dystrophy, multiple sclerosis, ET, and even arthritis and other afflictions that tend to come with old age, can experience decreased muscle movement and involuntary movement…meaning, they can have difficulty using a mouse or interacting with touchscreens using gestures.

Although these types of disabilities are often best overcome using assistive technology, adaptive keyboards, and the like, implementing standard usability optimizations can be extremely helpful for all users. This includes designing tap targets at an appropriate size (at least 44px in height, and making sure they’re accessible to thumbs and fingers).

Avoid complex interactions (such as swiping and shake-to-undo) when simple tapping will do, and reduce the number of steps required for users to meet their objective.

Define the Purpose of Form Fields

Certain accessibility implementations are very developer-centric. One example of this comes from the WCAG 2.1, which outlines how the meaning of form fields must be programatically defined. Either developers need to know about accessibility standards as well, or designers need to be communicating when an email field isn’t just an ordinary form field. Failure to do so means that mobile devices will display the wrong keyboard type, making typing even more difficult for those with trouble interacting.

Define form fields correctly

Design Easily-Dismissible Modals and Tooltips

As we’ve learned so far, we all interact with user interfaces in different ways. With that in mind, UI designers should try to implement alternative methods of interaction, for instance, allowing the user to dismiss a modal or tooltip using the Esc/esc button.

People who have trouble using a mouse will find this incredibly useful.

Boost Website Accessibility with Responsive Web Design

Responsive web design refers to websites that work well on mobile, tablet, and desktop devices. In the context of accessibility standards, the WCAG 2.1 Web Content Accessibility Guidelines specifically indicates that websites must be optimized for mobile devices all the way down to 320px. Plus, users with visual impairments should be able to zoom up to 400% (instead of the usual 200% outlined in the WCAG 2.0).

Also, avoid forcing orientation.

Don’t Make Keyboard Shortcuts Too Accessible

Many websites now allow for keyboard shortcuts, Dribbble being one of them. While these are a nice surprise, consider this: disabled users meaning to hit the the “K” key, but instead hitting the “L” key, might end up liking a shot when they didn’t mean to.

Applications and websites that support single-character keyboard shortcuts should ensure that shortcuts can be turned off, or adapted to add more friction by throwing Ctrl, Cmd, or Alt into the stroke. Also, disable shortcuts when focused on a form field.

Give the User More Time

If inactivity can lead to a loss of data, the ability to request more time should be available for users with cognitive disabilities (for example, banks often timeout after a certain amount of time, for security reasons—also airlines, to rush users into buying).

Designing for Deaf People

Most user interfaces don’t typically use sound as their primary method of interaction (although sound can totally add to the experience). This, and the fact that only 0.38% of the world is functionally deaf (half of which are over the age of 65), means that it’s unlikely that we’ll need to consider hearing disabilities for better accessibility design.

Rare cases include:

  • Products aimed at elderly users
  • Products aimed at deaf users (i.e. speech therapy)
  • Products where sound is required (i.e. learning languages)

Provide a clear visual indicator of what the sound means, for example, a satisfying “ding!” upon completion of a todo could be accompanied by a checkmark animation.

Accessibility Testing

Designers should integrate accessibility testing (i.e. testing with disabled users) into their usability testing workflow. Website accessibility checkers do exist, though, and it’s well worth using them to ensure that designs are (mostly) meeting accessibility standards before inviting users to test (but not as a substitute for actual testing).

Conclusion

Inclusive design means to design websites, apps, and other user interfaces that are accessible and usable by almost everyone without the need for those users to (or feel like they have to) adapt, or for us to design specialized interfaces for those users.

Being disabled is very normal and very common; in fact, many of us are at least less-abled in some way. Not only that, but the advantage of meeting accessibility standards is that the benefits are significantly rewarding for those that aren’t disabled as well.

Further reading: WCAG 2.0 checklist + what’s new in WCAG 2.1.

This article forms part of our ebook, A Beginner’s Guide to Designing UX 💪.

Daniel Schwarz, author

Daniel Schwarz

Daniel Schwarz is a digital designer, web developer, and maker by background, but a writer, editor, 3x author, and teacher at heart. Currently a design blog editor at Toptal and SitePoint, writer at .net Magazine and Web Designer Magazine, but occasionally a collaborator with top design companies such as Adobe and InVision.