🟢 Read time: ~30 sec
🎯 Bingo WCAG Compliance Case Study
Strengthening typography, contrast and touch targets to make performance critical information - faster to read and safer to act on.
Executive Snapshot
Problem: Over time, small inconsistencies in typography, spacing and interaction patterns increased friction and hesitation.
Goal: Improve clarity and reduce interaction errors without redesigning the core product experience.
Scope: Typography system · Contrast strategy · Touch targets (44×44) · Safe areas · Feedback patterns.
Approach: Audit → define system rules → implement at scale → validate with metrics
Impact: 📊 +40% readability · -35% interaction errors · -34% task time · +29% engagement.
⏱️ 2025, 2 months | 📱Type: Bingo Hybrid & Native App | 🧑🏼💻 Role: Design System Architect, UI/UX Designer | ✏️ Tools: Figma, Adobe XD
🆚 Side-by-Side Comparisons
These comparisons highlight key improvements in readability, contrast, interaction areas, and layout consistency leading to WCAG AA compliance and measurable usability gains. Rather than redesigning the layout, the focus was on systemic clarity improvements.
System-Level Improvements
| System Layer | Before | After |
|---|---|---|
| Typography System | 8–10px text, fragmented hierarchy | Standardised scale, 12px minimum |
| Contrast Strategy | Partial WCAG compliance | 6.4:1+ across core surfaces |
| Interaction Model | <44px tap areas | 44×44px minimum touch standard |
| Layout Structure | 12px margins, inconsistent spacing | 16–20px safe area alignment |
🟡 Read time: ~1 min
📝 Strategic Narrative
This was not a visual redesign - it was a structural intervention.
Over time, new components were added, styles multiplied, and inconsistencies accumulated. Individually harmless, but together they created friction, slowed users down and reduced confidence.
The objective was to strengthen the system foundations to reduce cognitive load and improve decision speed.
Constraints
No full redesign allowed
Existing design system inconsistencies
Cross-platform standards
High-frequency usage
Key Decisions
Standardised typography to improve scanability
Balanced contrast for readability without visual strain
Increased tap targets to 44×44 to reduce errors
Fixed safe area margins for modern devices
Trade-offs
Prioritised high-impact interaction fixes over aesthetic refinements
Focused on scalable system-level improvements rather than isolated UI tweaks
📝 Core UI Foundations
Below is an example of how foundational UI improvements translated into clearer, more usable screens.
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, reducing reading effort and hesitation.
Optimised Interactions 🎯 – Larger tap targets and better spacing reduce accidental taps and improve interaction confidence.
Structured Layout 🏗 – Consistent margins and spacing create a more stable and predictable interface.
These enhancements make the Bingo app more inclusive and easier to use during fast, repeated interactions.
🔴 Read time: ~6-8 min
🧠 Deep UX Breakdown
Appendix - Optional technical breakdown
The measurable outcomes above were driven by system-level decisions.
Below is a breakdown of the typography, contrast, spacing and interaction rules that enabled those results.
🔠 Typography & Readability Fixes
Inconsistent typography increased cognitive load and reduced readability in fast mobile interactions.
Rule: 12px minimum for functional text + standardised typographic scale.
| Style | Before | Issue | After |
|---|---|---|---|
| Label | 9px / Regular | Fails WCAG | 12px / Standardised scale |
| Primary Button | 10px / Bold | Too small for CTA | 14px / Improved legibility |
| Call Text | 8px / Regular | Below minimum size | 12px / Accessible |
| Ribbon | 8px / Regular | Fails contrast + size | 12px / WCAG AA |
| Subtitle | 10px / Bold | Pass with high contrast | Part of unified scale |
🎨 Contrast Enhancements
Contrast was refined across core surfaces and primary interaction elements. Several components failed WCAG AA thresholds, reducing clarity in fast interactions.
Rule: Minimum WCAG AA contrast ratio (4.5:1).
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 |
✋ Tappable Targets: Improving Interaction & Accessibility
Small tap targets increased interaction errors and reduced selection precision in high-frequency mobile flows.
Rule: Minimum 44×44px tappable area for all interactive elements.
Before & After Comparison:
Tappable Targets Enhancements
| Aspect | Before (Issues) ❌ | After (Fixes) ✅ |
|---|---|---|
| Tap Size | 28–39px | 44×44px minimum |
| Misclick Rate | High | Reduced |
| Interaction Precision | Inconsistent | Standardised |
| WCAG Compliance | Did not meet WCAG AA touch target requirement | Fully compliant with WCAG AA guidelines |
📏 Padding Fixes: Aligning with Material Design Guidelines
Inconsistent padding caused misalignment and visual clutter.
Rule: Standardised horizontal & vertical padding to improve alignment and tap accuracy.
📌 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.
Before & After Comparison:
Padding Fixes Enhancements
| Aspect | Before (Issues) ❌ | After (Fixes) ✅ |
|---|---|---|
| Horizontal Padding | 5px (below Material Design minimum) | Standardised to 8dp |
| Vertical Padding | Inconsistent (3–6px) | Unified to 6px |
| Layout Density | Compressed, visually crowded | Balanced spacing system |
| Material Design Compliance | Did not follow Google’s Material Design padding standards. | Now fully compliant with Material Design & WCAG guidelines. |
📐 Safe Area & Layout Margins: Enhancing UI Spacing & Accessibility
Margins were below modern mobile standards, increasing edge interaction errors.
Rule: Rule: Minimum 16px safe area margin on X and Y axis across all core screens.
Margins standardised from 9px → 16px
Reduced accidental edge taps
📊 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 |
Before & After Comparison:
📊 Measurable UX Impact
To validate the improvements, I ran a baseline usability review followed by structured before-and-after testing.
Performance was measured through task completion time, tap accuracy, and behavioural analytics.
Accessibility checks were conducted using WCAG-based contrast and typography validation in Figma.
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% |
📣 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."
🔎 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.