Design Summary
The "WeightUp" login frame presents a clean and modern aesthetic with a clear primary call to action. However, it suffers from several accessibility and usability issues, primarily related to text contrast and size, particularly for important legal information and section headings. The hierarchy of secondary actions like "Forgot password?" and "Restart onboarding" could also be improved for better user guidance.
Design Frame
Run Your Own Audit in Figma
Install Floto for FigmaLegal text at the bottom
The legal text at the bottom ('By continuing you agree to our Terms of Use (EULA) and Privacy Policy') has very low contrast and is extremely small, making it inaccessible for many users.
💡 Recommendation:
Significantly increase the font size and contrast of the legal text to ensure it is easily readable and accessible.
Legal text at the bottom
The legal text at the bottom ('By continuing you agree to our Terms of Use (EULA) and Privacy Policy') is extremely small, making it difficult to read.
💡 Recommendation:
Increase the font size of the legal text to ensure it is legible for all users.
YOUR DETAILS heading
The 'YOUR DETAILS' heading has very low visual weight and small font size, making it easily overlooked and not effectively serving as a section header.
💡 Recommendation:
Increase the font size and weight of the 'YOUR DETAILS' heading to improve its prominence and readability.
Email input field placeholder text
The placeholder text 'you@example.com' in the email field is very light, potentially causing low contrast issues for some users.
💡 Recommendation:
Increase the contrast of the placeholder text to ensure better readability.
Legal text at the bottom
The legal text at the bottom ('By continuing you agree to our Terms of Use (EULA) and Privacy Policy') is extremely small, making it difficult to read.
💡 Recommendation:
Increase the font size of the legal text to ensure it is legible for all users.
Email input field placeholder text
The placeholder text 'you@example.com' in the email input field has very low contrast against the white background, which could be an accessibility issue for users with low vision.
💡 Recommendation:
Increase the contrast of the placeholder text to meet WCAG accessibility guidelines.
YOUR DETAILS heading
The 'YOUR DETAILS' heading has very low contrast against the white background, making it difficult to read.
💡 Recommendation:
Increase the contrast of the 'YOUR DETAILS' heading to improve readability and accessibility.
YOUR DETAILS heading
The 'YOUR DETAILS' heading is very small and has low visual weight, making it hard to distinguish as a section title.
💡 Recommendation:
Increase the font size and weight of the 'YOUR DETAILS' heading to improve its prominence and readability as a section title.
Pagination indicator '1/2'
The '1/2' pagination indicator in the top right corner is very small and has low contrast against the white background, making it hard to notice.
💡 Recommendation:
Increase the size and improve the contrast of the pagination indicator to make it more visible.
Forgot password? and Restart onboarding links
The 'Forgot password?' and 'Restart onboarding' links are the same blue color and similar font size, but 'Restart onboarding' seems less critical than 'Forgot password?', creating a slight hierarchy confusion.
💡 Recommendation:
Differentiate the visual weight or placement of 'Forgot password?' to prioritize it over 'Restart onboarding' on a login screen.
Pagination indicator '1/2'
The '1/2' pagination indicator has low contrast against the white background.
💡 Recommendation:
Improve the contrast of the pagination indicator to make it more visible.
Password visibility eye icon
The eye icon in the password field has low contrast against the light grey background of the input field.
💡 Recommendation:
Improve the contrast of the eye icon to ensure it is clearly visible and interactive.
Restart onboarding link
The 'Restart onboarding' link feels a bit out of place in a login screen, potentially causing confusion about the user's current state in the app.
💡 Recommendation:
Reconsider the placement or necessity of the 'Restart onboarding' link on a login screen, or rephrase it to clarify its purpose in this context.
Forgot password? link
The 'Forgot password?' link is visually less prominent than 'Restart onboarding', even though it's likely a more frequently needed action on a login screen. This creates a slight misprioritization of actions.
💡 Recommendation:
Increase the visual prominence of the 'Forgot password?' link to reflect its importance on a login screen.
Restart onboarding link
The 'Restart onboarding' link's placement and prominence might suggest a different flow than a typical login, potentially confusing users about whether they are logging in or restarting a setup process.
💡 Recommendation:
Clarify the purpose and context of the 'Restart onboarding' link, or consider relocating it to a more appropriate section if it's not directly related to the login process.