• 1. Color Contrast and Visual Impairments
• 2. Optimizing Display and Layout
• 3. Prioritizing Accessible HTML Components
• 4. Testing Tools for Accessibility Compliance
• Conclusion

As part of the complete visual identity overhaul at LegalySpace and the introduction of a new front-end technology stack, we reassessed our design rules and component libraries. One of the key goals of this redesign was to ensure a high-quality user experience for all audiences, with a strong focus on improving and expanding accessibility features. Here’s how we addressed accessibility across various facets of our product.

1. Color Contrast and Visual Impairments

We ensured that the color contrast in our interfaces complies with the WCAG (Web Content Accessibility Guidelines) Level AA standards. This guarantees that the contrast between text and background is sufficiently high for people with visual impairments, making the interface more legible.

To accommodate a wide range of visual disabilities, including color blindness, we used Stark, an Adobe plugin integrated with Figma, to simulate various types of color vision deficiencies. This helped us adjust color combinations early in the design process and proactively address potential visual rendering issues.

2. Optimizing Display and Layout

A key part of improving accessibility was setting a minimum text size of 14px across the platform. This ensures that even users with mild visual impairments can easily read the content without needing to zoom in excessively.

We also optimized our layouts for different screen sizes, ensuring a seamless experience on desktops, tablets, and mobile devices. For instance, primary action buttons are now placed at the bottom of the screen on mobile to make them more accessible for users holding their phones with one hand—a consideration for both temporary and permanent physical impairments.

3. Prioritizing Accessible HTML Components

In this redesign, we prioritized using native HTML components wherever possible. Standard HTML elements are generally better supported by assistive technologies like screen readers and offer greater consistency across browsers. Moreover, these components are lightweight, making the user interface faster to load and navigate.

Additionally, we implemented Storybook as a component library. This enabled us to isolate components and test them individually for accessibility issues, such as focus management and alternative text for images. We also plan to integrate third-party accessibility tools, like Axe and Storybook A11y Addon, into our development process to automate the detection of issues.

4. Testing Tools for Accessibility Compliance

Several tools were instrumental in ensuring our design met accessibility standards. Stark, as mentioned earlier, which enables us to detect several types of error as early as the screen design phase (before development):

• Sufficient color contrast (see Colors section)
• Sufficient minimum text size
• Dimensions of mobile interactive zones (click zones, buttons, etc.)
• Focus” status management (selection order)
• Visual handicap simulator (see Colors section)
• Title hierarchy
• Annotations for developers concerning screen reader support

We also used Wave, a popular Chrome extension, to test for code-based accessibility issues like missing ARIA attributes or poorly labeled interactive elements. It can be easily used once the initial integration phases have been completed.

Lastly, we conducted tests with the NVDA screen reader to ensure our platform is fully compatible with assistive technologies used by visually impaired or blind users. NVDA, developed by the non-profit organization NV Access, helps us identify issues specific to how content is read aloud, allowing us to refine focus management and improve overall usability.

Conclusion

By integrating accessibility testing and best practices into our design and development processes, we were able to create a more inclusive experience for all users. Whether by adjusting color contrast, optimizing layouts, or prioritizing standard HTML components, the goal was to ensure that LegalySpace is usable and accessible for everyone.