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.