logo logo

Simulating Vision Problems In Chrome

Simulating Vision Problems In Chrome

The process of building modern software has as the main focus functionality. As a tester, you need to make sure that a user story fulfills all the acceptance criteria, that a specific business flow works as expected, and that in the end, the business side is happy with the implementation 💪

In general, only after the functional requirements have been checked does the focus switch to the nonfunctional side and address areas such as security and performance.

Even if focusing on functionality does lead to making the business side happy, it is my opinion that there should be a bit of a focus switch when doing the testing, a focus on the user. At the end of the day, the goal of businesses is to have their software be used by as many users as possible and to be accessible to as many users as possible.

The Importance of Accessibility Testing

The type of testing that has the purpose of confirming that an application is usable for as many people as possible, including people with disabilities such as vision impairment, hearing problems and cognitive conditions is called accessibility testing. And making sure that this testing is done is part of our duty as testers.

The importance of doing accessibility testing becomes more and more clear considering that, according to the World Health Organization, in 2021 there were over 1 billion people that lived with some form of disability.

As stated above there are different types of disabilities that should be checked in the spectrum of accessibility testing. However, for the remainder of this article, we are going to focus on the topic of vision problems and simulating them in Chrome.

Vision Problems

In the era of computers, smartphones, on-demand television, and advertising, eye problems are becoming more and more a problem since more and more people suffer from a form of vision impairment.

The World Health Organization (WHO) estimates that 314 million people have visual impairment worldwide, with the most common types being blurry vision or a color spectrum deficiency (having trouble seeing a specific color).

No Extra Tools Are Needed, Chrome is Here 

You might think that for simulating the most common vision problems you need to install special software on your computer or browser add-ons, but the good news is that you only need Chrome and to follow a few simple steps to be able to check this 🔍 Allow me to demonstrate:

The Test Image

In order to show that the process works and also allow you to follow along, I will use the below image as a reference. You can find the URL of the image below:

Colorblind test

Source: https://www.ocli.net/blog/vision-news-new-glasses-aim-to-correct-color-blindness/

Activate the Google Option For Emulation

To activate the emulation feature in Google, the following steps need to be taken:

  • Open the above page and click on F12 to open the Developer Tools
  • Click on the context menu (three dots) in your developer tools
  • Select More tools

Google Chrome More Tools

  • Select the Rendering option

Rendering in Chrome

  • That should add a new menu tab to the developer tools

Dev Tools Rendering

Emulation Types

Now that we have the Rendering tab active, we need to navigate all the way down in the tab until we see the section Emulation vision deficiencies. Per default the option No Emulation will be selected.

Emulation types

If we want to emulate a specific deficiency we just need to select a value from the drop-down and the page will automatically render with the specific vision deficiency. In the following we will see how our test image will look with each available option:

  • Blurred Vision

Simulating blurred vision problems in Chrome

  • Protanopia– Red-Green color blindness

Simulating Protanopia in Chrome

  • Deuteranopia– Red-Green color blindness

Simulating Deuteranopia in Chrome

  • Tritanopia– Blue-Yellow color blindness

Simulating Tritanopia in Chrome

  • Achromatopsia– a rare non-progressive inborn hereditary visual disorder. It is characterized by complete or incomplete color blindness, extreme light sensitivity, and very low visual acuity

Simulating Achromatopsia in Chrome

Conclusion & Next Steps

As you can see, the Google vision emulation applies the selected option to all the elements of the site and not just to the images. What this means is that you can on the one hand still check your website from a functional point of view, while at the same time checking for issues from a vision impairment perspective ✅

About the author

Solderea Ioan

Creator of https://funquote.herokuapp.com/quotes

Start every day with a smile with a visit to https://isolderea.github.io/


A passionate QA with focus on Quality and Test Automation

• Qualifications include 10 years of QA software testing experience including 1,5 years of user training and user-acceptance testing experience.
• Automation experience with several different tools and technologies (QuickTest Professional, Selenium, Microsoft Coded UI)
• Sharepoint QA tester with full system development lifecycle experience, including designing, developing and implementing test plans, test cases and test processes, user training and customer support.
• Backed by strong credentials including a degree in E Business, ISTQB certification, agile methodologies and monitoring tools; experience with some cutting edge technologies as Sharepoint and ERP systems as SAP.

Leave a Reply