Support Centre

Search

Simulating color blindness for more accessible designs

Renée Meloche
Renée Meloche
  • Updated
Available on the following Venngage subscription plans: Premium, Business and Enterprise.

 

Accessible design takes into account any visual impairments viewers might have. Test your design in our upgraded Editor for accessibility using our Visual Simulator to see how your design appears to viewers with different vision conditions.

Select an accessible template to customize in the upgraded Editor (Beta).

Open the Visual Simulator from the File menu: 

A user in the upgraded Venngage Editor selects 'File' from the top navigation menu, the opens the 'Accessibility' menu and selects 'Visual Simulator'. The Accessibility Checker opens in the right side panel, to the 'Simulator' tab, which displays tiles with different color blindness and visual impairments that the user can apply in a preview to their design canvas.

 

Select "Simulator" in the Accessibility panel to open the tool, when opening the panel from the Accessibility button in the top navigation menu in the upgraded Editor (Beta).

The upgraded Venngage Editor is open to a design titled 'Flexible Work From Home Jobs', with the Accessibility panel open on the right-hand side of the Editor, overlaying the design canvas. The panel has three tabs: Accessibility, Edit Reading Order, and Simulator, and is open to the 'Accessibility' tab. The user selects the 'Simulator' tab, changing the Accessibility Panel to display tiles with different color blindness and visual impairments that the user can apply in a preview to their design canvas.

 

You can also access it from the bottom of any color tool modal, by selecting or clicking on "Visual Simulator".

A close-up of a color tool modal for changing font color in the upgraded Venngage Editor (Beta). At the bottom of the modal, which includes the headings 'Project Colors', 'Hue', 'Opacity', and 'Contrast Ratio', a tile with the heading 'Visual Simulator' appears with the text 'See through the eyes of people with visual impairments'.

 

Select the color blindness or visual impairment you want to simulate:

Reset your image to default by selecting the color blindness or visual impairment tile again.

Case Study: Compare color in this accessible design

Here's a blueprint of an infographic from an accessible design template as it appears with default coloring in the upgraded Editor (Beta):

A blueprint-view of an infographic entitled 'Flexible Work From Home Jobs'. The main blocks of text in the infographic are navy blue, light blue, seafoam green, and purple. The icons in the infographic have many different colors.

Below are different simulations of how it appears to color blind or visually impaired readers, using Venngage's Visual Simulator.

Achromatopsia: Complete color blindness

Full color designs will appear in greyscale to simulate complete color blindness.

An accessible design titled 'Flexible Work From Home Jobs' appears on a design canvas in the upgraded Editor (Beta), with the Accessibility panel visible in an overlay on the righthand side. The Accessibility panel is open to a third tab, 'Simulator', which lists different color blindness and vision impairment conditions. The user clicks on the 'Achromatopsia' tile, which renders the colors on the design on the canvas in greyscale.

 

Deuteranopia: Difficulty detecting greens

Greens take on a purple or blueish hue; reds may appear grey.

The 'Flexible Work from Home Jobs' infographic appears on a design canvas in the upgraded Editor (Beta), with the Accessibility panel visible in an overlay on the righthand side. The Accessibility panel is open to a third tab, 'Simulator', which lists different color blindness and vision impairment conditions. The user clicks on the 'Deuteranopia' tile, which renders the colors on the design in more blues and greys, and eliminates many of the other hues previously visible.

 

Protanopia: Difficulty detecting reds

Purples, violets and pinks may appear blue; greens, reds and oranges can take on a yellow or green/grey hue.

The 'Flexible Work from Home Jobs' infographic appears on a design canvas in the upgraded Editor (Beta), with the Accessibility panel visible in an overlay on the righthand side. The Accessibility panel is open to a third tab, 'Simulator', which lists different color blindness and vision impairment conditions. The user clicks on the 'Protanopia' tile, which renders the colors on the design in blueish violets, greys, and light yellows, and eliminates many of the other hues previously visible.

 

Tritanopia: Difficulty detecting blues and yellows

Yellows may appear pink; purples take on a grey appearance; greens appear blue, where blues may take on more of an acqua hue.

The 'Flexible Work from Home Jobs' infographic appears on a design canvas in the upgraded Editor (Beta), with the Accessibility panel visible in an overlay on the righthand side. The Accessibility panel is open to a third tab, 'Simulator', which lists different color blindness and vision impairment conditions. The user clicks on the 'Tritanopia' tile, which renders the colors on the design in greenish-blues, corals, and greys, and eliminates many of the other hues previously visible.

 

Cataracts: Cloudy vision that reduces contrast

Contrast decreases, making it hard to distinguish like colors and adding difficulty to distinguishing light-colored text on a light background.

The 'Flexible Work from Home Jobs' infographic appears on a design canvas in the upgraded Editor (Beta), with the Accessibility panel visible in an overlay on the righthand side. The Accessibility panel is open to a third tab, 'Simulator', which lists different color blindness and vision impairment conditions. The user clicks on the 'Cataracts' tile, which renders the colors on the design in low contrast, making them appear washed out. The text and icons are more difficult to distinguish from one another.

 

Low vision: Blurry and decreased vision

Low vision creates a similar effect to zooming in close on a low-resolution image; text and other visual elements become blurry, making them hard to distinguish or read.

Providing adequate alt text to describe crucial visual elements and text helps make documents more accessible for readers with low vision or visual impairment.

The 'Flexible Work from Home Jobs' infographic appears on a design canvas in the upgraded Editor (Beta), with the Accessibility panel visible in an overlay on the righthand side. The Accessibility panel is open to a third tab, 'Simulator', which lists different color blindness and vision impairment conditions. The user clicks on the 'Low vision' tile, which renders the design in low resolution, making the visual elements and texts appear noticeably blurry and difficult to distinguish and read.

 

 

The feature(s) discussed in this article is available on the following Venngage subscription plans: Free, Premium, Business and Enterprise.

Curious about upgrading? Compare our plan features side by side.

Start designing!

Was this article helpful?

0 out of 0 found this helpful

Have more questions? Submit a request