Accessible Signup Form for SaaS Platform

Design Decisions

• Focus on WCAG criteria: The design prioritizes meeting the Web Content Accessibility Guidelines (WCAG) for users with disabilities. This includes users with visual impairments, motor impairments, and cognitive impairments.
• Clear Hierarchy and Call to Action (CTA): The “Sign Up” button is the most prominent element, making it clear what the user needs to do. There’s also a “Log In” option for existing users.
• Limited information: The form only asks for the user’s email address and password to create an account.
• Color scheme: A black and green background is used with white and grey for the form fields. This creates high color contrast which is good for accessibility.

Accessibility Considerations

• Color contrast: The text uses a color contrast ratio of 19.69:1 which surpasses the WCAG AAA criteria. This means people with visual impairments will find the text easier to read.
• Font size: All fonts are above 16px, meeting the minimum WCAG AAA criteria for mobile content.
• Target size: Most of the buttons are large enough (44x44px) to meet the WCAG AAA criteria for touch targets. The “Log In” and “Reset Here” buttons are a bit smaller but still meet AA criteria (24x24px).
• Labels: While the placeholder text provides a clue, adding labels for each form field improves accessibility, especially for users who rely on screen readers.
• Error and success messages: Error messages will be displayed in red to indicate which fields need correction. It also has clear and specific error messages that explain the problem with a bouncy animation giving instant visual feedback. There is also an icon showing whether is right or wrong.

All accessibility considerations are checked with the Stark plug-in.

After some tips:

• I made the background darker so the colour contrast is clearer in the error and success image.
• I added a register option on the login page, so you can go back if the user ends up in that tab by accident.
• There's an option to see your password on the login screen to make sure the user can double-check if the password is well-written.
• I added in the labels a faded white to make it more distinguishable from the Apple and Google options. When the user is typing, the white disappears to give visual feedback to the user letting them know which labels are currently on.

Most of the new functions you can try it in the prototype, like when the user is on the label, new visual feedback and more!