How Primer’s updated light and dark theme color contrast strategy resolved hundreds of color-contrast-related accessibility issues over one thousand use cases.
Overview
The article discusses how GitHub's Primer color system enhances inclusivity through improved color contrast for its UI components. It details the systematic approach taken to address accessibility issues, including audits, automation, and collaboration with the brand team.
What You'll Learn
1
How to improve color contrast in UI components using a systematic approach
2
Why automating color contrast checks can enhance efficiency in design systems
3
How to conduct a comprehensive audit of color usage in design systems
Prerequisites & Requirements
- Understanding of color contrast and accessibility standards
- Familiarity with design tools like Figma(optional)
Key Questions Answered
What is the purpose of Primer's color system?
Primer's color system aims to create inclusive, responsive, and efficient user experiences by defining consistent colors across UI components and themes. It supports both light and dark modes, ensuring accessibility for a diverse range of users.
How did GitHub improve color contrast in its UI?
GitHub improved color contrast by conducting a comprehensive audit of color pairs and automating contrast checks using scripts. This approach allowed them to identify and resolve hundreds of color contrast issues across various use cases effectively.
What challenges did GitHub face in improving color accessibility?
GitHub faced challenges such as managing complex color relationships that required meeting multiple contrast ratios simultaneously. Additionally, manual testing of color pairs was time-consuming, prompting the need for automation to streamline the process.
How does GitHub ensure changes do not break existing color contrasts?
GitHub integrated a script as a GitHub action that runs on every pull request to check for color contrast compliance. This automation allows the team to catch any changes that might break existing contrast requirements before they are deployed.
Key Statistics & Figures
Accessibility issues resolved
hundreds
The improvements made to the color infrastructure resolved hundreds of accessibility issues across more than one thousand use cases.
Contrast requirements passed
color contrast requirements
The color contrast strategy resulted in passing color contrast requirements, significantly enhancing the accessibility of GitHub.com.
Technologies & Tools
Some links below are affiliate links. We may earn a commission if you make a purchase.
Design System
Primer
Used to create inclusive and accessible UI components for GitHub.
Design Tool
Figma
Initially used for manual testing of color pairs before automation.
Key Actionable Insights
1Implement a systematic approach to auditing color usage in your design systems to identify contrast issues.By conducting a thorough audit, teams can pinpoint specific color pairs that do not meet accessibility standards, allowing for targeted improvements.
2Automate color contrast checks to enhance efficiency and reduce manual testing time.Automation not only speeds up the process but also ensures consistency in maintaining accessibility standards across design updates.
3Collaborate with branding teams to ensure accessibility changes align with overall brand identity.This collaboration helps to balance accessibility improvements with brand consistency, ensuring that user experience enhancements do not compromise brand recognition.
Common Pitfalls
1
Relying solely on manual testing for color contrast can lead to inefficiencies and missed issues.
Manual testing is time-consuming and prone to human error, making it essential to implement automated solutions for consistent results.
Related Concepts
Color Contrast And Accessibility Standards
Design Systems And Their Components
Automation In Design Processes