Simulate and Test for Design Accessibility Directly in Figma

Accessibility Simulator is a powerful Figma plugin that helps designers better understand the challenges faced by users. Simulate different types of vision loss and identify accessibility issues early in the design process and ensure a more inclusive user experience.

Get Early Access

Reserve your spot.
Launch with us.
Claim your username.

It's free! Reserve your spot in early access today.

We hate spam. We only send emails a few times a year. Your email is safe with us.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
odw-design-battles-avatars

Accessibility Simulator

is free on the Figma Community.

No install is required! Try it in our demo file in seconds, or open one of your projects and follow these three steps:

1. Open Resources:
Shift + i
2. Select:
Plugins
3.
Search:
Accessibility Simulator

Accessibility Simulator is a powerful 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

Marketing

Accessibility Simulator makes the value of accessible design obvious to designers and project managers.

Equipping designers and project managers to easily simulate and experience the challenges that users with different disabilities face, it provides a first-hand understanding of why accessible design is not just a nice-to-have but a necessity.

Through simulating accessibility issues, Accessibility Simulator creates an empathetic bridge between designers and the diverse range of users who interact with their designs. It helps avoid the pitfalls of designing for one's own abilities and biases, and instead encourages designs that are inclusive and universal.

  • When accessibility issues are identified and addressed during the design phase, it dramatically reduces the development overhead.
  • It helps avoid costly and time-consuming revisions later in the development cycle,
  • and ultimately leads to a smoother, more efficient process from conception to launch.

This groundbreaking approach has the potential to make accessibility a more integral part of the design process. It shines a light on the value of accessible design, enhancing user experience and inclusivity, and reinforcing the importance of designing for everyone, not just the average user.

Pricing

Accessibility Simulator is currently free

We did a and the results were clear: users want non-subscription pricing options. For this reason we only release apps with payment options that work for everyone.

We will eventually monetize the app's future features, but for now the focus is on building the best app possible, and figuring out which features offer the most value. If you want to support development, we are selling lifetime access for affordable one-time payment. If you buy you can vote on updates, and enjoy unlimited access to the app forever. Get it while you can!

  1. We are adding more features that focus on creating more customized artwork.
  2. Vote on future updates including textures, logo options, typography inclusion and more.
  3. Buy now and get access to the app and all future features forever.
Get Lifetime Access: $7

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?

  1. 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.
  2. 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.
  3. 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.

View our other Apps