Use Webflow’s built-in Vision preview to simulate how your website appears to people with visual disabilities.
Visual disabilities affect a large percentage of the population, but if you don’t have a visual disability, it can be difficult to imagine how your design appears to someone who does.
With Vision preview, you can simulate how your site appears to people with visual disabilities. Use this tool at the beginning of your design workflow to make sure important information in your design isn’t conveyed solely through color.
Note
Using Vision preview provides an approximate representation
of vision impairments. Factors like your own vision, the lighting
you use, your screen calibration, and your operating system settings
can all affect the accuracy of the previews.
To access Vision preview, go to Canvas settings (i.e., click the “settings sliders” icon in the bottom bar below the canvas).
In the Vision preview dropdown, you can choose to preview your site with:
- Red-green color blindness (Green weak, Green blind, Red weak, and Red blind previews)
- Blue-yellow color blindness (Blue weak and Blue blind previews)
- Full spectrum color blindness (Color weak and Monochrome previews)
- Focus impairment (Blurred vision preview)
An icon to the left of the Canvas settings indicates the visual disability you’re currently previewing.
To stop previewing your design with the Vision preview tool, choose None from the Vision preview dropdown.
Note
Due to a Safari bug, Vision preview isn’t available in Apple’s browser. The bug specifically relates to Safari not applying CSS filters with url() values to iframes. Webflow has brought the bug to Apple’s attention, though no tracking number was provided. Alternatively, you can use Vision preview with Firefox and Chrome browsers.