Accessibility & Contrast Ratio

Source: https://www.consensusinteractive.com/5-tips-on-web-accessibility-and-ada-compliance/

According to the W3C WAI (Worldwide Web Consortium, Web Accessibility Initiative), Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them. Web accessibility encompasses all disabilities that affect access to the Web, including: auditory, cognitive, neurological, physical, speech, and visual. The initiative and publisher guidelines is meant to cover temporary and permanent disability conditions as well as situational/environmental and connectivity related differences among users.

The WAI has published accessibility standards called Web Content Accessibility Guidelines (WCAG) with specific usability recommendations for designers and developers to use to inform web product development. WCAG 1.0 was published in 1999 and an updated WCAG 2.0 was published in 2008. The current version, WCAG 2.1 was published in 2018 and outlines five key principles for web accessibility which include: perceivable, operable, understandable, robust, and conformance. Each specification within these five areas have sub-specifications with success rating criteria from A (essential), AA (should satisfy), AAA (best, but optional). The WAI recommends that users with disabilities be included in test groups when performing usability testing given that usability testing aims to determine how well people can use the content for its intended purpose.

To share one specific aspect of accessibility to demonstrate how WCAG works in practice, I have  reviewed the concept of contrast ratios. A contrast ratio is a set of values assigned to the contrast between a foreground color and background color and applies to text, images, and graphic elements.

WCAG Level AA requires a contrast ratio of at least 4.5:1 for regular text and 3:1 for large text. Text is considered large if it is over 24px or over 18px and bold.

(L1 + 0.05) / (L2 + 0.05), where
L1 is the relative luminance of the lighter of the colors
L2 is the relative luminance of the darker of the colors

Contrast ratios can range from 1 to 21 (commonly written 1:1 to 21:1).

For example, black text on a white background would have a 21:1 ratio (best) and black on black or white on white would have a 1:1 ratio (worst).

This standard is relevant because according to the World Health Organization, globally, it is estimated that approximately 1.3 billion people live with some form of distance or near vision impairment.

It is not difficult to check contrast ratios when creating a design, and there are plenty of tools online to help such as WebAIM (Web Accessibility in Mind) has a contrast checker tool that is free to use: https://webaim.org/resources/contrastchecker/.

Making digital products and websites accessible truly benefits everyone and is, in some cases like government websites, legally required. It is worth checking out the current specifications to see the full range of issues to incorporate into your design process.

 

References

Blindness and Vision Impairment (2018, October 11). Retrieved from https://www.who.int/news-room/fact-sheets/detail/blindness-and-visual-impairment.

Betz, J. (2019, April 2). What Is Web Accessibility? (And Why It Matters for Your Business) [Blog post]. G2 Crowd. Retrieved from https://learn.g2crowd.com/web-accessibility?__hstc=171774463.2889d5fce58d26dd2e564b243fc58203.1555002914323.1555002914323.1555002914323.1&__hssc=171774463.2.1555002914324&__hsfp=1880097286.

Rice, B. (2019, March). Digital Accessibility: Creating Inclusive Experiences and Avoiding Lawsuits. User Experience Magazine, 19(1). Retrieved from http://uxpamagazine.org/digital-accessibility-creating-inclusive-experiences-and-avoiding-lawsuits/.

Web Accessibility Initiative. (n.d.). Retrieved from https://www.w3.org/WAI/.

WebAIM (Web Accessibility in Mind). (n.d.). Retrieved from https://webaim.org/resources/contrastchecker/.