Accessible branding is more than just meeting legal requirements – it’s about reaching more people and improving user experiences. This case study explores how a tech startup revamped its branding to make it more accessible, resulting in better user engagement, market expansion, and compliance with accessibility standards.
Key Takeaways:
- Why Accessibility Matters: Improves usability, expands market reach, and reduces legal risks.
- Steps Taken:
- Updated typography for readability with accessible fonts like Inter and Source Sans Pro.
- Improved text contrast and scalable text for better visibility.
- Adjusted color palettes to meet WCAG standards, including dark mode and high contrast options.
- Enhanced interactive elements for users with visual impairments.
- Results: Increased user engagement, fewer support requests, and access to new markets.
By focusing on accessible design, the startup not only improved its brand but also gained long-term business benefits. Learn how you can apply these strategies to your own branding efforts.
Accessible Style Guide | Colors – Know the 3 main mistakes and how to fix them
Brand Assessment and Planning
The startup took a close look at its brand elements using M Accelerator’s framework, uncovering several accessibility challenges. This analysis highlighted areas that needed adjustments to improve user experience.
Current Accessibility Gaps
The brand audit revealed several issues affecting accessibility, including:
- Primary Font: Decorative serif fonts were hard to read, especially at smaller sizes.
- Color Palette: Some color combinations didn’t meet contrast guidelines, making them difficult to see.
- Logo Design: The single-color logo posed challenges in dark mode, reducing its usability.
- Interactive Elements: Relying only on color for functionality created barriers for users with color vision deficiencies.
Setting Clear Targets
With the help of M Accelerator’s framework, the startup established measurable goals to address these gaps. For typography, the focus was on enhancing readability through better contrast and scalable text. The color system was updated to meet WCAG standards and include dark mode options. These improvements were tackled in a step-by-step process: typography first, followed by the color system, and finally, digital assets.
Typography Improvements
The team set clear goals to improve accessibility while maintaining the startup’s brand identity. A major focus was on upgrading typography to make content more user-friendly and inclusive.
Font Selection Process
The team selected Inter for body text and Source Sans Pro for headlines. These fonts were chosen for their clean letterforms, consistent stroke widths, open counters, and wide range of weights. They were rigorously tested across devices and ensured compatibility with assistive technologies.
Text Scaling Solutions
Switching to relative units (rem) instead of fixed pixels allowed text to adjust seamlessly to user preferences. This approach improved readability and made the interface more responsive.
Here’s how text scaling was structured:
| Screen Size | Body Text | Headlines | Line Height |
|---|---|---|---|
| Mobile (<768px) | 16px | 24–32px | 1.5 |
| Tablet (768–1024px) | 18px | 28–36px | 1.6 |
| Desktop (>1024px) | 20px | 32–40px | 1.7 |
In addition, the team standardized contrast ratios to further enhance readability and accessibility.
Text Contrast Standards
To ensure text was easy to read, the team implemented strict contrast guidelines, surpassing WCAG 2.1 recommendations in some cases:
- Body text: Minimum contrast ratio of 4.5:1.
- Headlines and larger text: Minimum contrast ratio of 3:1.
- Interactive elements (e.g., buttons, links): Higher contrast for better visibility, even in poor lighting.
A built-in contrast checker was introduced to automatically validate new text elements, ensuring these standards were consistently met. These changes were rolled out in phases, incorporating user feedback along the way. The results? Improved engagement and fewer bounce rates, especially among users with accessibility needs.
sbb-itb-32a2de3
Color System Updates
The startup has refined its color system to align with WCAG standards and maintain brand consistency, building on earlier typography updates.
WCAG-Compliant Colors
To improve readability, the team adjusted primary brand colors for better contrast ratios:
| Color Purpose | Original Color | Adjusted Color | Contrast Ratio |
|---|---|---|---|
| Primary Brand | #FF6B2B | #E85A1A | 4.8:1 |
| Secondary | #2B87FF | #1A75E8 | 4.6:1 |
| Background | #F8F9FA | #FFFFFF | 21:1 |
| Text | #6C757D | #495057 | 7.2:1 |
Using the WebAIM Color Contrast Checker, every color combination was validated to ensure text readability across different backgrounds and scenarios.
Some key changes included:
- Boosting contrast for interactive elements by 40%
- Adding focus indicators with a 3:1 contrast ratio
- Defining clear hover states for interactive elements
- Introducing colorblind-friendly error indicators
These updates provide a solid foundation for improving display options.
Display Mode Options
To accommodate a broader range of user needs, the team introduced new display modes:
- Dark Mode: A dark palette with #121212 as the base
- High Contrast Mode: Designed for users needing sharper contrast
- Reduced Motion: Eliminates animations to assist users with vestibular sensitivities
Each mode was tested with assistive technologies to ensure functionality. The system also uses CSS media queries to detect and respect user preferences for accessibility settings at the system level.
A detailed style guide now documents these updates, ensuring consistent application across all digital platforms.
Results and Business Effects
By revamping their typography and color system, the startup achieved measurable improvements. The updated branding not only improved user experience but also expanded their reach in the market.
Brand Update Rollout
The new design elements were introduced across key digital platforms, including websites, mobile apps, and marketing materials. To ensure consistency, the team updated internal documentation and conducted thorough assistive technology tests. This testing confirmed that accessibility standards were met across all platforms.
Performance Metrics
After the changes, the startup saw clear improvements in user engagement and accessibility compliance. Metrics showed longer site visits, easier mobile navigation, and a drop in accessibility-related support requests. These results reflected higher customer satisfaction.
Return on Investment
The updated design framework helped cut support costs and opened doors to new market segments, such as assistive technology users and older audiences. This not only boosted the company’s reputation but also solidified its market position, contributing to steady business growth.
Conclusion: Guidelines for Startups
Key Success Factors
Creating accessible branding requires careful planning, clear messaging, and a focus on user experience. Updates like improved typography and color systems show how thoughtful design choices can ensure compliance while standing out in the market. To achieve this, focus on key areas such as:
- Ensuring proper contrast in typography and color.
- Using scalable text for better readability.
- Maintaining consistent accessibility practices across all platforms.
These efforts help shape a brand identity that’s visually appealing and accessible to all.
Implementation Steps
Start by auditing your current brand assets to identify areas needing improvement. Update your colors and typography to meet WCAG standards, ensuring readability across devices. Design your materials to work seamlessly in various display modes, catering to diverse user needs. These foundational steps can also prepare you to tap into specialized accelerator programs for further growth.
"After this startup program, I have a lot more clarity in which direction we should take, which tools we can use, and how we can go about it. — Distributing your value proposition in a way that is economical. That was something new for me. So often, we tend to design solutions that outcompete your competitors in all aspects instead of focusing on the factor that has the most impact." – Melissa Kariuki, Founder at Whip Music Africa, Product Manager at Google
The Role of M Accelerator
M Accelerator offers a framework that helps founders incorporate accessibility into their go-to-market strategies. Through coaching programs, startups gain insights into content marketing and communication techniques that resonate with diverse audiences.
Their hands-on approach ensures startups can balance accessibility needs with maintaining a strong brand identity. With their expertise in digital marketing, they guide businesses in making design choices that not only meet accessibility standards but also drive growth. This support enhances brand accessibility while fostering overall business success.
"M Accelerator is a great starting point for anyone who is considering taking the leap to start a company. It provides mentorship, support from the community, and networking opportunities. And the support doesn’t stop when the startup program ends. They are always there to support the founders through their journey." – Ellen Deng, Founder at Vinofy
