Zoom Sign in Screen
Designing a WCAG-Compliant Login Screen for Zoom — Here's What I Did & Why
Perceivable — Persistent labels above each field (never placeholder-only), high-contrast blue CTA meeting 4.5:1 ratio, and links distinguished by more than colour alone.
Operable — Full-width touch targets well above the 24×24px minimum, logical visual hierarchy that mirrors a natural keyboard tab order, and spaced-out controls to prevent accidental taps.
Understandable — Consistent, predictable labels on all inputs, a clear "Or" divider separating auth paths, and legal text de-prioritised so it doesn't compete with the main task.
Robust — The Google Sign-In button pairs an icon with a text label, ensuring it works even when the icon doesn't.
Accessibility done right doesn't compromise aesthetics — it sharpens them.
In collaboration with...
Tools used
From brief
Topics
Share
Reviews
2 reviews
Hi! It's great that accessibility was taken seriously and described through the lens of the four WCAG principles. It shows a conscious approach, not just "pretty UI." Labels above fields instead of placeholder-only, CTA contrast, full-width buttons on mobile. All in line with best practices.
I do have a one note: though. I'm missing interaction states. Focus state on inputs (crucial for keyboard navigation!), validation error states, hover on links. In a project about accessibility, these aren't details, they're foundational.
The direction is solid. There's a clear understanding of WCAG principles and the ability to translate them into concrete design decisions. Add the missing states and make your design contribution more visible, and the whole thing will be much stronger! ❤️😊👍
Great project!
You might also like
Solar system Dashboard Utility
Signup page for a SaaS website
ASOS - Push Notifications
PLANTIST
Pulse - Inventory Management System Design
Lumen
Visual Design Courses
UX Design Foundations
Introduction to Figma
Design Terminology
