Back to updates
Feature
Layout & design

Simulate how visually impaired people view your website

A new Vision Preview mode in the canvas settings lets you to simulate color blindness or focus impairments on your site’s design.

Simulate how visually impaired people view your website

<p>As part of our ongoing commitment to ensure designers are creating accessible web experiences, we’ve added a new Vision preview mode to our canvas settings panel that lets you see how your site would appear for a visually impaired person.</p><figure class="w-richtext-figure-type-image w-richtext-align-fullwidth" style="max-width:1501px" data-rt-type="image" data-rt-align="fullwidth" data-rt-max-width="1501px"><div><img src="<https://cdn.prod.website-files.com/64f9399ca7d13575ff21a675/64f9399ca7d13575ff21d529brE0VXfl6rpEi928ODCOXZRAjRECW9mm24wLy8L2epLLn63tW93Bztor6ArdRiAcgaXmxxPRnRS4hobZ6abuZmwhqsbLLUWRGGyic3mH5xdRiShnlIDdhBgrmHQXF5bFw52fQ.png>" width="auto" height="auto" loading="auto" alt="Access the Vision preview mode from the canvas settings panel at the top of the Designer."></div><figcaption>Access the Vision preview mode from the canvas settings panel at the top of the Designer.</figcaption></figure><p>You can access this new display mode from the existing canvas settings panel at the top of the Designer.&nbsp;</p><figure class="w-richtext-figure-type-image w-richtext-align-fullwidth" style="max-width:650px" data-rt-type="image" data-rt-align="fullwidth" data-rt-max-width="650px"><div><img src="<https://cdn.prod.website-files.com/64f9399ca7d13575ff21a675/64f9399ca7d13575ff21d528c9YvXjniY2dh-Jyc1GPT2rkUZz3uPHlSLtoIys1FMooenij8y6YxTf7dpHShjBWHZw_-TosPLelgstyfliQTUqPXyt4wE1sABAYhbSHTgaWe8-4uFXyWNavFcbgHvv1f6VWMsfg.png>" width="auto" height="auto" loading="auto" alt="Simulate how your site looks for visually impaired people with the new Vision preview tool in the canvas settings."></div><figcaption>Simulate how your site looks for visually impaired people with the new Vision preview tool in the canvas settings.</figcaption></figure><p>Our new Vision preview tool allows you to select from red-green color blindness, blue-yellow color blindness, full spectrum color blindness, and focus impairment so you can get an idea of what your design would look like to those experiencing vision impairment.</p><p>To learn more about how to use the new vision preview mode, check out our <a href="<https://university.webflow.com/lesson/make-your-site-more-accessible#webflow%E2%80%99s-built-in-vision-preview>">article on Webflow University</a>.</p>


Launched on
January 27, 2021
Category
Layout & design

Related updates

Truncate long content with text overflow

Truncate long content with text overflow

Learn more
Text Decoration Styles

Text Decoration Styles

Learn more
New variable types: Number and Percentage

New variable types: Number and Percentage

Learn more
Component style variants is now available

Component style variants is now available

Learn more
Manage variables at scale with reordering and bulk actions

Manage variables at scale with reordering and bulk actions

Learn more
Drop shadow filters

Drop shadow filters

Learn more