Lumen — Accessible Signup Form

Lumen — Accessible Signup Form

Platform: Lumen, a fictional project management SaaS. Chosen because it's broad enough to avoid niche conventions but specific enough to anchor real decisions — B2B tone, team-buying motion, integrations expected.

Viewport: Desktop, 1440×1024.

The big design moves

Two-pane layout. Brand panel on the left (logo, value prop, three feature bullets, trust line), form on the right. The brand pane isn't decoration — it reduces the cognitive jolt of landing on a stranger's signup page, communicates trust when asking for credentials, and gives screen-reader users a clear landmark structure.

Field order: Name → Email → Password → Terms → Submit. Mirrors how someone introduces themselves: identity first, credentials second, commitment last. SSO buttons sit above the email/password flow because for most users it's the faster path.

Warm off-white surface (#EAE7DE) instead of pure white. Lets the form card register as a clearly raised surface — figure/ground separation is itself an accessibility benefit, and softer on the eye than pure black on pure white.

Accessibility, by WCAG principle

Perceivable

• Labels above every field, never replaced by placeholders. Placeholders carry format hints only (Alex Chen, alex@company.com).
• Persistent helper text under email and password sets expectations before errors happen.
• Password strength meter uses filled bars + text descriptor, not color alone — works for colorblind users.
• All text contrast ≥4.5:1; body text and CTA hit AAA (17.8:1 and 8.6:1 respectively).
• Form column max-width 440px — line length matters for cognitive load.

Operable

• Every interactive element keyboard-reachable in logical tab order.
• 3px Lumen-blue focus ring on every focusable element, ≥3:1 contrast against canvas.
• All targets ≥44×44 px (SSO buttons 46px, primary CTA 48px).
• Skip link to main content for keyboard users.

Understandable

• Errors show how to fix, not just what's wrong: "Add 4 more characters to reach 10" beats "Invalid input."
• Error summary appears at top after failed submit with role="alert", lists each error as a link, focus moves to it.
• Lazy aggressive validation: no errors while first typing; on blur, validate; after error shown, validate on every keystroke so users get instant feedback while fixing.
• Summary updates live as fields become valid — fixed errors disappear from the list, and the whole summary hides when all are resolved.

Robust

• aria-invalid on broken fields, aria-describedby linking inputs to helpers and errors, aria-pressed on show/hide password toggle.
• aria-live="polite" on strength meter, aria-live="assertive" on error summary.
• Decorative icons aria-hidden="true", interactive icons get aria-label.

Visual design

Color. Near-black (#1A1A18) on warm off-white reads more comfortably than pure black on pure white. Lumen blue (#1A4FB8) does double duty as brand and primary CTA — keeps the action confident without making it tonally heavy.

Type. Inter, two weights only (regular and medium). Five steps of type give the eye enough texture to navigate without becoming noisy.

Restraint. No decorative drop shadows, no stock-photo illustrations, no gradients beyond the subtle brand-pane background. This is a calm SaaS workflow tool, not a lifestyle brand.

Interactive prototype

Live password strength scoring, working show/hide password, lazy validation, live-updating error summary, success state on valid submission. All states (default, focus, error, success) work end-to-end and meet the WCAG criteria above.