Vision preview tool

Use Webflow’s Vision preview to get an approximate representation of some of the visual impairments that affect a large percentage of the population.

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

If you don’t experience vision impairments, it can be difficult to imagine how your design appears to someone else. You can use Webflow’s Vision preview throughout your design workflow to help approximate how your design might look to someone with vision impairment — and ensure they don’t miss out on important information.

Note: Vision preview isn’t available in Safari. Alternatively, you can use Vision preview with Firefox and Chrome browsers. 

In this lesson you’ll learn:

  1. How to access Vision preview
  2. How to avoid color-reliant UI
  3. How to simulate color blindness
  4. How to evaluate design legibility

Before jumping into the lesson, remember that the following examples are approximations. Many factors influence how someone perceives your site: 

  • Your own vision
  • Your lighting
  • Your screen calibration
  • Your operating system
  • Etc.

Overall, it’s critical to think about best practices that don’t necessarily rely on your exact vision or your exact hardware setup. 

How to access Vision preview

You can access Vision preview options by clicking Canvas settings at the top of the Designer

The Canvas settings at the top of the Webflow Designer are highlighted. 

Choose the type of vision impairment to preview from the bottom of the Canvas settings modal.

The Canvas settings modal shows the Vision preview section of the modal highlighted. 

You can choose from:

  1. Red-green color blindness (Green weak, Green blind, Red weak, and Red blind previews)
  2. Blue-yellow color blindness (Blue weak and Blue blind previews)
  3. Full spectrum color blindness (Color weak and Monochrome previews)
  4. Focus impairment (Blurred vision preview)
The Vision preview area of the Canvas settings allows you to preview your design from a red-green, blue-yellow and full spectrum color blindness perspective, as well as blurred vision focus impairment. 

The vision impairment you’ve selected is indicated by an icon to the right of the Canvas settings.

When you have selected a type of vision to preview from the Vision preview dropdown, it’s indicated by three overlapping circles in the top of the Designer’s Canvas settings area. 

To stop previewing your design from a vision impaired perspective, click Canvas settings again and change the Vision preview to None.

How to avoid color-reliant UI

Let’s say you’ve designed an interface that indicates a system is functioning properly when it’s green, and that the system is malfunctioning when it’s a shade of red. 

A sample user interface only uses color to indicate status, with green indicating functioning status and red indicating malfunctioning. 

Let’s use Vision preview to check out what this interface might look like with different vision impairments: 

  1. Click Canvas settings at the top of the Designer
  2. Click the dropdown menu under Vision preview and choose a vision impairment to preview (e.g., Green blind and Red blind)
Vision preview simulates Green blind and Red blind vision impairments on a Color-reliant user interface. 

After using Vision preview, it becomes clear the green and red color values don’t look so different from each other. This is the problem with relying on color to convey meaning — it’s far less likely to be effective than, for instance, adding a symbol (e.g. an “x” or a “checkmark”) to indicate functioning versus malfunctioning.

Adding symbols reduces total reliance on color to convey meaning. 

Finance trackers often do this very well. They’ll use color, but they only use it to reinforce their main idea, which is conveyed by an up or down arrow to note whether the stock price has increased or decreased. (Or they’ll use a plus or minus.) 

A finance tracker’s red and green up and down arrows, as well as red and green pluses and minuses are highlighted. 

There’s a common misconception that you can’t use colors in your interface at all. For example, you can still use red and green colors in your interface, but it’s critical that you don’t rely only on color to convey essential information to your site visitors. Instead, make sure you’re also using text, shapes, and symbols to convey meaning (alongside your color choices).

You can use symbols alongside colors in your interface to convey essential information.

How to simulate color blindness

To illustrate how color blind visitors may perceive your design, the following example is one that’s less practical, but it's a great demonstration of what happens when meaningful content relies on the distinction between colors. 

The intended content should display the numbers clearly. 

Ideally, the numbers in the circles would be easy to read, as pictured in the example above.
When the numbers and circles are displayed in color, the numbers nearly fade into the colorful circle backgrounds.

When simulating color blindness the numbers become illegible.

The colorful numbers and circles become illegible when simulating Green blindness. 
The colorful numbers and circles become illegible when simulating Red blindness. 
The colorful numbers and circles become illegible when simulating Blue blindness. 

Therefore, it’s critical to regularly check that the content in your images is more visually accessible under different vision considerations.

How to evaluate design legibility

You’ll also want to approximate the legibility of your design. We’ll go through examples that show legibility issues with: 

Thin font

For example, you may have a paragraph with a thin font that upon initial glance looks okay to you. However, if you approximate how it appears to someone with blurred vision, the thin font is illegible — it nearly disappears. 

The thin font in a paragraph may initially look acceptable (left), but when simulating blurred vision (right), it becomes illegible. 

To fix the illegible paragraph, you can use a more legible, thicker typeface (e.g., a thicker width on the font). 

A thicker font is still legible, even when simulating blurred vision (right). 

Now that you’ve changed the typeface to something that’s thicker, when you return to Vision preview and approximate what the updated paragraph looks like to someone with blurred vision, it becomes more legible. 

Typography scale on browser zoom

Thinner fonts, or even thinner UI elements, can sometimes be too small to be viewed easily. In fact, many people set an increased zoom percentage on their browser to make their browsing experience more legible. 

Because of this, it’s important to be mindful of how you use relative units like VW (viewport width) on typography — especially on your meaningful content.

The goal with VW in typography is to make text scale based on the width of the viewport. In the following example, all the text gets larger (or smaller) based on the width of the viewport as it’s scaled, which is expected.

Typography using VW units scale in size as the viewport width shrinks or grows. 

However, using VW on typography can become problematic when people zoom their browser to increase the scale and make text more legible. 

For example, when using VW for typography, even though other content scales as the browser is zoomed (e.g., the images get larger), the text size doesn’t change. That's because typography using VW relies on the width of the viewport to determine when it scales, and browser zoom doesn’t change the viewport width. 

Typography using VW units does not change in size as the browser is zoomed. (In this example the browser zoom is set to 100%.) 
Even as the browser is zoomed (e.g., 175%), typography using VW units does not change in size because the viewport width hasn’t changed. 

To allow your text to scale up as browser zoom increases, set your typography size to use a unit of EMs, REMS, or pixels. (This is especially important for your meaningful content.)

Learn more about typography units

Unclear UI

It’s important to make sure your user interface is accessible, too. In the following example, if you have blurred vision turned on in Vision preview, it’s not clear what action your site visitor needs to take. 

A newsletter subscription call-to-action modal is highlighted with Blurred vision simulated. The tiny “x” button to close the modal becomes nearly invisible. 

If you turn off the blurred vision preview and zoom in, you can see a tiny, thin “x” meant to close the obtrusive popup. This is an excellent example of design choices that don't just create bad user interfaces — they create illegible or impossible-to-use user interfaces.

A newsletter subscription call-to-action modal is highlighted with Blurred vision turned off. The tiny “x” button to close the modal is very light and difficult to see. 

Along with the considerations mentioned above, take your accessible design up a notch and enroll in the entire accessibility course, and read more about how to make your site more accessible.

Table of contents

Continue learning

Hmm…we couldn’t find any results for “search query”. Try a different search term or check out our community forum.

Search the forumReset the filter
Load more

Filter

Reset
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Topics
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Back to top