top of page

WCAG Case Study

When making a site accessible to a person with a visual disability, you need see that it is accessible for someone who is colorblind, has low vision or is blind. While those are just the beginning when it comes to visual accessibility, these are the focus areas when designing a product. According to the WCAG 2.1 color guidelines, “Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element” (Gilbert, 2019). Alongside that guideline, when it comes to contrast, “the visual presentation of text and images of text has a contrast ratio of at least 4:5:1” (Gilbert, 2019). Some of the common issues we see in technology are as follows: poor content layout, pop-ups, icons not clear, fonts all caps, too much text, text spanning the full width, misplaced button boxes and autopay (Gilbert, 2019).

Above I mentioned WCAG which is something that will be referenced often when making sure a website is accessible to everyone. If these guidelines are not followed it is very possible that the company could be sued for not following these accessibility guidelines. WCAG stands for Web Content Accessibility Guidelines. WCAG documents, “explain how to make web content more accessible to people with disabilities” (WAI, 2021). Using WCAG is important because it allow for web content that covers accessibility for many disabilities such as visual, physical, auditory, speech, learning, language, cognitive and neurological disabilities (W3C, 2018). Following these guidelines ensures that there is equal access and opportunities to people with disabilities. The levels of include A (minimal compliance), AA (acceptable compliance), AAA (optimal compliance). While of course you should strive to react AAA level, it is not recommended, and all websites should at least meet the requirements of level AA. This level ensures that “the website is usable and understandable for the majority of people with or without disabilities” (Accessible Metrics, 2019). To ensure online accessibility, you should make sure that color contrast follows WCAG requirements, alt text is used for images, navigation elements are consistent throughout the site, form fields have accurate labels, status updates can be conveyed through a screen reader, and headings are used in a logical order (Accessible Metrics, 2019).

Does WCAG have to be met by law? According to Section 508 federal agencies and contracts must comply with WCAG 2.0 at a level of A or AA. The benefits of following WCAG allows for web applications to be accessible for all with disabilities as well as people without disabilities. As we have heard before, accessibility can help everyone and aims to give equality. Anyone can benefit for a website being accessible. The consequences that arise if a website is not accessible can include several things. One of those being that you lose revenue or opportunities to gain customers. Your competitor can steal those customers away simply because their site is accessible. The major consequence is having to pay the government a fine for not following the guidelines and even being sued for not following the guidelines. Bottom line, it is better to just go ahead and take the time to make sure your site follows the WCAG guidelines and allow those benefits to help all users.






Accessible Metrics. (5 November 2019). What are the Levels of WCAG Compliance?.

Gilbert, R.M. (2019). Inclusive Design for a digital World: Designing with Accessibility in

            Mind. Apress.

W3C Web Accessibility Initiative (WAI). (2019, May 10). Accessibility Principles.

W3C. (2018). Web Content Accessibility Guidelines (WCAG) 2.1.



bottom of page