Home

Feature Flag

Draft Mode

Enhancing Color Palette Accessibility
in a B2B SaaS Dashboard

Enhancing Color Palette Accessibility in a B2B SaaS Dashboard

Developing inclusive color palettes to improve usability and brand coherence.

Enhancing comprehensive color palette and color guidelines on business platform

During the summer of 2023, I interned as a visual/UX designer in MPS B2B UX team at Samsung Research America in Mountain View, CA.

This project focused on improving color palette on business platform, benefiting 30,000+ businesses in better managing their mobile devices. I incorporated WCAG 3.1:1 color contrast ratio into dashboard design for individuals with varying visual abilities.

*This case study excludes certain details to respect confidentiality.

Contact me to discuss the full case study.

Request case study

Role

Visual/UX designer

Team

MPS B2B Solution Lab UX team

Tool

Figma, Jira

Platform

Responsive Web

Timeline

May ~ Sep 2023 (14 weeks)

What is Knox Cloud Solution (KCS)?

Samsung Know is a business platform for configuring mobile devices offering efficient in various industries. Know Cloud Solutions allows businesses to customize, deploy, analyze and manage their devices.

Problem

Diverse data visualization colors have been used on dashboard in KCS products, but there was not official categorical color palette.

Accessibility issue

Lack of contrast ratio

Limited documentation

Objectives

Establish an official categorical and sequential color palette for the KCS products' dashboard to improve accessibility and visual consistency. And create comprehensive color guidelines for consistent usage across various data visualization scenarios.

Research

I conducted research for 7+ established color design systems. The research goal was to gain a better understanding of categorical and sequential color and to determine the best way to build the accessible color palette for data visualization.

What can we improve

Visualization

Improved color choices can enhance the visualizations’ readability and seamless understanding of information

Accessibility

Emphasize the importance of accessibility in color palette selection

Accessibility

Consistency

Reinforce the need for consistency including brand color in usage across charts

Consistency

Clarity

Ensure that the color usage guideline provide concise instruction on how to use the color palette effectively

Clarity

Accessibility and categorical color

Selecting categorical colors presented a challenge. Beyond defining the color palette, the sequence in which colors are applied to represent data sets significantly impacts accessibility.

Colors in a categorical palette need to be

Differentiated

Exhibit clear visual contrast from one another and background.

Diverse

Avoid using colors that evoke false or unintended information, such as semantic colors

Colors in a categorical palette need to be

Differentiated

Exhibit clear visual contrast from one another and background.

Diverse

Avoid using colors that evoke false or unintended information, such as semantic colors

Colors in a categorical palette need to be

Differentiated

Exhibit clear visual contrast from one another and background.

Diverse

Avoid using colors that evoke false or unintended information, such as semantic colors

Colors in a categorical palette need to be

Colors in a categorical palette need to be

Differentiated

Exhibit clear visual contrast from one another and background.

Diverse

Avoid using colors that evoke false or unintended information, such as semantic colors

Sequential color

The sequential color palette is designed to visualize high to low values for different measures. The sequential color palette of 10 colors derived from the Samsung One UI blue color is ideal for representing progressive data. Its visually cohesive range enables clear data visualization from low to high or in a specific sequence.

01. Blue 90

02. Blue 80

03. Blue 70

04. Blue 60

05. Samsung Blue

06. Blue 50

07. Blue 40

08. Blue 30

09. Blue 20

10. Blue 10

01. Red 10

02. Red 20

03. Red 30

04. Red 40

05. Red 50

06. Red 60

07. Red 70

08. Red 80

09. Red 90

10. Red 100

Note: These mock-ups depict design improvements of color palette. They differ from actual data representations and are for illustrative purposes only.

Sequential color

01. Blue 90

02. Blue 80

03. Blue 70

04. Blue 60

05. Samsung Blue

06. Blue 50

07. Blue 40

08. Blue 30

09. Blue 20

10. Blue 10

01. Red 10

02. Red 20

03. Red 30

04. Red 40

05. Red 50

06. Red 60

07. Red 70

08. Red 80

09. Red 90

10. Red 100

Note: These mock-ups depict design improvements of color palette. They differ from actual data representations and are for illustrative purposes only.

Sequential color

01. Blue 90

02. Blue 80

03. Blue 70

04. Blue 60

05. Samsung Blue

06. Blue 50

07. Blue 40

08. Blue 30

09. Blue 20

10. Blue 10

01. Red 10

02. Red 20

03. Red 30

04. Red 40

05. Red 50

06. Red 60

07. Red 70

08. Red 80

09. Red 90

10. Red 100

Note: These mock-ups depict design improvements of color palette. They differ from actual data representations and are for illustrative purposes only.

Sequential color

01. Blue 90

02. Blue 80

03. Blue 70

04. Blue 60

05. Samsung Blue

06. Blue 50

07. Blue 40

08. Blue 30

09. Blue 20

10. Blue 10

01. Red 10

02. Red 20

03. Red 30

04. Red 40

05. Red 50

06. Red 60

07. Red 70

08. Red 80

09. Red 90

10. Red 100

Note: These mock-ups depict design improvements of color palette. They differ from actual data representations and are for illustrative purposes only.

Sequential color

01. Blue 90

02. Blue 80

03. Blue 70

04. Blue 60

05. Samsung Blue

06. Blue 50

07. Blue 40

08. Blue 30

09. Blue 20

10. Blue 10

01. Red 10

02. Red 20

03. Red 30

04. Red 40

05. Red 50

06. Red 60

07. Red 70

08. Red 80

09. Red 90

10. Red 100

Note: These mock-ups depict design improvements of color palette. They differ from actual data representations and are for illustrative purposes only.

Additional accessibility cues for the categorical palette

Although I tried all the colors that are 3:1 contrast-accessible against the background, it is challenging to keep them all accessible to enhance the visualizations’ readability.  ‍  

For additional accessibility, the divider line is more important in charts using the categorical palette because colors are used here to differentiate between categories.  ‍  

Also, hover tooltips are necessary to communicate more detailed information without overcrowding the visualization. KCS data visualization color has tooltips to enhance visual distinction and ease of recognition.

Divider line on pie chart between categories

Tooltip on a single data

Additional accessibility cues for the categorical palette

Although I tried all the colors that are 3:1 contrast-accessible against the background, it is challenging to keep them all accessible to enhance the visualizations’ readability.  ‍  

For additional accessibility, the divider line is more important in charts using the categorical palette because colors are used here to differentiate between categories.  ‍  

Divider line on pie chart between categories

Tooltip on a single data

Additional accessibility cues for the categorical palette

Although I tried all the colors that are 3:1 contrast-accessible against the background, it is challenging to keep them all accessible to enhance the visualizations’ readability.  ‍  

For additional accessibility, the divider line is more important in charts using the categorical palette because colors are used here to differentiate between categories.  ‍  

Divider line on pie chart between categories

Tooltip on a single data

Additional accessibility cues for the categorical palette

Although I tried all the colors that are 3:1 contrast-accessible against the background, it is challenging to keep them all accessible to enhance the visualizations’ readability.  ‍  

For additional accessibility, the divider line is more important in charts using the categorical palette because colors are used here to differentiate between categories.  ‍  

Divider line on pie chart between categories

Tooltip on a single data

Additional accessibility cues for the categorical palette

Although I tried all the colors that are 3:1 contrast-accessible against the background, it is challenging to keep them all accessible to enhance the visualizations’ readability.  ‍  

For additional accessibility, the divider line is more important in charts using the categorical palette because colors are used here to differentiate between categories.  ‍  

Divider line on pie chart between categories

Tooltip on a single data

Categorical color

After a lot of wrestling and iteration, I landed on a solution to create categorical color palette.    

The categorical color palette consists of 12 carefully selected colors to distinguish categories visually. The categorical color palette offers district colors that can be applied to represent different categories or groups. The spectrum categorical 6-color palette has been optimized to be distinguishable for users with color vision deficiencies.

01. Samsung Blue

02. Gold

03. Teal

04. Loyal Blue

05. Pink

06. Purple

07. Green

08. Red

09. Gold

10. Green

11. Purple

12. Blue

Note: These mock-ups depict design improvements of color palette. They differ from actual data representations and are for illustrative purposes only.

Categorical color

After a lot of wrestling and iteration, I landed on a solution to create categorical color palette.    

01. Samsung Blue

02. Gold

03. Teal

04. Loyal Blue

05. Pink

06. Purple

07. Green

08. Red

09. Gold

10. Green

11. Purple

12. Blue

Note: These mock-ups depict design improvements of color palette. They differ from actual data representations and are for illustrative purposes only.

Categorical color

After a lot of wrestling and iteration, I landed on a solution to create categorical color palette.    

01. Samsung Blue

02. Gold

03. Teal

04. Loyal Blue

05. Pink

06. Purple

07. Green

08. Red

09. Gold

10. Green

11. Purple

12. Blue

Note: These mock-ups depict design improvements of color palette. They differ from actual data representations and are for illustrative purposes only.

Categorical color

After a lot of wrestling and iteration, I landed on a solution to create categorical color palette.    

01. Samsung Blue

02. Gold

03. Teal

04. Loyal Blue

05. Pink

06. Purple

07. Green

08. Red

09. Gold

10. Green

11. Purple

12. Blue

Note: These mock-ups depict design improvements of color palette. They differ from actual data representations and are for illustrative purposes only.

Categorical color

After a lot of wrestling and iteration, I landed on a solution to create categorical color palette.    

01. Samsung Blue

02. Gold

03. Teal

04. Loyal Blue

05. Pink

06. Purple

07. Green

08. Red

09. Gold

10. Green

11. Purple

12. Blue

Note: These mock-ups depict design improvements of color palette. They differ from actual data representations and are for illustrative purposes only.

Documentation

— Usage guideline

Documentation

— Usage guideline

The color usage guideline can provide a clear framework for consistent and effective color utilization in our data visualization.

What I learned from the internship at SRA

Designing together

As a UX design intern at a big tech company, I realized that many people have been spending time to solve users’ problems. They have reviewed data, iterated prototypes, and discussed constantly.

Asking and listening to them, I learned much more than I could have discovered in 14 weeks. I could get great feedback about how well my suggestions could improve users’ and businesses’ needs. I felt lucky to have been surrounded my passionate people, and I enjoyed working with them.

Accessibility and Effective Communication through Color

Accessibility and Effective Communication through Color
I deepened my understanding of the connection between color contrast and accessibility in design. I recognized the importance of creating inclusive visuals catering to diverse users. I also discovered how the strategic use of color can significantly enhance data communication by guiding users' attention, emphasizing crucial information, and understandably presenting data.

Request a case study

Want to learn more about this project? Get in touch to request a case study.

Request case study