Get early access
Reserve your spot.
Launch with us.
Claim your username.
It's free! Reserve your spot in early access today.
Accessibility Simulator is a simple Figma plugin that helps designers better understand the challenges faced by users with common visual impairments. By simulating different types of color blindness and vision loss, Accessibility Simulator equips designers to identify potential accessibility issues early in the design process, ensuring a more inclusive user experience.
- See your design as it appears for visually impaired users
- Fully simulate the most common visual impairments
- Includes WCAG AA 2.0 design guidelines
Try it in our demo file with the below link, or open one of your projects and follow these three steps:
Marketing
Accessibility Simulator makes the value of accessible design visually obvious in Figma.
Accessibility Simulator makes the value of accessible design instantly clear in Figma. It helps designers experience firsthand the challenges faced by users with visual disabilities. By simulating real-world accessibility barriers, it fosters empathy-driven design and ensures practical inclusivity is built in from the start.
- When accessibility issues are identified and addressed during the design phase, it reduces the development overhead.
- Seeing your designs with visual impairments makes it easier to create more useful designs.
Pricing
Accessibility Simulator is currently free
We may eventually monetize the app's future features, but for now it is completely free.
Frequently Asked Questions
As a designer, why would I need to use Accessibility Simulator. What exactly does it do?
- This application is designed to assist in making your designs more accessible by adhering to the Web Content Accessibility Guidelines (WCAG) AA 2.0.
- Specifically, it helps you check the contrast of text against its background to ensure that it meets the minimum contrast ratio required for readability.
- It also counts the number of text nodes at each font size across your design, giving an overview of your typography usage.
- By seeing these guidelines with your own eyes, you are better able to increase the usability of your design for a wider audience, particularly those with visual impairments.
I’ve heard about WCAG guidelines but never understood them. Why is it important to make designs WCAG compliant?
WCAG guidelines are internationally recognized standards for web content accessibility. When your designs are WCAG compliant, they become more accessible to a wider range of users, including those with disabilities. This not only broadens your user base but also ensures your designs meet legal requirements in many jurisdictions. It's about inclusivity, usability, and also potential legal compliance.
- WCAG AA (2.1) Is the most common standard and is the basis for the design of Accessibility Simulator.
How reliable is this tool? Can I trust the results it provides?
Accessibility Simulator has been designed to help designers see the impact of accessible design. It's one thing to see contrast as a number, and a completely different thing to see why the contrast ratio matters. While no tool can replace a thorough accessibility audit, this application provides an intuitive approach and a thorough first pass at identifying potential accessibility issues. It's an excellent starting point in your journey towards creating more accessible designs.
What are some simple steps I can take to make my designs more accessible to people with color blindness?
- A good first step is to ensure there's sufficient contrast between text and its background color. This not only helps those with color blindness but also improves general readability.
- Try to avoid using color as the only means of conveying information. For instance, if you're using color to differentiate between different types of data in a chart, also consider using patterns, labels or icons.
- Red-green and blue-yellow combinations can be particularly challenging for people with the most common types of color blindness. Ensure you're not relying on these color combinations alone to convey important information.
How does ensuring color-blind friendliness benefit my overall design?
Designing with color blindness in mind can improve your designs for all users, not just those with color vision deficiencies. It encourages you to focus on clarity, contrast, and information richness, making your designs more effective and inclusive.
If you cover one of our apps let us know! We are happy to give you a backlink.
Support
Something is not working..
Email us at: bug@osborndesign.works
Screenshots and context are helpful for debugging.
All of our apps have some error tracking and reporting built in, but it's always helpful to hear from users.
Want to support development?
We appreciate all of the support we get. The best way to support us is to share the plugin, buy a license, or check out our other apps.
