Login/Signup for a SaaS platform lightlab.
The page presents a clean layout with two clear sections: Login and Sign Up. Users can switch between them using well-labeled toggle buttons or tabs that are keyboard- and screen-reader friendly. Each form contains the following accessible elements:
- Color and Contrast: Text and background colors meet a minimum contrast ratio of 4.5:1 for normal text. Error states use both color (red) and an icon/shape to avoid reliance on color alone.
- Accessible Buttons: Buttons are labeled with descriptive text (e.g., “Create Account” instead of just “Submit”). They have a large clickable area for users with motor difficulties.
- Password Visibility Toggle: A button with an accessible label (e.g., “Show password” / “Hide password”) allows users to view their password while typing, aiding users with cognitive or motor impairments.
- Responsive Design: The layout adapts to smaller screens without loss of functionality or readability, ensuring accessibility on all devices.
- Third-Party Authentication: If social login buttons are included, they contain descriptive alt text (e.g., “Continue with Google”) and meet color contrast guidelines.
Rationale Behind Design Choices
- Clear Labels and Instructions: Prevents ambiguity and supports users with cognitive and visual impairments. Screen readers can announce the purpose of each input.
- Error Handling: Inline error messaging with live announcements improves accessibility for screen reader users and reduces frustration by providing precise feedback.
- Keyboard Accessibility: Ensures that users who cannot use a mouse (including those with motor disabilities) can fully navigate and interact with the form.
- Contrast and Non-Color Indicators: Supports low-vision users and colorblind individuals, honoring the WCAG requirement not to rely on color alone.
- Accessible Authentication: Ensures all users, regardless of ability, can log in or sign up without barriers, aligning with WCAG’s guidance against inaccessible CAPTCHA or purely visual cues.
- Consistency and Predictability: Using familiar form patterns lowers the cognitive load and helps users with learning disabilities or screen reader users predict form behavior.
Reviews
5 reviews
ChatGPT said:
👏 Excellent work, Krystyna!
Your Lightlab Login/Signup design stands out for its strong accessibility foundation and clear structure 💡 The dual-section layout is intuitive, and your attention to contrast, labels, and keyboard navigation shows real empathy for diverse user needs.
💬 To refine it even further, aligning font weights across both pages (as Seth mentioned) will enhance visual consistency — and user testing with assistive tools could validate your accessibility assumptions. Overall, a thoughtful, inclusive, and professional execution 👏
Krystyna, not sure if this is just an image rendering issue, but it would be great if the “Consistency and Predictability” rationale also covered font-weight consistency across these texts:
Login page (appear thicker):
- “Please enter your details to get started”
- “Enter your name” (placeholder)
- “Sign in”
- Social login text
- “Don’t have an account? Sign up”
Signup page (appear thinner):
- “Please enter your details to get started”
- Social login text
- “Email address or username” (placeholder)
- “Get started”
- “Already have an account? Sign in”
If you align the weights so matching elements read the same across both screens, it’ll be perfect ✨
The design is intuitive and easy to understand. Keep going!
This is a well structured login and signup design with strong focus on accessibility. I like how you clearly separated the two sections and kept the layout simple and predictable.
The use of proper color contrast, descriptive buttons, and non color indicators makes the flow inclusive for users with different needs. Adding a password visibility toggle and ensuring full keyboard accessibility are thoughtful touches that improve usability.
Error handling and clear labels are also well handled, reducing confusion and making the experience smoother. My only suggestion is to test with real users, especially those relying on assistive tech, to confirm everything works as intended in practice.
Overall, this is a clean, professional, and accessibility first design.
Hello Krystyna, excellent work on this login/signup design! Your attention to accessibility is outstanding — the detailed breakdown of color contrast, keyboard navigation, password visibility toggle, and responsive design shows real expertise. The rationale behind each design choice demonstrates thoughtful, inclusive UX thinking. This is a strong example of accessible design with clear documentation!
You might also like
Notion - Accessibility Color System
Blip - Esport app design (Light & Dark UI)
Reimagining Asana's Color System
Customer Journey Map for a Co-Working Space
Latios - Free Portfolio Template for UX/UI Designers
Workspace Booking Flow - UI/UX Design
Visual Design Courses
UX Design Foundations
Introduction to Figma
Design Terminology
