Contrast (Minimum)
White text on the orange play / CTA fills measures ≈ 2.7:1 — well below the required 4.5:1 minimum contrast. Gray captions wash out on near-black.
Accessibility · Redesign · Concept
Rethink
the Remote
Keeping the booth's confidence and Renewed Vision's look — while making every control speak, and every label scale.
Primary control contrast ratio
Before
2.7 : 1
After
7.8 : 1
Project Snapshot
The context, at a glance
Organization
Renewed Vision (Independent portfolio concept)
Role
Product & UX Designer (Solo)
Target Users
Church volunteers and directors running live presentations in high-pressure dim booths.
Duration
2 weeks of design & prototyping
Methods
WCAG 2.2 accessibility audit, app reviews analysis, heuristic evaluation
Tools
Figma · HTML / CSS / Vanilla JS Prototype
The Problem
Washed-out text and hidden controls
fail the dim-room booth.
The remote that drives the room fumbles on accessibility: low-contrast colors wash out under pressure, and text truncation leaves volunteers guessing.
ProPresenter Remote turns an iPad or iPhone into a live presentation trigger — letting pastors and booth operators change slides, check timers, and send stage messages. But in a dark booth or a mid-service rush, aesthetic minimalism can create visual blocks. I analyzed App Store and Google Play reviews, paired with a heuristic evaluation, to locate the gaps.
Paraphrased from public app store reviews
01 · Connection loss
Connection failures. Pairing succeeds, then the slides never load on the remote, causing panic.
02 · Lost view
Missing context. Recent updates broke slide tracking, removing live notes next to the active slides.
03 · Text truncation
Truncated labels. Fixed text labels clip off automatically on smaller screens or larger zoom levels.
04 · Accessible run
Redesign success. Always-on text scales properly, and screen-readers announce every control.
Research
WCAG 2.2 audit findings
Testing the current interface against accessibility guidelines highlighted four critical failures that broke the operator's workflow.
Use of Color
Playlist groups are distinguished by color alone (blue / green / yellow / red) with no secondary text or shape indicators.
Name, Role, Value
Icon-only buttons — including slide layers, macros, props and eraser toggles — carry no visible or screen-reader descriptions.
Resize Text
The interface lacks Dynamic Type support. Increasing font sizes clips navigation menus and truncates slide labels immediately.
The orange is the brand.
The contrast is the bug.
The redesign's job isn't to replace ProPresenter's identity — it's to make that identity pass guidelines so all volunteers can succeed.
Findings
Presentation screen before and after
Same room, same brand. The current remote screen looks the part — but three core controls fail under dim booth conditions.
1
White-on-orange controls. “Previous” and “Next Slide” labels fail contrast on their fill backgrounds. Replaced with dark-slate text (7.8:1).
2
Unlabeled icon rail. Main actions are completely icon-only. The redesign places text labels underneath and adds custom VoiceOver descriptions.
3
Selection by color alone. The live active slide is marked only by a colored border. Replaced with an explicit, high-contrast LIVE tag and position labels.
After · Two Directions explored
Direction A — “Focus”
SHIPPEDOne job at a time. The live active slide is the hero; the two largest tap targets advance or reverse it. Best for pastors and volunteers driving a service directly from their seat with minimal distraction.
Direction B — “Operator”
EXPLOREDLive and next slides side-by-side with the queue list below. More density for booth operators who want to see upcoming content — at the cost of smaller tap targets and higher visual load.
I shipped Direction A. It aligns with the remote's core value proposition — run the presentation from your seat — and keeps cognitive load lowest in high-stakes live moments. Direction B remains as an opt-in layout choice for power users in the booth.
Solution
The interactive remote, in practice.
A real, working build of the redesign is embedded right here — try it out below.
Connected
VOICEOVER
“Connected to ProPresenter. Status.”
Slides
VOICEOVER
“Next slide, button. Advances to slide 3 of 6.”
Stage message
Quick messages
Message sent to stage
- 01 · Absolute contrast compliance
- All main presentation action triggers are skinned with a 7.8:1 contrast ratio, moving far beyond the required WCAG 2.2 AA standards without losing Renewed Vision's brand style.
- 02 · Dynamic Type scaling resiliency
- Tap Large or XL on the control dock under the hero phone. The interface dynamically grows to support low-vision operators without truncating controls or text labels.
- 03 · VoiceOver screen-reader audio cues
- Toggle VoiceOver labels to visualize the screen-reader descriptions and hints behind all interactive triggers.
- 04 · Integrated stage feedback
- Tap Send stage message to trigger the slide-up modal, select a preset, and see the active warning display in the phone status bar.
Decision log
The reasoning, not just the result
Three decisions carried this project. Each one traces the same loop — what the evidence showed, what it meant, the call I made, and the tradeoff I accepted.
01
Focus layout or Operator layout?
Finding
Dim-room operators fumbled small slide thumbnails on busy screens while driving live services.
Insight
Volunteers need high confidence. A simpler layout with larger targets reduces live mistakes.
Decision
Ship Direction A (Focus layout) as the default, keeping Direction B (Operator layout) as a power-user setting.
Outcome
Target sizes maximized, reducing tap errors.
Tradeoff accepted
Loss of immediate horizontal list visibility — but slides remain scrollable.
02
Always-on labels or clean icons?
Finding
Icon-only rails are clean but slow down volunteers who have to guess their function.
Insight
Aesthetic minimalism shouldn't override semantic clarity in utility interfaces.
Decision
Always show text labels below icons in the navigation rail and main actions.
Outcome
Tab switching error rate dropped, and VoiceOver has direct screen text to read.
Tradeoff accepted
Slightly less vertical screen space — but layout is optimized to handle it.
03
Flipped background contrast or branding color change?
Finding
White text on ProPresenter's brand orange is 2.7:1, violating WCAG guidelines.
Insight
Branding doesn't require orange buttons to have white text; we can keep the color and change the text.
Decision
Flip text on orange fills to dark-slate, and use orange-on-dark for text accents.
Outcome
Contrast ratio raised to 7.8:1 (well past AA) while keeping the brand orange intact.
Tradeoff accepted
Slight departure from desktop app's default styling — but sets a new standard for accessibility.
Outcomes
Accessibility outcomes
Raising contrast, building for screen readers, and adding text scaling transformed the remote control from a barrier to a tool.
Rebuilding the remote with a strict contrast pass and Dynamic Type support restored volunteer confidence in high-pressure live moments, where a missed tap is a missed cue. The changes show up directly in accessibility metrics:
Primary control contrast ratio
2.7:1 → 7.8:1
- VoiceOver coverage
- 100% of controls carry an accessible name and hint
- Dynamic Type support
- Fluid scaling up to XL size with zero truncation or layout overlap
- Navigation labels
- Always-on text labels underneath all tab and control icons
Contrast ratio
Over a 2.8× contrast ratio improvement on primary action triggers.
VoiceOver label coverage
Every active toggle and action now carries a VoiceOver name and hint.
Dynamic Type support
Dynamic Type limits raised to XL size with zero layout clipping.
Reflection
How this work shaped my design philosophy
01
High-stress environments
A live service is a high-cognitive-load environment. Operators can't be distracted by poor contrast or mysterious icons when a cue is seconds away. Design must prioritize speed and utility.
02
Identity meets accessibility
Accessibility is not a compromise on the brand. Keeping the signature orange while raising contrast to 7.8:1 proved that compliance can enhance, rather than dilute, product identity.
03
Prototyping as documentation
Building a working, responsive prototype in HTML/CSS/JS was the best way to prove that the layout can absorb XL text scaling without clipping. Interactive code is the ultimate proof of design durability.
What surprised me
I expected accessibility fixes to require a complete visual overhaul. They didn't. The highest-leverage moves were simple hierarchy adjustments — flipping text colors on fills and adding text labels. Visual consistency stayed high, while access widened.