Design accessibility for individuals with Material Design

Summary

In this talk, the Material Design team discusses their efforts to enhance accessibility and inclusivity in design. They introduce Material U, emphasizing personalization through dynamic color derived from user's wallpaper. The team shares research findings on the importance of contrast in design, challenging the assumption that a 3:1 contrast ratio is always necessary. They present new design principles and a redesigned switch component that prioritizes accessibility, demonstrating a commitment to creating equitable and personalized user experiences.

Takeaways

• 🎨 The Material Design team is focused on making the design system more accessible to cater to individual identities and preferences.
• 🌈 Dynamic Color allows users to personalize their experience by deriving color palettes from their wallpaper, providing a more personalized and varied experience.
• 🎯 To ensure accessibility, the team developed an algorithm that considers color contrast ratios, making sure that the dynamically generated color schemes meet accessibility standards.
• 🔍 Color theory was explored to identify levers for achieving contrast in a dynamic system, focusing on tone rather than hue or chroma for reliable contrast ratio determination.
• 📈 Research was conducted to understand the importance of non-text contrast and when it should be applied, showing that not all situations require a 3:1 contrast ratio.
• 💡 Key considerations for design include grouping components for better contrast, balancing emphasis across UI elements, and ensuring that prominent components do not solely rely on color for state indication.
• 📚 A set of principles was outlined to guide the design process towards inclusivity, emphasizing the importance of understanding user needs, working within industry standards creatively, and recognizing individual differences.
• 🔄 Switches, a widely used UI component, were redesigned with accessibility in mind, ensuring that color, size, and iconography work together to clearly communicate the switch's state.
• 🔧 The redesign of switches included a new architecture that allows for consistent contrast ratio satisfaction and provides flexibility in representing on and off states through various design cues.
• 🔗 A blog post summarizing the accessibility resources and findings discussed in the talk is available at material.io for further reading and guidance.

Q & A

What is the main focus of the talk by Karen and Julia?

The main focus of the talk is on designing for accessibility, sharing work done to make the design system more accessible, and discussing best practices for crafting accessible experiences.

What does 'Material U' represent in the context of the talk?

'Material U' represents an exploration of a more humanistic approach to design, which aims to celebrate the tension between design sensibility and personal preferences, and empower individual identities through product expressions.

How does the 'Dynamic Color' feature work in the design system?

Dynamic Color derives individualized color palettes from a person's wallpaper, photo, and applies it across the entire user experience. The system picks colors from the wallpaper image and translates a hue into tonal ranges, which are then applied across components.

What challenges does the dynamic color system introduce?

The dynamic color system introduces a level of unpredictability due to the many potential color combinations. The challenge is to maintain accessibility and usability while allowing for personalized color schemes based on wallpapers.

How does the design team ensure sufficient contrast in their color schemes?

The team ensures sufficient contrast by leveraging color theory to identify levers that achieve contrast in a dynamic system. They focus on tone, which can be measured repeatedly, to reliably determine color pairings that achieve desired contrast ratio levels.

What are the WACAG color contrast ratio requirements mentioned in the talk?

WACAG has established color contrast ratio requirements of 4.5:1 for regular size text against the background and 3:1 for measuring non-text contrast of meaningful or active components against adjacent colors.

What is the significance of the tonal system in making color schemes accessible?

The tonal system is central to making any color scheme accessible by default. It allows for a structured way to apply color roles to components, ensuring that the overall UI maintains the intended impact while meeting contrast ratio standards.

What are the three key considerations for determining if three-to-one contrast will be beneficial for users?

The three key considerations are: 1) Components grouped together may benefit from three-to-one contrast. 2) Independent and prominent components may not benefit from three-to-one contrast. 3) Components within a UI should maintain a balance, emphasizing design characteristics while considering the entire UI.

What are the principles for designing inclusive and equitable experiences?

The principles include understanding people's needs before defining a solution, working within minimum requirements set by industry standards as a creative opportunity, and recognizing that needs and wants can differ between individuals, providing a flexible and customized experience.

How did the research on switches contribute to the redesign?

The research on switches revealed that color is the most important factor in indicating whether a switch is on or off. The findings led to a redesign of switches that prioritize accessibility, with improvements such as ensuring color meets contrast ratio requirements and providing options for icons to convey state changes.

What are the improvements made to switches in the redesign?

The improvements include using color to consistently meet contrast ratio requirements, having the handle live within the track for simpler contrast ratio management, providing greater flexibility with the option to include icons for both on and off states, and utilizing size differences and styles to convey state changes.