Ti-Lea

Ti-lea homepage

ti-lea

Color Contrasts on Snapchat

Optimizing Accessibility Through Snapchat’s Case Study

Snapchat’s popularity and relevance as one of the leading social media platforms globally, Snapchat presents a compelling case study for evaluating color contrast accessibility. 

With its predominantly young user base, accessibility might seem less critical. However around 2% experience low vision, approximately 8% of men are affected by color blindness, and about 5% face cognitive disabilities that impact their ability to perceive color contrasts.

By analyzing Snapchat’s interface with a focus on color contrast accessibility, we can identify its areas for improvement in ensuring inclusivity for all users.

For this case study, we focus on four key screens:

Screen 1: Login choice

The Login Choice screen is the first point of contact for users. It represents a critical juncture in the user experience—if users struggle to interact effectively on this screen, they won’t be able to access further features.

Screen 2: Login page

The Login Page is equally crucial. If users cannot accurately input their login details due to poor color contrasts, their journey with the app is halted.

Screen 3: Homepage

After successfully logging in, users land on the Homepage. This screen acts as the hub for navigating all Snapchat’s features, making it central to the overall user experience.

Screen 4: Camera

Snapchat revolves around sharing images, making the Camera page one of the most used page of app. Ensuring its accessibility is essential to the platform’s core function.

How can Snapchat improve its Color Contrasts for better accessibility?

1. Check the color contrasts

As outlined in the blog article “What to consider for Accessible Color Contrasts?“, WCAG sets minimum contrast ratios as followed: 

  • Normal Text: At least 4.5:1
  • Large Text: At least 3:1
  • Graphics and UI Components (icons, buttons, form fields): At least 3:1

a. Login Choice

 On the page Login choice, we spotted 4 major Color contrats fails:
  • White button on Yellow background: 1.1:1 (fails to meet the 3:1 minimum)
  • Blue button on Yellow background: 2.1:1 (fails to meet the 3:1 minimum)
  • White normal text on Blue button on Yellow background: 2.3:1 (falls short of the 4.5:1 requirement)

b. Login Page

On the Login page, we noticed that the blue color used offered a slightly stronger contrast. However it is not enough to meet WCAG 2.1 AAA requirements. Here is the detail:
  • Blue normal text on White background: 3.6:1 (fails to meet the 4.5:1 requirement for normal text)
  • Blue button on White background: 3.6:1 (meets WCAG 2.1 AA for graphics but not WCAG 2.1 AAA, which requires 7:1)
  • White large text on Blue button: 3.6:1 (meets WCAG 2.1 AA for large text but not WCAG 2.1 AAA)
  • Grey back icon button on White background: 1.7:1 (fails to meet the 3:1 minimum)

c. Homepage

 On the Homepage, we spotted 3 major Color contrats fails:
  • Grey button on White background: 1.7:1 (fails to meet the 3:1 minimum)
  • Grey normal text on White background: 1.7:1 (falls short of the 4.5:1 requirement)
  • Purple icon on Grey button: 2.6:1 (fails to meet the 3:1 minimum)

d. Camera

The main contrast issues on the Camera page involve two icons positioned directly on the picture area without any background, making them difficult to see against light or busy images.

 

2. Check for color blindness

Color contrast accessibility also involves considering different types of color blindness. This helps ensure that key information, like call-to-actions versus decorative elements, remains distinct regardless of color vision limitations.

Here’s a simulation of Snapchat’s color palette through the four most common types of color blindness: protanopia, deuteranopia, tritanopia, and deuteranomaly.

Colors with impact of protanopia, deuteranopia and tritanopia.

From this simulation, we can notice to main points:

  • In the case of protonopia and deuteranopia, the two first colors, yellow and light blue appears as two light colors with low visual impact. They are still distinguishable but they don’t carry a strong brand image value.
  • In the case of protonopia, the third and fourth colors, blue and purple are not distinguishable. Based on their use as primary colors, on the Homepage and the Camera page, it is not a main concern. However, it is important to notice it lowers the brand image value.
 

Insights from the Simulation:

  • For users with protanopia and deuteranopia, the yellow and light blue colors appear as similarly light and low-impact. Although distinguishable, they don’t carry strong brand value.
  • In the case of protanopia, the blue and purple shades blend together. Since these colors are used on same hierarchy level on the Homepage and Camera pages, the user experience is not affected. However, this issue can dilute the brand’s visual identity for affected users.
As summary, Snapchat color palette could have been thought from the beginning in terms of color blindness to make sure its brand impage impact do not get diluted for colorblind people.

3. Optimize the color contrasts

When it comes to color contrast accessibility, it is always better to consider it from the beginning. Indeed, when designing the brand image, setting a palette of contrasting colors is a must. For more information, please refer to the blog post: “How to ensure Accessible Color Contrast in digital platforms?

Based on Snapchat’s color palette, let’s explore solutions to ensure color contrasts accessibility:

a. Login Choice

For the page Login Choice, we can offer two main solutions:
 
  • Add a black border of 2px to ensure that the White button is highly contrasted on the yellow background.
  • Use the darker blue displayed on the Login Page for the Blue button. It will allow to pass WCAG 2.1 AA requirements for the Blue button on Yellow background with a ratio 3.3. However, since the White text is in less than 14pt on the Blue button, it requires a ratio of 4.5:1 (updated ratio: 3.6:1). Therefore, we recommend to updrage the text size from Normal to Large (more than 14pt for bold text). To keep a UI coherence, we recommend to use the same button as displayed on the Login Page. See image 1.
  • Another solution could be to use a darker shade on blue that guarentee a minimum ratio of 4.5:1 with White. See image 2.
Snapchat Login Choice big buttons.
Snapchat Login Choice small buttons with border and darker contrasts
In termes of colorblindness, the contrasts remains the same and the colors are different enough to offer a coherent user experience. Howerver, like stated in the part about colorbliness, the brand image value of the yellow background is low in cases of protanopia, deuteranopia and tritanopia.
Login Choice page with impact of protanopia, deuteranopia and tritanopia.

b. Login Page

For the Login Page, the contrast of the gray icon is the main area for improvement. The blue color can also be darkened to meet WCAG AAA requirements. Here are the improvements we suggest:
 
  • Use a darker gray with a 3:1 contrast ratio on the white background.
  • Keep the same blue color, but change the blue text to bold to meet large text contrast requirements (3:1 instead of 4.5:1). See image 1.
  • Another solution could be to use a darker shade of blue, as recommended for the Login Choice Page, which guarantees a minimum ratio of 4.5:1 with white. See image 2.
Login Page with blue matching WCAG 2.1 AA and bold blue texts.
Homepage with dark blue matching WCAG 2.1 AAA

c. Homepage

On the Homepage, we suggest the following improvements:

  • Use a darker gray with a 4.5:1 contrast ratio on white for both buttons and normal text. This will pass WCAG AA but not WCAG AAA for normal text. See image 1.
  • To meet WCAG AAA requirements, we can use an even darker gray button with a 7:1 contrast ratio. See image 2.
  • Since the button backgrounds are changed to a darker color, the icons on the buttons need to be white to ensure sufficient contrast.
  • Finally, for the purple icon on the gray button, we recommend changing the entire button to purple with the text and icon in white.
Homepage with dark grey matching WCAG 2.1 AA
Homepage with dark grey matching WCAG 2.1 AAA

From a colorblindness perspective, the color contrasts remain the same. For users with protanopia or deuteranopia, the blue and violet appear as different shades of blue. While distinguishable, they lack brand image value.

d. Camera

On the Camera page, the solution is simple. As with the other buttons positioned on the picture, the same dark transparent background should be added under the “picture” and “smiley” icons. See image 1.

A more comprehensive and accessible solution is to place all the buttons outside the camera frame. This allows users to focus either on the action buttons or on the camera view. However, it will impact the picture format and the overall design of Snapchat pictures. See image 2.

Camera Page buttons on the picture with a transparent background
Camera Page buttons on black baground. Picture reduced my 1/4.

The Snapchat case study leads us to two key conclusions:

  1. It’s easier to achieve accessible contrast when brand colors are provided in contrasting shades.

 

2. Simple enhancements, such as adding borders, adjusting text size and weight, and using darker colors, can significantly improve content accessibility.

Audio transcript

Click on Play to have access of the audio transcript of the text displayed on this page.

Discover
Speekoo case

Mockup of Speekoo app

Smooth user experience

Skip to content