Clerk.io Sign In Form made more accessible

Great job! There are two things I wanted to point out as elements which could help enhance this project :)

1. Pay attention to information hierarchy, aka which elements are more prominent and visible, establishing their hierarchy on the page. The element which the user should see first should likely be the heading and/or call to action button. Here, the CTA is very similar to the tabs on the right side in the illustration. Due to this, when looking at the design the first thing I notice is the image on the right side and am not aware that this is a login page. Users seeing this page will have likely already clicked some "login" button and are focused on logging in rather than learning about the app. For this reason illustrations or other "extra" elements on login pages are typically either very opaque or low in saturation, have some light or dark overlay on top, or are simply very minimalistic, making them much more secondary. A good tip is to zoom out of your design and squint your eyes whenever creating a design - this will help you notice which elements are the most visible when your are squinting and small / less distinct elements become invisible.
2. The second point is spacing / padding - I noticed that the spacing between the sign in button and "or" / "use passwordless login" / "Google login" are very small, making the elements bunched together. I'd strongly consider slightly increasing the vertical padding between these :)

I hope this advice helps!

Your form is solid, but a few refinements will elevate it to the next level. Here are what needs work and what can be added.

1. Accessibility Tweaks for a Smoother Experience

• "Error messages should be closer to input fields." Right now, they appear below, forcing users to move their eyes. Inline errors right next to the field make them easier to spot.
• "Screen reader support is missing key cues." ARIA attributes like aria-describedby and aria-required will ensure assistive technologies properly communicate errors and field requirements.
• "Focus states need better visibility." A more distinct outline, background highlight, or slight shadow will make navigation smoother for keyboard users.
• "Placeholder text might be too light." The contrast should be at least "4.5:1" to ensure readability, especially for low-vision users.

2. Usability Fixes That Make a Difference

• "No password visibility toggle." Users should have an "eye icon" to show/hide their password, making it easier to confirm input.
• "Error messages could be clearer." Instead of "Please enter your email in the format: [email protected]", say "Invalid email format. Try [email protected]" for a quicker understanding.
• "The Sign In button doesn’t stand out." It blends too much with the background. Increasing contrast or adding a hover animation will make it more clickable.
• "No Remember Me option?" A checkbox to keep users logged in would reduce login friction.
• "Keyboard navigation should be tested." Tabbing should work smoothly across all elements, including buttons and links. If anything feels "stuck," it needs fixing.

3. Design & Interaction Enhancements

• "Success states need stronger feedback." A checkmark icon next to valid fields will reinforce that input is correct.
• "Hover states are missing." Buttons and links should have a slight color shift or animation to indicate interactivity.
• "Labels need more contrast." They should be slightly darker or bolder to stand out better.

4. Features That Would Take It to the Next Level

• "Dark mode support." A toggle for dark mode would improve usability for night-time browsing.
• "Autocomplete & Autofill support." Let browsers auto-fill email and password fields to save users time.
• "Guest Login Option." A "Continue as Guest" button would reduce friction for new users if applicable.
• "Security nudge for MFA." A small reminder about multi-factor authentication could encourage users to enable it without forcing them.

Your form is already well-structured, but fine-tuning "error placement, focus states, button contrast, and interactive feedback" will make it even stronger. Adding "dark mode, autofill, and a guest login" would take it from good to great. Small tweaks, big impact.