Design Summary
The UI frame presents a clean and modern login experience with a positive emotional tone. Key elements like input fields and primary calls-to-action are generally clear. However, there are several areas for improvement concerning contrast, readability of smaller text, and the clarity of some secondary elements, which slightly detract from the overall usability and accessibility.
Design Frame
Run Your Own Audit in Figma
Install Floto for FigmaSign In button
The white text on the grey 'Sign In' button may have insufficient contrast, potentially making it difficult for users with visual impairments to read.
💡 Recommendation:
Increase the contrast ratio between the white text and the grey background of the 'Sign In' button to meet WCAG AA accessibility standards.
Email input field placeholder text
The placeholder text 'you@example.com' in the email input field is light grey on a white background, which likely has insufficient contrast for optimal readability.
💡 Recommendation:
Darken the placeholder text color to ensure adequate contrast against the white input field background.
2/2 indicator
The '2/2' indicator in the top right corner is small and its purpose is not immediately clear in the context of a login screen, potentially causing minor confusion.
💡 Recommendation:
Clarify the purpose of the '2/2' indicator or remove it if it's not relevant to the login process. If it's a page indicator, consider a more prominent placement or clearer context.
Restart onboarding link
The 'Restart onboarding' link is visually similar in size and color to the legal text at the bottom, making it less discoverable and potentially overlooked if it's an important action.
💡 Recommendation:
Increase the visual prominence of the 'Restart onboarding' link if it's a key action, perhaps by using a different text style or placing it in a more noticeable area.
Restart onboarding link
The 'Restart onboarding' text is very small and blends with the legal text, making it difficult to read and interact with for some users.
💡 Recommendation:
Increase the font size and potentially the contrast of the 'Restart onboarding' link to improve readability and discoverability.
Restart onboarding and legal text
The 'Restart onboarding' and legal text at the bottom are small and dark grey on a light background, which could pose readability challenges for some users, especially those with visual impairments.
💡 Recommendation:
Consider increasing the font size or darkening the text color for the 'Restart onboarding' and legal text to improve readability.
2/2 indicator
The '2/2' indicator's functionality and relevance on a login screen are unclear, potentially causing confusion about the current step in a user flow.
💡 Recommendation:
Provide clear context for the '2/2' indicator or remove it if it's not essential for the login process.
Restart onboarding link
The 'Restart onboarding' link is visually deemphasized and its purpose on a login screen is ambiguous, potentially leading to user confusion or accidental navigation away from the primary login task.
💡 Recommendation:
Re-evaluate the necessity and placement of the 'Restart onboarding' link on the login screen. If it's a critical function, give it more prominence; otherwise, consider moving or removing it.