How to simulate color-blindness and other visual impairments, in your web browser
By Anne-Mieke Bovelett on November 6, 2024
Status: up to date
Oh, so this is what color-blind looks like?
The featured image with this article is a classic example of how someone with deuteranopia (red-green color blindness) perceives the vibrant green and red colors in the photo of peppers. It’s all the same color and shade. For comparison, I have pasted in a smaller version of the photo with the original colors.
Sometimes you just quickly want to show someone, or check for yourself, if and why a certain design choice, choice of color, or something else in a graphic design is not working for an accessible, converting experience.
You could install extensions for that, but did you know that you can also quickly check this in your browser? These kinds of tools are integrated in the inspector. I published a short tutorial as a video on YouTube. But for anyone not fond of videos, below you find the written instructions.
Using the Vision Impairment Emulator in Firefox
Step 1: Open the Accessibility Panel
- Right-click anywhere on the webpage you’re inspecting.
- Select “Inspect Accessibility Properties” from the context menu.
Depending on your settings, the accessibility panel might appear on the right, bottom, or left of your screen.
Step 2: Simulate Vision Impairments
- In the accessibility panel, search for “Simulate” by looking for the icon with a small eye symbol.
- Click on this icon to reveal a list of vision impairment options.
- Choose the type of color blindness or other vision deficiency you want to emulate. For example, selecting Deuteranopia will simulate how the website appears to users with this type of color blindness.
Once selected, you’ll see the color scheme and overall appearance of the webpage change accordingly.
Using the Vision Impairment Emulator in Chrome
Step 1: Open the Developer Tools
- Right-click anywhere on the webpage you’re inspecting.
- Select “Inspect” from the context menu.
Step 2: Access the Rendering Settings
- With the Developer Tools panel open, click on the cogwheel icon located in the top right corner (near three vertical dots).
- Navigate to “More Tools” from the dropdown menu.
- Select “Rendering” from the expanded list.
Step 3: Simulate Vision Deficiencies
- Scroll down in the Rendering panel until you find the “Emulate Vision Deficiencies” section.
- Choose the type of vision deficiency you want to emulate. For example, select Blurred Vision to see how your site appears to someone with reduced clarity.
This particular simulation helps you understand the importance of using great fonts and maintaining good contrast on your website.
Making these impairments visible to non-impaired decision makers is important
As this is simply a tutorial, and I’d like it to be to the point, I’m not going to list all the reasons why except that 8% of all men and 0,5% of all women are color-blind. Excluding them “by design” is not just inhuman, it’s a decision that will negatively impact your conversion. You can read about that in my article about why it seems I am on the cold commercial side of accessibility.
PS: Are you struggling with selling accessibility to your customers?
I’m more than happy to give you some concrete pointers for that, just get in touch with me. And of course, making sites accessible (and thus higher converting) is not a designer’s job alone. It’s a joint effort by designers, developers and content creators. First and foremost, what happens under the hood of a website is essential.
Choose your tools wisely
There are many page builders and themes with page building capabilities for WordPress out there. And then there are so many third-party plugins to choose from for all those additional features that may need when your builder of choice doesn’t provide them. What they have in common is that they all carry the responsibility for providing you with accessibility-ready code output. That’s the foundation on which you put your accessible design and content for yourself and your customers.
It’s great that page builders provide you with a visual way to build websites, and give you all those cool widgets and elements to build with. They can be a huge time saver! But the fact is that in most cases you cannot influence the code of these if it turns out something needs to be adjusted for accessibility. So they really have to make sure it’s coded properly.
The state of accessibility in commercial page builders
In July this year, Amber hinds from Equalize Digital, creators of the Accessibility Checker plugin, published a report about the state of accessibility of 10 popular WordPress page builders and block libraries*.
It’s great to see that some have been making great strides in this regard. But my favorite tool to build sites with is Greyd.Suite! Am I biased? Absolutely! I’m their appointed accessibility mentor, and this year I became their first official Product Ambassador. But first and foremost, I am a Greyd customer since early 2022 and an entrepreneur who has a continuous strong focus on scalability. I could see that with their tool set, I could easily handle more projects without having to hire additional specialized developers. When I started out using their Suite, it was under the begrudging condition that they would seriously invest in ensuring their code output is accessibility-ready.
I have to say that Greyd couldn’t have drawn my attention at a better time. Because I had just started researching to see if I could find a more scalable solution to efficiently build accessible, sustainable websites for my customers, than the page builder I was using at the time. I wrote an article about that called Is there life after page builders which, much to my surprise, pretty much went viral!
I’ve been poking and pestering the Greyd team about accessibility with such intensity that after a year they invited me to become their mentor for accessibility. I took this opportunity with both hands when they agreed to me publicly sharing their accessibility journey and progress.
You can use Greyd.Suite on a single site, but if you are into building complex sites, and multisite based enterprise grade projects, their other packages are also really worth looking into. I can tell you that Greyd.Suite easily replaces more than 10 premium plugins. And as you no longer need to install third-party plugins for some of the most frequently required functionality, you mitigate the risk of what I like to call ‘Update Blues by Plugin Conflicts’.
Fully block-based with responsive settings!
It comes with a superfast fully Block-based theme that cleanly extends core Blocks. Everything we still miss in WordPress core, is provided. Global breakpoint settings, global and individual responsive settings, fluid typography with clamp, for example.
Included features
Just to name a few, all included in the single license (and in their free trial version* too!): a professional form builder (including conditional display) that can easily keep up with the most advanced in the WordPress eco-system, custom fields and post types, custom taxonomies (including shared ones!), SMTP, pop-ups, Dynamic Templates and Advanced Search & Filter! In their subscriptions, there are even more tools at your disposal.