🎯 Enhancing WCAG Compliance: Bingo App UI Improvements
Importance of Accessibility for UK Bingo Players
📊 Did you know? In 2020, 57% of online UK bingo players were aged 45 and above. As bingo continues to attract a diverse audience, making the experience clear, easy to navigate, and accessible to everyone is more important than ever.
To achieve this, I improved accessibility in the Bingo Hybrid & Native App by integrating WCAG AA standards, alongside Google Material Guidelines and Apple Human Interface Guidelines (HIG). My focus was on better readability, smoother interactions, and a more intuitive design—ensuring that all players, regardless of ability, can enjoy the game effortlessly.
Key Considerations for Accessibility
🏷️ Better Readability: Larger text and improved contrast make content clearer and easier to read.
🎯 Effortless Interaction: Optimised tap targets and simplified controls enhance usability for all players.
🔔 Alternative Feedback Options: Subtitles and visual cues provide essential game feedback beyond sound.
🧭 Intuitive Navigation: A well-structured layout makes the experience smooth and engaging.
By addressing these key areas, I enhanced the overall user experience while ensuring compliance with accessibility guidelines.
WCAG Improvements
⏱️Time: 2024, 2 months
📱Type: Bingo Hybrid & Native App - Enhancing Accessibility in the Design System & UI
🧑🏼💻 Role: Design System Architect, UI/UX Designer
✏️Tools: Figma, Adobe XD, ZeroHeight, Storybook
📝 Project Overview
This project involved refining the design system and UI components to ensure compliance with WCAG AA standards. Key improvements included:
Text Legibility: Larger font sizes and improved readability.
Typography Unification: Standardised and organised text styles to ensure a consistent and structured visual experience.
Colour Contrast Enhancements: Meeting the 4.5:1 contrast ratio.
Touch Target Optimisation: Expanding tap areas to meet the 44x44px minimum standard.
Layout Consistency & Visual Hierarchy: Standardising spacing and element organisation.
Clear Confirmation & Feedback: Providing better user notifications and guidance.
Reduced Cognitive Load: Enhancing navigation clarity and interaction ease.
💡 Challenges
While working on accessibility improvements, I faced key design challenges that impacted usability and inclusivity:
Inconsistent typography & styles: Text styles varied across the app, leading to a lack of visual consistency.
Unstructured UI elements: Poor alignment and spacing created a cluttered experience.
Limited feedback cues: The absence of clear confirmations made interactions less intuitive.
Addressing these challenges was crucial to creating a cohesive, accessible, and user-friendly interface.
🔍 Research & UI Audit
I began with a UI audit of existing screens to identify inconsistencies. This involved:
Identifying and mapping duplicate components that led to unnecessary design variations.
Assessing typography, color usage, button styles, and spacing for consistency and clarity.
Verifying accessibility compliance by checking against WCAG AA standards.
Referencing industry guidelines such as Google Material Guidelines and Apple HIG.
Analyzing competitor platforms to identify best practices for accessibility in gaming UI design.
Collaborating with developers to ensure all design system enhancements were technically feasible and effectively implemented.
📌Findings
Inconsistent Text Styles: Multiple variations (e.g., Label 8px, Label 9px, Label 10px) created visual clutter and disrupted readability.
Safe Area Margin Issues: Margins were smaller than recommended (12px instead of 16px) as per Material Design Guidelines, affecting spacing and structure.
Insufficient Tap Targets: Some interactive elements did not meet the 44x44px minimum tap area, leading to usability challenges.
Contrast & Visibility Problems: Some text elements failed AAA contrast standards, reducing readability for users with visual impairments.
Small Elements & Interaction Issues: Certain UI elements were too small, making them difficult to see and interact with.
🔠 Typography & Readability Fixes
A key part of the WCAG audit was ensuring that all typography met accessibility standards. Below is an audit of font styles, highlighting areas that failed WCAG compliance and the fixes implemented:
| Style Name | Font Size (px) | Weight | WCAG Compliance |
|---|---|---|---|
| Subtitle | 10 | Bold | Pass |
| Paragraph | 10 | Bold | Pass with high contrast |
| Label | 9 | Regular | Fail - Increase size or contrast |
| Button / Primary | 10 | Bold | Fail - Increase size or contrast |
| Call | 8 | Regular | Fail - Increase size or contrast |
| Ball Large | 23 | Bold | Pass |
| Ball Small | 11 | Bold | Pass with high contrast |
| Ribbon | 8 | Regular | Fail - Increase size or contrast |
Why It Matters
Typography plays a crucial role in accessibility, ensuring that content is legible and easy to understand. By increasing font sizes, improving contrast, and maintaining consistency, these enhancements provide a more user-friendly experience. The following section visually demonstrates these improvements in action.
🆚 Side-by-Side Comparisons
To highlight the impact of these accessibility improvements, the following before & after comparisons showcase key refinements in text readability, contrast, interaction areas, and layout consistency. These changes significantly improve usability and compliance with WCAG AA standards, ensuring a more accessible and seamless gaming experience.
Before & After UI Enhancements
| Aspect | Before (Issues) ❌ | After (Fixes) ✅ |
|---|---|---|
| Text Size & Readability | Smallest text as low as 8px, below the 12px WCAG AA standard, making it hard to read. | Increased smallest text to 12px, ensuring WCAG AA compliance and better readability. |
| Header Readability | Subtitle 10px, Labels 9px, Paragraphs 10px—causing readability strain. | Subtitle increased to 14px, Labels 12px, and Paragraphs 13px (bold) for clarity. |
| Contrast & Visibility | Some text contrast did not meet AAA compliance, making it harder for visually impaired users. | Contrast improved to 6.4:1, ensuring better visibility across all UI elements. |
| Tappable Targets | Some buttons smaller than 44x44px, making them hard to tap, especially on mobile. | All tap targets increased to 44x44px for easier and more accurate interactions. |
| Game Number Selection | Small buttons and tight spacing made selection frustrating for users with motor impairments. | Enlarged buttons to 14px with increased spacing for better usability. |
| Layout & Alignment | Layout margin of 12px led to inconsistent spacing across devices. | Adjusted layout margin to 16px-20px (Safe Area) for improved consistency. |
| Header Spacing | Compressed layout affected jackpot name and amount visibility. | Increased spacing for better readability and emphasis on key information. |
| Caller Area Spacing | Tiny text (8px-9px) made it difficult to read. | Increased text size in caller area to 12px-13px for improved usability. |
| Game Area Enhancements | Too many balls/numbers displayed, with small font (11px) reducing readability. | Reduced displayed elements and increased text size to 14px for better clarity. |
| Ticket Number Selection | Selected ticket numbers were hard to distinguish due to low contrast and small font (8px). | Improved selection contrast and increased text size to 12px for better visibility. |
| Ball Number Size | Small ball text (11px) was difficult to read at a glance. | Increased ball number text to 13px for improved legibility. |
| Footer Text | Game ID text was 10px, making it hard to read at the bottom of the screen. | Increased Game ID text to 12px for better readability. |
| Footer Padding | Footer lacked 16px layout margin, causing a cramped appearance. | Added 16px margin for improved spacing and overall layout balance. |
✨ Why It Works
These improvements follow WCAG AA guidelines, focusing on:
Increased Readability: Larger, clearer text helps all users, especially those with visual impairments.
Higher Contrast: Ensures important information stands out, making it easier to navigate.
Optimized Interactions: Enlarged tap targets and better spacing reduce frustration, particularly for users with motor impairments.
Streamlined Layout: Well-structured spacing improves overall usability and engagement.
By addressing these core areas, the UI ensures a more accessible, user-friendly, and inclusive experience for all players.
📝 Interactive Comparison
Experience the before & after improvements interactively! Use the slider below to compare the original UI with the enhanced, WCAG-compliant version.
🔍 Key Takeaways from the Comparison
The refined UI improves clarity, usability, and accessibility by addressing key pain points from the original design.
Better Readability 📖 – Increased text sizes ensure compliance with WCAG AA and improve legibility.
Higher Contrast 🎨 – Enhanced visibility makes key game elements clearer, especially for low-vision users.
Optimized Interactions 🎯 – Larger tap targets and better spacing improve touch accuracy and ease of use.
Streamlined Layout 🏗 – Consistent margins and spacing create a structured, clutter-free experience.
These enhancements make the Bingo app more inclusive, ensuring seamless gameplay for everyone—regardless of ability or device.
🎨 Contrast Enhancements
As part of the WCAG audit, I evaluated and refined contrast across five surface colours and two text styles to enhance readability and accessibility. The refinements applied to text, buttons, and UI surfaces significantly improve visibility, reduce eye strain, and ensure compliance with WCAG AA standards.
❌ Before: Issues Identified
Before the contrast refinements, several UI elements failed WCAG AA standards, causing visibility issues and potential eye strain for players. Key areas needing improvement included:
Low contrast text, making content hard to read.
Overly high contrast buttons, creating visual strain.
Inconsistent UI element contrast, reducing clarity and accessibility.
Contrast Enhancements
| UI Element | Before (Contrast Issue) ❌ | After (Fixed Contrast) ✅ | Improvement |
|---|---|---|---|
| Container Text | 6.4:1 (Low Contrast, Hard to Read) | 14.85:1 (High Contrast, WCAG AA) | Easier to read |
| Primary Button Text | 16.2:1 (Too High Contrast, Straining) | 13.37:1 (Balanced Contrast) | Less harsh, more legible |
| Expansion Panel | 5.27:1 (Fails WCAG for small text) | 6.39:1 (Improved Contrast) | More readable for UI elements |
| Feature Bar | 4.88:1 (Low Contrast, Hard to Distinguish) | 11.12:1 (Better Visibility) | More readable |
💡 Key Takeaways from the Comparison
The contrast improvements significantly enhance readability, reduce eye strain, and ensure compliance with WCAG AA standards. The refinements applied to text, buttons, and UI surfaces create a more accessible and user-friendly experience for all players.
✔ Best contrast for text: 7:1 - 15:1 for comfortable reading and reduced strain.
✔ Avoid black on white: Use dark grey instead to minimise harsh contrast effects.
✔ For buttons: Ensure a minimum contrast ratio of 4.5:1 for primary CTAs to improve visibility.
✔ For UI elements: Maintain at least a 3:1 contrast ratio against backgrounds to ensure clear separation.
These enhancements improve inclusivity in the Bingo app, ensuring that players with varying vision capabilities can interact seamlessly with the interface. By balancing contrast effectively, the UI maintains high readability, usability, and visual comfort, making it easier to engage with the game for extended periods.
🟣 Example 1 - Improving Text Contrast on Container
Challenge
The text on container elements had insufficient contrast (6.4:1), making it hard to read. White text (#FFFFFF) on a bright background was too harsh, leading to readability issues.
Solution
✔ Increased contrast to 14.85:1 for better visibility.
✔ Replaced pure white text with a softer bright-gray to reduce eye strain.
✔ Ensured compliance with WCAG AA for both normal and large text.
Impact
✅ Enhanced legibility without excessive contrast strain.
✅ Text is now easier to read, making the interface more accessible.
📌 Visual Comparison
Below you can see before & after images with a slider effect for interactive comparison.
Key Takeaways from the Comparison
| Aspect | Before ❌ | After ✅ |
|---|---|---|
| Contrast | 6.4:1 | 14.85:1 |
| Text Color | White text (#FFFFFF) too harsh | Bright-gray used for better balance |
| Accessibility Compliance | ❌ Fails WCAG AA & AAA | ✅ Passes WCAG AA & AAA |
| Readability & Eye Strain | ❌ Harder to read, more strain | ✅ Easier on the eyes, better usability |
🟡 Example 2 - Fixing Contrast Issues in Buttons for Readability
Challenge:
Buttons and interactive elements had insufficient contrast, especially in gradients. The primary button’s text contrast was too low (4.16:1 and 3.97:1), failing WCAG standards.
Solution:
✔ Adjusted contrast in gradient backgrounds for clearer text.
✔ Ensured primary CTAs met a minimum 4.5:1 contrast ratio.
✔ Increased font size for better readability, following Material Guidelines (Text Button: 14px).
Impact:
✅ Buttons are now more distinguishable and easier to interact with.
✅ Complies with WCAG AA, ensuring usability for all users.
📌 Visual Comparison:
Below you can see before & after images with a slider effect for interactive comparison.
Key Takeaways from the Comparison
| Aspect | Before ❌ | After ✅ |
|---|---|---|
| CTA Button Background | Top and bottom gradient colors did not achieve the recommended 4.5:1 contrast required by accessibility guidelines. | Adjusted gradient for higher readability, meets WCAG AA recommendations. |
| Font Size in Buttons | 12px (too small) | 14px (Matches Material Guidelines) |
| Accessibility Compliance | ❌ Failed WCAG AA for buttons | ✅ Passes WCAG AA, improving usability |
| User Interaction | Buttons were harder to distinguish | Buttons are more visible and easier to tap |
🔍 Checking Primary Button Vs Expansion Panel
Why is this an interesting example?
Here, we compare gradient vs. gradient, and the best approach is to check the contrast colours of the top and bottom hex codes separately.
This example also highlights a key principle: UI elements and text have different contrast success criteria.
✅ For UI elements (like buttons):
Minimum contrast: 3:1
Recommended for important buttons: 4.5:1
✅ For text contrast (readability):
Best range: 7:1 - 15:1
Conclusion: This analysis shows why it's important to treat UI contrast differently from text contrast when ensuring WCAG compliance and readability.
🎯 Tappable Targets & Padding: Enhancing Usability & Compliance
As part of the WCAG audit, I evaluated and refined tappable targets and spacing to improve interaction ease. WCAG requires a minimum touch target size of 44x44 px (✅ meeting AA compliance), while 48x48 px is recommended for AAA compliance to further enhance accessibility.
Some UI elements such as Jackpot and Info Icons in the initial design did not meet these standards, causing usability challenges—especially for people who use touch interfaces with varying levels of precision. By optimizing tap targets and refining padding, I ensured better accessibility, improved usability, and compliance with WCAG & Material Design standards.
✋ Tappable Targets: Improving Interaction & Accessibility
Before & After Comparison:
Tappable Targets Enhancements
| Aspect | Before (Issues) ❌ | After (Fixes) ✅ |
|---|---|---|
| Tap Target Size | Icons & buttons were smaller than 44x44px, making them difficult to press. | All interactive elements increased to 44x44px, ensuring easier and more accurate tapping. |
| Interaction Ease | Users with varying touch precision struggled to tap small elements accurately. | Improved tap target size prevents misclicks and accidental taps, creating a smoother interaction. |
| Padding & Spacing | Minimal padding around icons led to cluttered interactions and difficult navigation. | Invisible Padding enhancements ensure extra spacing around buttons and icons, allowing for easier selection and better usability. |
| WCAG Compliance | Failed WCAG AA standards due to tap target size issues. | Now fully compliant with WCAG AA & Material Design Guidelines. |
🚀 Key Takeaways from the Comparison
✅ Bigger tap targets = better usability!
✅ More padding = cleaner layout & easier navigation!
✅ WCAG compliance = More inclusive experience for all users!
✅ Prevents accidental taps and improves interaction accuracy!
📏 Padding Fixes: Aligning with Material Design Guidelines
Proper spacing is crucial for both readability and interaction comfort. Initially, UI elements had inconsistent padding, leading to alignment and usability issues.
📌 Material Design (Google) sets explicit padding rules to ensure usability and readability across all interactive elements:
✅ Horizontal padding: At least 8–16 dp per side.
✅ Vertical padding: At least 6–10 dp per side.
By refining the horizontal and vertical padding, I ensured that all interactive elements maintain a clean, structured layout while meeting Material Design and accessibility standards.
Before & After Comparison:
Padding Fixes Enhancements
| Aspect | Before (Issues) ❌ | After (Fixes) ✅ |
|---|---|---|
| Horizontal Padding | Only 5px, failing Material Design’s 8-16dp requirement. | Increased to 8dp, aligning with Material Design guidelines. |
| Vertical Padding | Inconsistent (sometimes 6px, sometimes 3px), causing alignment issues. | Standardized to 6px, ensuring consistency across all elements. |
| Spacing & Alignment | Elements felt too tightly packed, leading to a cluttered UI. | Improved spacing creates a balanced and structured layout. |
| Material Design Compliance | Did not follow Google’s Material Design padding standards. | Now fully compliant with Material Design & WCAG guidelines. |
🚀 Key Takeaways from the Comparison
✅ Bigger tap targets = better usability!
✅ More padding = cleaner layout & easier navigation!
✅ WCAG compliance = More inclusive experience for all users!
✅ Prevents accidental taps and improves interaction accuracy!
🔍 Why It Matters
By refining tap targets and padding, I made the interface more structured, accessible, and user-friendly. These optimizations ensure frustration-free gameplay for all users, including those who tap with different levels of precision—whether due to personal preference, mobility, or device limitations.
📐 Safe Area & Layout Margins: Enhancing UI Spacing & Accessibility
🔍 The Issue: Inconsistent Margins & Non-Compliance
Before the update, layout margins were too small (X-axis: 9px, Y-axis: 11px), failing Material Design, Apple HIG, and WCAG guidelines.
Content was too close to the screen edges, impacting readability and usability.
Accidental taps increased, especially on edge-to-edge screens.
Did not meet safe area padding requirements, causing layout inconsistencies across devices.
Safe Area Layout Compliance
| Standard | Required Margin | Before ❌ | Compliance |
|---|---|---|---|
| iPhone (Notched Devices) | 16px - 20px | ❌ 9px | 🚫 Fails |
| Android Edge-to-Edge | ≥ 16px | ❌ 9px | 🚫 Fails |
| Landscape (iOS & Android) | 20px - 24px | ❌ 11px | 🚫 Fails |
📊 Before & After: Safe Area Margins
| Aspect | Before ❌ | After ✅ |
|---|---|---|
| Safe Area Margin (X-axis) | 9px | 16px (Standard) |
| Safe Area Margin (Y-axis) | 11px | 16px (Vertical Compliance) |
| Accidental Taps | High | Reduced |
| UI Alignment Consistency | Poor | Fixed |
| Accessibility Compliance | 🚫 No | ✅ Yes |
✅ The Fix: Standardizing Safe Area Margins
I updated margins to match UX best practices, improving spacing, readability, and touch ergonomics.
✔ Increased margins from 9px → 16px (min. standard)
✔ Adaptive layout adjustments for different screen sizes
✔ Better visual balance & reduced accidental taps
Before & After Comparison:
🚀 Impact
These fixes enhance readability, reduce errors, and ensure WCAG compliance—all while maintaining a cleaner, more structured UI.
🎯 Final Results & UX Impact (OKRs)
🌟 Objective
Enhance the accessibility, usability, and engagement of the Bingo app by implementing WCAG AA improvements, optimizing readability, and refining interactive elements.
📊 Key Results (Measurable Improvements)
✅ Readability Improved by 40%
KR1: Increase font sizes, optimize contrast, and standardize typography to enhance text legibility.
✅ Interaction Errors Reduced by 35%
KR2: Enlarge tappable targets (44x44px), improve spacing, and implement "Invisible Padding" to reduce misclicks and accidental taps.
✅ Increased User Confidence & Satisfaction
KR3: Improve visual feedback with clearer call-to-action buttons, confirmation pop-ups, and better game cues for a more intuitive experience.
✅ Higher User Engagement (+29% Session Duration)
KR4: Optimize the app layout, improve readability, and refine interaction flows to encourage longer and more seamless gameplay sessions.
📊 Measurable UX Impact (Testing & Analytics Process)
To quantify the impact of these accessibility enhancements, I conducted a usability audit and A/B testing before and after implementing WCAG fixes. I used a combination of user testing, heatmaps, and behavior tracking tools to measure improvements.
✔ Baseline Audit (Before Fixes):
Conducted a usability study with 10 users aged 45+ (the primary audience).
Used Google Analytics & Hotjar heatmaps to identify problem areas.
Found that 22% of users struggled with small tap targets, and 18% had difficulty reading text.
✔ WCAG Fixes Implemented:
Increased text sizes & contrast using WCAG Contrast Analyzer & Stark (Figma plugin).
Expanded tap targets and padding based on Android Studio & Xcode tap testing tools.
✔ A/B Testing (Before vs. After Comparison):
Conducted a split test with 20 participants using Maze UX testing.
Measured tap accuracy, readability, and interaction errors before and after fixes.
Key UX Impact Results
| Metric | Before Fixes ❌ | After Fixes ✅ | Improvement 📈 |
|---|---|---|---|
| Readability Score (User comprehension test) | 65% | 91% | +40% |
| Interaction Errors (Misclicks & accidental taps) | 22% | 7% | -35% |
| Time to Complete Actions (e.g., selecting game numbers) | 9.2 sec avg. | 6.1 sec avg. | -34% |
| User Confidence in UI (Survey Rating) | 3.2/5 | 4.6/5 | +43% |
| Session Duration (Time spent engaging with the app) | 2 min 35 sec | 3 min 12 sec | +29% |
🏆 Key Outcomes (Aligned with OKRs)
✔ 📖 Better Readability – Increased font sizes & contrast, ensuring WCAG AA compliance and reducing eye strain.
✔ 🎨 Higher Contrast – Improved text & button contrast (6.4:1 to 14.85:1) enhances visibility for visually impaired users.
✔ 🎯 Optimized Interactions – Enlarged tap targets (44x44px) reduced misclicks and increased selection accuracy.
✔ 🏗 Streamlined Layout – Consistent margins, spacing, and padding provided a structured and clutter-free experience.
✔ 🚀 Increased Engagement – Session durations increased by 29%, confirming users found the app easier to navigate and interact with.
📣 User Feedback & Insights
💬 "The text is much easier to read, and I don’t need to zoom in anymore!"
💬 "Tapping buttons is way easier now—I don’t keep hitting the wrong one by mistake."
💬 "The layout feels cleaner and less cluttered, which makes playing much more enjoyable."
📌 Why It Matters: The combination of usability testing, analytics tracking, and direct user feedback confirms that the WCAG improvements had a major positive impact on accessibility, usability, and engagement.
🔎 Reflection: Key Learnings
This project proved that small changes lead to significant usability gains. Key takeaways:
📖 Text clarity matters – Readability scores improved 40% by following WCAG font size & contrast standards.
🎯 Tap targets are critical – Interaction errors dropped 35% after increasing tap sizes to 44x44px.
🔍 User confidence improved – The survey rating jumped from 3.2 to 4.6/5, confirming a better experience.
📏 Better spacing enhances navigation – "Invisible Padding" helped users interact more smoothly without visual clutter.
🚀 Next Steps: Design System Case Study (Upcoming OKRs)
To expand on the work done for accessibility, the next phase will focus on documenting and sharing the Bingo App Design System in a dedicated case study. This will be structured around the following OKRs:
✅ KR5: Showcase Component Architecture & Naming – Detail the modular setup and scalable structure of core components.
✅ KR6: Highlight Accessibility-First Design – Explain how WCAG AA standards were embedded directly into the system foundations.
✅ KR7: Document Cross-Team Collaboration – Share how design and devs worked together using tools like ZeroHeight and Storybook.
✅ KR9: Publish Figma System Framework – Present the Figma file structure, tokens, versioning, and documentation practices.
🧠 This follow-up will provide a deeper look at how a robust design system can drive accessibility, speed up workflows, and maintain product consistency.
I’ll link the case study here once live — stay tuned! 👀
🎯 Why This OKR-Based Approach Works
✅ Aligns objectives with measurable key results (OKRs) for clear performance tracking.
✅ Links UX improvements to user impact, making the case study more data-driven & structured.
✅ Provides a roadmap for future optimizations, ensuring accessibility enhancements continue.