Accessibility & Contrast Ratio


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:

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.



Blindness and Vision Impairment (2018, October 11). Retrieved from

Betz, J. (2019, April 2). What Is Web Accessibility? (And Why It Matters for Your Business) [Blog post]. G2 Crowd. Retrieved from

Rice, B. (2019, March). Digital Accessibility: Creating Inclusive Experiences and Avoiding Lawsuits. User Experience Magazine, 19(1). Retrieved from

Web Accessibility Initiative. (n.d.). Retrieved from

WebAIM (Web Accessibility in Mind). (n.d.). Retrieved from

Design Critique: MYmta (iPhone app)



The MYmta iPhone app is a travel app designed to provide relevant information related to New York City’s many public transit options: subways, buses, LIRR and Metro-North rail services, and the Access-A-Ride program. The app allows for real-time scheduling and service changes, as well as personalized settings and trip planning, and station accessibility information.


1. Mapping of Subway line icons (good design)

In the “Subway” service section of the app, there are subway line icons that can be tapped to see more details about the line: delay information, planned work details, and station stops where a user can further tap in to see real-time subway schedules.

Why this feature works well:
  • There is good natural mapping since users can tap directly on the icon to see more details about the subway line as a whole, and then further into see station level information. The experience is intuitive because the hierarchy matches the experience of navigating the subway in real life and a mapped view.
  • The shape (circle), colors, and typography of the subway line icons also also match what is in use in the actual subway so the app picks up on the mental model that already exist in subway riders minds.

2.  Planned Service changes (minor improvement)

At the bottom of the main screen a user can enter a space to search for service changes to their subway line. However, there is a lack of signifiers to show what to do. There is simply a block for each service and it seems like there is not information available. However, tapping on the space does open a search panel. I would recommend adding a label or icon like in the other screens to show there is content in the space.


3. Consistent affordances related to icons (minor improvement)

In the My Stations & Stops section under the Favorites menu, there is a list of subway stops that an individual user has selected as ones that are used with greater frequency, so they are able to quickly get real-time train schedules. The ability for a user to personalize their experience in a larger display of information is very useful. In this section, since multiple train lines may stop at a given station, the user must expand/open the item using a + icon to get to the real-time data.

Recommendation for improvement:
  • In other sections of the app where the + icon is present, clicking on the entire row will expend the view; however, in the Favorites, section, users must tap directly on the + to expand. Therefore, consideration should be given to standardizing the experience and increasing the affordance to match that of the rail section. This change should enable users have a greater rate of successfully expanding the menu on the first try instead of making errors/slips because icon is not the first item seen or because other parts of the app offer a different level of affordance.