{"id":5087,"date":"2024-04-14T22:34:12","date_gmt":"2024-04-14T14:34:12","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=5087"},"modified":"2024-04-14T22:34:12","modified_gmt":"2024-04-14T14:34:12","slug":"visual-preview-tool","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/visual-preview-tool\/","title":{"rendered":"Visual preview tool"},"content":{"rendered":"\n
\n

For those without visual impairments, it may be challenging to envision how your design is perceived by others. Employ Webflow\u2019s Visual preview during your design process to estimate how individuals with visual impairment may perceive your design\u2014ensuring they receive vital information.<\/p>\n

Important:<\/strong> Visual preview is not supported in Safari<\/strong>. Instead, you can utilize Visual preview with Firefox<\/strong> and Chrome<\/strong> browsers.<\/p><\/blockquote>\n

This tutorial will cover:<\/p>\n

    \n
  1. Methods to access Visual preview<\/li>\n
  2. Techniques to steer clear of color-dependent UI<\/li>\n
  3. Ways to replicate color vision deficiencies<\/li>\n
  4. Strategies to assess design legibility<\/li>\n<\/ol>\n

    Prior to delving into the tutorial, bear in mind that the following instances are mere approximations. Numerous elements impact how individuals perceive your website:<\/p>\n

      \n
    • Your individual vision<\/li>\n
    • Your lighting conditions<\/li>\n
    • Your screen adjustments<\/li>\n
    • Your operating system<\/li>\n
    • And more.<\/li>\n<\/ul>\n

      Overall, it’s crucial to consider best practices that are not solely reliant on your unique vision or hardware setup.<\/p>\n

      Methods to access Visual preview<\/h2>\n

      You can open Visual preview<\/strong> options by selecting Canvas settings<\/strong> at the top of the Designer<\/strong>.<\/p>\n

      \n
      \"The<\/div>\n<\/figure>\n

      Choose the form of visual impairment to preview from the bottom of the Canvas settings <\/strong>dialogue.<\/p>\n

      \n
      \"The<\/div>\n<\/figure>\n

      You can select from:<\/p>\n

        \n
      1. Red-green color blindness (Green weak, Green blind, Red weak, and Red blind previews)<\/li>\n
      2. Blue-yellow color blindness (Blue weak and Blue blind previews)<\/li>\n
      3. Full spectrum color blindness (Color weak and Monochrome previews)<\/li>\n
      4. Focus impairment (Blurred vision preview)<\/li>\n<\/ol>\n
        \n
        \"The<\/div>\n<\/figure>\n

        The chosen visual impairment is denoted by an icon on the right side of the Canvas settings<\/strong>.<\/p>\n

        \n
        \"When<\/div>\n<\/figure>\n

        To cease previewing your design from a visually impaired perspective, revisit Canvas settings <\/strong>and switch the Visual preview<\/strong> to None<\/strong>.<\/p>\n

        Avoiding color-dependent UI<\/h2>\n

        Imagine you’ve crafted an interface where green signifies a functioning system, while red indicates malfunctioning.<\/p>\n

        \n
        \"A<\/div>\n<\/figure>\n

        Let’s utilize Visual preview to observe how this interface looks with varying visual impairments:<\/p>\n

          \n
        1. Access Canvas settings<\/strong> from the top of the Designer<\/strong><\/li>\n
        2. Expand the dropdown menu below Visual preview<\/strong> and opt for a visual impairment preview (e.g., Green blind and Red blind)<\/li>\n<\/ol>\n
          \n
          <\/div>
          Visual preview demonstrates Green blind and Red blind vision impairments on a color-dependent user interface.<\/figcaption><\/figure>\n

          After employing Visual preview, it’s evident that the green and red colors do not have distinct contrasts. This demonstrates the drawback of relying solely on color for conveying information\u2014it’s less effective compared to incorporating a symbol (e.g., “x” or a “checkmark”) to indicate system status.<\/p>\n

          \n
          <\/div>
          The addition of symbols diminishes full dependence on color for message conveyance.<\/figcaption><\/figure>\n

          Financial monitoring applications excel in this strategy. They might incorporate color but solely as a supporting element to their primary concept, which is communicated through an upward or downward arrow indicating stock price rise or fall. (Alternatively, they might use a plus or minus sign.)<\/p>\n

          \n
          \"Highlighted<\/div>\n<\/figure>\n

          There’s a prevalent misunderstanding that using colors in your interface is prohibited. For instance, you can employ red and green hues in your design, but it’s imperative not to depend solely on color for communicating crucial data to your website visitors. Instead, ensure that text, shapes, and symbols also play a role in conveying meaning alongside your color selections.<\/p>\n

          \n
          <\/div>
          To communicate vital information, symbols can be incorporated alongside colors in your design.<\/figcaption><\/figure>\n

          Ways to replicate color vision deficiency<\/h2>\n

          For an illustration on how individuals with color blindness might interpret your layout, the subsequent example, while less practical, serves as an insightful demonstration of the consequences when critical content heavily relies on color contrasts.\u00a0<\/p>\n

          The intended data should be prominently displayed within the visuals.\u00a0<\/p>\n

          \n
          <\/div>
          It would be ideal for the numbers enclosed in circles to be easily discernible, as depicted in the preceding example.<\/figcaption><\/figure>\n
          \n
          <\/div>
          If the numbers and circles are in color, the numbers tend to blend into the vivid circle backgrounds.<\/figcaption><\/figure>\n

          Under color blindness simulations, the numbers become indistinct.<\/p>\n

          \n
          <\/div>
          The colorful numbers and circles blend together resulting in illegibility when simulating red blindness.\u00a0<\/figcaption><\/figure>\n
          \n
          <\/div>
          The colorful numbers and circles blend together resulting in illegibility when simulating green blindness.\u00a0<\/figcaption><\/figure>\n
          \n
          <\/div>
          The colorful numbers and circles blend together resulting in illegibility when simulating blue blindness.\u00a0<\/figcaption><\/figure>\n

          Consequently, it’s crucial to routinely verify that the content within your visuals remains visually accessible across various vision impairments.<\/p>\n

          Assessing design readability<\/h2>\n

          Additionally, you should evaluate the legibility of your design. We will showcase examples that highlight readability challenges with:\u00a0<\/p>\n

            \n
          • Delicate font choices<\/li>\n
          • Typography scaling during browser enlargement<\/li>\n
          • Obscure user interface elements<\/li>\n<\/ul>\n

            Delicate font choices<\/h3>\n

            For instance, a paragraph using a delicate font might appear acceptable at first glance to you. Nonetheless, when you approximate its visibility to someone with blurred vision, the fragile font becomes illegible \u2014 almost vanishing entirely.\u00a0<\/p>\n

            \n
            <\/div>
            At first glance, the slender typeface in a text block may seem satisfactory (on the left) but when emulating obscured eyesight (on the right), it turns unreadable.\u00a0<\/figcaption><\/figure>\n

            If you want to enhance the unreadable text block, you may opt for a more readable, broader font (for example, a wider style on the font).\u00a0<\/p>\n

            \n
            <\/div>
            A broader font remains legible, even during the simulation of blurred vision (on the right).\u00a0<\/figcaption><\/figure>\n

            After changing the font to a broader one, when you revisit the Vision preview and visualize how the updated text block appears to someone with obscured vision, it becomes easier to read.\u00a0<\/p>\n

            Typography scale when browser zoomed<\/h3>\n

            Narrow fonts, or even slender UI components, might sometimes be too petite to view comfortably. Numerous individuals adjust their browser to a larger zoom percentage for a more readable browsing experience.\u00a0<\/p>\n

            Thus, it’s vital to be conscious of how VW (viewport width) relative units are used in typography\u2014particularly for your essential content.<\/p>\n

            The aim of using VW in typography is to enable text to scale according to the viewport width. In the subsequent example, all text enlarges (or shrinks) based on the width of the viewport as it is scaled, which is the anticipated behavior.<\/p>\n

            \n
            <\/div>
            Typography utilizing VW units changes size as the viewport width contracts or expands.\u00a0<\/figcaption><\/figure>\n

            However, using VW for typography can pose challenges when users zoom in their browser to amplify the scale and enhance text readability.\u00a0<\/p>\n

            For instance, if VW is used for typography, while other elements scale as the browser is zoomed (e.g., images enlarge), the text size remains constant. This occurs because VW-based typography dynamically adjusts based on the viewport width, which isn’t affected by browser zoom.\u00a0<\/p>\n

            \n
            <\/div>
            Typography with VW units retains the same size even during browser zooming. (In the illustration, the browser zoom is set at 100%.)\u00a0<\/figcaption><\/figure>\n
            \n
            <\/div>
            Even with an extended browser zoom (e.g., 175%), typography using VW units remains unchanged in size as the viewport width stays the same.\u00a0<\/figcaption><\/figure>\n

            To enable your text to scale up with an increased browser zoom, set your typography size to employ EMs, REMs, or pixels. (This is especially crucial for your significant content.)<\/p>\n

            Find out more about typography unit measures.\u00a0<\/p>\n

            Vague UI<\/h3>\n

            Ensuring that your user interface is accessible is paramount. In the subsequent illustration, if you turn on blurred vision in Vision preview, the necessary action for your site visitor may not be readily discernible.\u00a0<\/p>\n

            \n
            \"A<\/div>\n<\/figure>\n

            If you disable the blurred vision preview and zoom in, you will observe a minute, slender ‘x’ intended for closing the intrusive popup. This serves as an excellent example of design decisions not only resulting in poor user interfaces but also creating illegible or impractical user interfaces.<\/p>\n

            \n
            \"A<\/div>\n<\/figure>\n

            In addition to the previously mentioned considerations, elevate your accessible design even further by enrolling in the comprehensive accessibility course and delving deeper into enhancing your site’s accessibility.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Use Webflow\u2019s Vision preview to get an approximate representation of some of the visual impairments that affect a large percentage of the population.","protected":false},"author":2,"featured_media":5088,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[302],"tags":[],"class_list":{"0":"post-5087","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-accessibility","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/5087","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=5087"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/5087\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/5088"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=5087"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=5087"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=5087"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}