Equivis ~ Designing for Inclusive Vision
Equivis ~ Designing for Inclusive Vision
Equivis ~ Designing for Inclusive Vision
Equivis ~ Designing for Inclusive Vision
A color-independent accessibility design library for color-blind users!
A color-independent accessibility design library for color-blind users!
Color-independent accessibility design system for color-blind users!
A color-independent accessibility design library for color-blind users!
My Role
My Role
My Role
My Role
Product Designer
Product Designer
Product Designer
Product Designer
Timeline
Timeline
Timeline
2 Weeks
2 Weeks
2 Weeks
2 Weeks
Tools
Tools
Tools
Tools
Figma, WebAIM, Color Contrast
Figma, WebAIM, Color Contrast
Figma, WebAIM, Color Contrast
Figma, WebAIM, Color Contrast
PROJECT OVERVIEW
PROJECT OVERVIEW
PROJECT OVERVIEW
Design Beyond Color
Design Beyond Color
Design Beyond Color
Design Beyond Color
Equivis symbolizes 'equal vision,' reflecting the goal of creating a dataviz design library that ensures equitable and accessible experiences for all users, regardless of color perception.
Equivis symbolizes 'equal vision,' reflecting the goal of creating a dataviz design library that ensures equitable and accessible experiences for all users, regardless of color perception.
Equivis symbolizes 'equal vision,' reflecting the goal of creating a dataviz design library that ensures equitable and accessible experiences for all users, regardless of color perception.
Equivis symbolizes 'equal vision,' reflecting the goal of creating a dataviz design library that ensures equitable and accessible experiences for all users, regardless of color perception.
THE PROBLEM
THE PROBLEM
THE PROBLEM
Color is powerful, but not everyone experiences it the same way
Color is powerful, but not everyone experiences it the same way
Color is powerful, but not everyone experiences it the same way
Color is powerful, but not everyone experiences it the same way
I observed most digital experiences rely heavily on color to communicate key information, leaving color blind users struggling to navigate interfaces. This leads to:
I observed most digital experiences rely heavily on color to communicate key information, leaving color blind users struggling to navigate interfaces. This leads to:
I observed most digital experiences rely heavily on color to communicate key information, leaving color blind users struggling to navigate interfaces. This leads to:
I observed most digital experiences rely heavily on color to communicate key information, leaving color blind users struggling to navigate interfaces. This leads to:
User frustration
Longer task completion times
Exclusion from critical insights
User frustration
Longer task completion times
Exclusion from critical insights
User frustration
Longer task completion times
Exclusion from critical insights
User frustration
Longer task completion times
Exclusion from critical insights
GOALS
GOALS
GOALS
WHY DOES THIS MATTER?
WHY DOES THIS MATTER?
WHY DOES THIS MATTER?
Equivis was inspired by my observation that many interfaces do not fully adhere to WCAG 2.2 guidelines. I wanted to deepen my understanding of this and broaden my knowledge in the process.
Equivis was inspired by my observation that many interfaces do not fully adhere to WCAG 2.2 guidelines. I wanted to deepen my understanding of this and broaden my knowledge in the process.
Equivis was inspired by my observation that many interfaces do not fully adhere to WCAG 2.2 guidelines. I wanted to deepen my understanding of this and broaden my knowledge in the process.
Equivis was inspired by my observation that many interfaces do not fully adhere to WCAG 2.2 guidelines. I wanted to deepen my understanding of this and broaden my knowledge in the process.
Color blindness affects 300 million people globally (about 8% of men and 0.5% of women), yet many interfaces heavily rely on color differentiation.
Color blindness affects 300 million people globally (about 8% of men and 0.5% of women), yet many interfaces heavily rely on color differentiation.
Color blindness affects 300 million people globally (about 8% of men and 0.5% of women), yet many interfaces heavily rely on color differentiation.
Color blindness affects 300 million people globally (about 8% of men and 0.5% of women), yet many interfaces heavily rely on color differentiation.
This sparked my mission: “Design with empathy. Build for everyone.”
This sparked my mission: “Design with empathy. Build for everyone.”
This sparked my mission: “Design with empathy. Build for everyone.”
This sparked my mission: “Design with empathy. Build for everyone.”
FOCUS: ACCESSIBILITY IN "DATA VISUALIZATION"
FOCUS: ACCESSIBILITY IN "DATA VISUALIZATION"
FOCUS: ACCESSIBILITY IN "DATA VISUALIZATION"
My experience working on projects involving various databases and tools like Tableau and Power BI revealed a critical gap—most visualizations lacked accessibility for users with visual impairments.
My experience working on projects involving various databases and tools like Tableau and Power BI revealed a critical gap—most visualizations lacked accessibility for users with visual impairments.
My experience working on projects involving various databases and tools like Tableau and Power BI revealed a critical gap—most visualizations lacked accessibility for users with visual impairments.
My experience working on projects involving various databases and tools like Tableau and Power BI revealed a critical gap—most visualizations lacked accessibility for users with visual impairments.
My experience working on projects involving various databases and tools like Tableau and Power BI revealed a critical gap—most visualizations lacked accessibility for users with visual impairments.
Data visualization relies heavily on color to highlight information and relationships. While color can guide the viewer’s eye and evoke emotions, optimizing for accessibility requires thoughtful design beyond traditional methods.
Data visualization relies heavily on color to highlight information and relationships. While color can guide the viewer’s eye and evoke emotions, optimizing for accessibility requires thoughtful design beyond traditional methods.
Data visualization relies heavily on color to highlight information and relationships. While color can guide the viewer’s eye and evoke emotions, optimizing for accessibility requires thoughtful design beyond traditional methods.
Data visualization relies heavily on color to highlight information and relationships. While color can guide the viewer’s eye and evoke emotions, optimizing for accessibility requires thoughtful design beyond traditional methods.
Data visualization relies heavily on color to highlight information and relationships. While color can guide the viewer’s eye and evoke emotions, optimizing for accessibility requires thoughtful design beyond traditional methods.
RESEARCH & INSIGHTS
RESEARCH & INSIGHTS
RESEARCH & INSIGHTS
I audited over 20+ websites and found that most failed to meet basic accessibility standards, especially in data visualizations
I audited over 20+ websites and found that most failed to meet basic accessibility standards, especially in data visualizations
I audited over 20+ websites and found that most failed to meet basic accessibility standards, especially in data visualizations
I audited over 20+ websites and found that most failed to meet basic accessibility standards, especially in data visualizations
Insights
Insights
Insights
Insights
Ensure color independence through patterns, shapes, and text.
Meet and exceed contrast ratio requirements.
Offer modular, reusable components.
Ensure color independence through patterns, shapes, and text.
Meet and exceed contrast ratio requirements.
Offer modular, reusable components.
Ensure color independence through patterns, shapes, and text.
Meet and exceed contrast ratio requirements.
Offer modular, reusable components.
Ensure color independence through patterns, shapes, and text.
Meet and exceed contrast ratio requirements.
Offer modular, reusable components.
Key Principle: “Don’t rely on color alone. Use icons, textures, patterns, labels, and sometimes go bold.”
Key Principle: “Don’t rely on color alone. Use icons, textures, patterns, labels, and sometimes go bold.”
Key Principle: “Don’t rely on color alone. Use icons, textures, patterns, labels, and sometimes go bold.”
Key Principle: “Don’t rely on color alone. Use icons, textures, patterns, labels, and sometimes go bold.”
DESIGN PROCESS: BUILDING EQUIVIS
DESIGN PROCESS: BUILDING EQUIVIS
DESIGN PROCESS: BUILDING EQUIVIS
I followed an iterative process to build a library of components that are color-blind-friendly and visually inclusive. However, along the way, there were a few roadblocks that challenged my design decisions.
I followed an iterative process to build a library of components that are color-blind-friendly and visually inclusive. However, along the way, there were a few roadblocks that challenged my design decisions.
I followed an iterative process to build a library of components that are color-blind-friendly and visually inclusive. However, along the way, there were a few roadblocks that challenged my design decisions.
I followed an iterative process to build a library of components that are color-blind-friendly and visually inclusive. However, along the way, there were a few roadblocks that challenged my design decisions.
Challenge #1: Defining an Accessible & Flexible Color Palette
Challenge #1: Defining an Accessible & Flexible Color Palette
Challenge #1: Defining an Accessible & Flexible Color Palette
Challenge #1: Defining an Accessible & Flexible Color Palette
Designing a color palette that worked across multiple chart types (bar, line, radar, pie) while remaining accessible for users with various types of color blindness. Many palettes that passed contrast standards lacked clarity when applied to complex data visualizations.
Designing a color palette that worked across multiple chart types (bar, line, radar, pie) while remaining accessible for users with various types of color blindness. Many palettes that passed contrast standards lacked clarity when applied to complex data visualizations.
Designing a color palette that worked across multiple chart types (bar, line, radar, pie) while remaining accessible for users with various types of color blindness. Many palettes that passed contrast standards lacked clarity when applied to complex data visualizations.
Designing a color palette that worked across multiple chart types (bar, line, radar, pie) while remaining accessible for users with various types of color blindness. Many palettes that passed contrast standards lacked clarity when applied to complex data visualizations.
What I did
What I did
What I did
Built a color palette with a minimum contrast ratio of 3:1 for graphics and 4.5:1 for text per WCAG, tested combinations using color-blind simulators (Stark, WebAIM, Color Contrast), adjusted luminance for clarity!
Built a color palette with a minimum contrast ratio of 3:1 for graphics and 4.5:1 for text per WCAG, tested combinations using color-blind simulators (Stark, WebAIM, Color Contrast), adjusted luminance for clarity!
Built a color palette with a minimum contrast ratio of 3:1 for graphics and 4.5:1 for text per WCAG, tested combinations using color-blind simulators (Stark, WebAIM, Color Contrast), adjusted luminance for clarity!
Built a color palette with a minimum contrast ratio of 3:1 for graphics and 4.5:1 for text per WCAG, tested combinations using color-blind simulators (Stark, WebAIM, Color Contrast), adjusted luminance for clarity!
DATA VISUALIZATION COMPONENTS
DATA VISUALIZATION COMPONENTS
DATA VISUALIZATION COMPONENTS
Used unique patterns, monochromatic colors, varied data point shapes, hover tooltips, and de-emphasizing effects to ensure accessibility, allowing users to differentiate elements and isolate data points, regardless of color perception.
Used unique patterns, monochromatic colors, varied data point shapes, hover tooltips, and de-emphasizing effects to ensure accessibility, allowing users to differentiate elements and isolate data points, regardless of color perception.
Used unique patterns, monochromatic colors, varied data point shapes, hover tooltips, and de-emphasizing effects to ensure accessibility, allowing users to differentiate elements and isolate data points, regardless of color perception.
Used unique patterns, monochromatic colors, varied data point shapes, hover tooltips, and de-emphasizing effects to ensure accessibility, allowing users to differentiate elements and isolate data points, regardless of color perception.
Bar Chart
Bar Chart
Bar Chart
Bar Chart
Bar Chart
Line Chart
Line Chart
Line Chart
Line Chart
Line Chart
Pie Chart
Pie Chart
Pie Chart
Pie Chart
Pie Chart
Donut Chart
Donut Chart
Donut Chart
Donut Chart
Donut Chart
Radar Chart
Radar Chart
Radar Chart
Radar Chart
Radar Chart
Area Chart
Area Chart
Area Chart
Area Chart
Area Chart
Once I wrapped up designing the UI components—complete with accessible and clear visual hierarchies—it was time for a reality check. Would these designs hold up for users with different types of color blindness?
Once I wrapped up designing the UI components—complete with accessible and clear visual hierarchies—it was time for a reality check. Would these designs hold up for users with different types of color blindness?
Once I wrapped up designing the UI components—complete with accessible and clear visual hierarchies—it was time for a reality check. Would these designs hold up for users with different types of color blindness?
Once I wrapped up designing the UI components—complete with accessible and clear visual hierarchies—it was time for a reality check. Would these designs hold up for users with different types of color blindness?
Challenge #2: How Do I Test for Every Type of Color Blindness?
Challenge #2: How Do I Test for Every Type of Color Blindness?
Challenge #2: How Do I Test for Every Type of Color Blindness?
Challenge #2: How Do I Test for Every Type of Color Blindness?
There are many types of color blindness (and no, one-size-fits-all testing doesn’t cut it). Different users perceive colors in drastically different ways, and I couldn’t just hope for the best. I needed a strategy to ensure that my designs worked no matter what kind of color perception users had—or didn’t have
There are many types of color blindness (and no, one-size-fits-all testing doesn’t cut it). Different users perceive colors in drastically different ways, and I couldn’t just hope for the best. I needed a strategy to ensure that my designs worked no matter what kind of color perception users had—or didn’t have
There are many types of color blindness (and no, one-size-fits-all testing doesn’t cut it). Different users perceive colors in drastically different ways, and I couldn’t just hope for the best. I needed a strategy to ensure that my designs worked no matter what kind of color perception users had—or didn’t have
There are many types of color blindness (and no, one-size-fits-all testing doesn’t cut it). Different users perceive colors in drastically different ways, and I couldn’t just hope for the best. I needed a strategy to ensure that my designs worked no matter what kind of color perception users had—or didn’t have
SOLUTION: GRAYSCALE TESTING (Because Color Isn’t Always an Option)
SOLUTION: GRAYSCALE TESTING (Because Color Isn’t Always an Option)
SOLUTION: GRAYSCALE TESTING (Because Color Isn’t Always an Option)
Relying on color alone is risky. So, I ran grayscale testing to ensure patterns, shapes, and interactions kept data and UI elements clear and distinguishable—even in monochrome, low vision, or less-than-ideal display conditions.
Relying on color alone is risky. So, I ran grayscale testing to ensure patterns, shapes, and interactions kept data and UI elements clear and distinguishable—even in monochrome, low vision, or less-than-ideal display conditions.
Relying on color alone is risky. So, I ran grayscale testing to ensure patterns, shapes, and interactions kept data and UI elements clear and distinguishable—even in monochrome, low vision, or less-than-ideal display conditions.
Relying on color alone is risky. So, I ran grayscale testing to ensure patterns, shapes, and interactions kept data and UI elements clear and distinguishable—even in monochrome, low vision, or less-than-ideal display conditions.
USER TESTING
USER TESTING
USER TESTING
To gather user feedback on the design library, I conducted unmoderated test sessions with 5 color-blind users and 5 general users, then synthesized the findings.
To gather user feedback on the design library, I conducted unmoderated test sessions with 5 color-blind users and 5 general users, then synthesized the findings.
To gather user feedback on the design library, I conducted unmoderated test sessions with 5 color-blind users and 5 general users, then synthesized the findings.
To gather user feedback on the design library, I conducted unmoderated test sessions with 5 color-blind users and 5 general users, then synthesized the findings.
Findings
Findings
Findings
Findings
REFLECTION
REFLECTION
REFLECTION
Designing accessible data visualizations taught me that small, thoughtful changes like patterns and direct labeling benefit everyone, not just color-blind users. Balancing aesthetics with usability was challenging but rewarding, proving that accessibility enhances visual clarity.
Designing accessible data visualizations taught me that small, thoughtful changes like patterns and direct labeling benefit everyone, not just color-blind users. Balancing aesthetics with usability was challenging but rewarding, proving that accessibility enhances visual clarity.
Designing accessible data visualizations taught me that small, thoughtful changes like patterns and direct labeling benefit everyone, not just color-blind users. Balancing aesthetics with usability was challenging but rewarding, proving that accessibility enhances visual clarity.
Designing accessible data visualizations taught me that small, thoughtful changes like patterns and direct labeling benefit everyone, not just color-blind users. Balancing aesthetics with usability was challenging but rewarding, proving that accessibility enhances visual clarity.
As a designer, I’m committed to creating inclusive solutions that empower all users.
As a designer, I’m committed to creating inclusive solutions that empower all users.
As a designer, I’m committed to creating inclusive solutions that empower all users.
As a designer, I’m committed to creating inclusive solutions that empower all users.
IF I HAD MORE TIME
IF I HAD MORE TIME
IF I HAD MORE TIME
I would evolved this project into something much bigger, because the feedback so far has been pretty good! Here’s what I would do if I had more time:
I would evolved this project into something much bigger, because the feedback so far has been pretty good! Here’s what I would do if I had more time:
I would evolved this project into something much bigger, because the feedback so far has been pretty good! Here’s what I would do if I had more time:
I would evolved this project into something much bigger, because the feedback so far has been pretty good! Here’s what I would do if I had more time:
Boost Contrast & Patterns
Refine color combos and introduce bolder patterns for even clearer differentiation.
Expand Usability Testing
Involve a more diverse group of users, including those with low vision, to ensure inclusivity.
Go Open Source
Turn this into a collaborative, open-source design system—because accessibility is better when we build it together.
Boost Contrast & Patterns
Refine color combos and introduce bolder patterns for even clearer differentiation.
Expand Usability Testing
Involve a more diverse group of users, including those with low vision, to ensure inclusivity.
Go Open Source
Turn this into a collaborative, open-source design system—because accessibility is better when we build it together.
Boost Contrast & Patterns
Refine color combos and introduce bolder patterns for even clearer differentiation.
Expand Usability Testing
Involve a more diverse group of users, including those with low vision, to ensure inclusivity.
Go Open Source
Turn this into a collaborative, open-source design system—because accessibility is better when we build it together.
Boost Contrast & Patterns
Refine color combos and introduce bolder patterns for even clearer differentiation.
Expand Usability Testing
Involve a more diverse group of users, including those with low vision, to ensure inclusivity.
Go Open Source
Turn this into a collaborative, open-source design system—because accessibility is better when we build it together.
Let's Work Together?
Now that you've come this far, let's work together on your next product?
Let's Work Together?
Now that you've come this far, let's work together on your next product?
Let's Work Together?
Now that you've come this far, let's work together on your next product?
Let's Work Together?
Now that you've come this far, let's work together on your next product?
Let's Work Together?
Now that you've come this far, let's work together on your next product?