Basic Web Accessibility Tests: Turn Your Monitor to Grayscale

To truly test content for accessibility, you need an extensive strategy that combines automated testing with manual tests. You should have a goal in mind — for most websites, that’s Level AA conformance with the Web Content Accessibility Guidelines (WCAG). 

But while a full-scale website audit requires some planning, you can perform simple tests that help you understand the importance of digital accessibility. That’s no small thing: An accessibility-first mindset can help you make better decisions when crafting your content. 

One of the simplest ways to expand your perspective is to restrict the number of colors you can view on your screen. You can set most operating systems to use a grayscale (black-and-white) color scheme by default.

This has been catching on as a sort of “productivity hack.” The idea is that by switching to a black-and-white display, you can reduce screen time by making the internet — well, less interesting. 

The productivity-boosting benefits might not work for everyone. However, switching to grayscale can certainly help you understand one of the most important (and most frequently ignored) WCAG requirements.

How "Use of Color" Impacts Digital Accessibility

WCAG’s Success Criterion 1.4.1, “Use of Color,” lays out a simple rule for creating visual content:

Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

This is important because people see color differently. About 8% of men have a color vision deficiency (CVD), and folks with other types of vision disabilities may change their display settings to make text more readable. 

When a website relies on color alone to convey something important, some people will miss out on that information. A few common examples:

• A website’s hyperlinks have blue link text, but there’s no other indication that the text is a link. Ideally, the text should be underlined.
• A web form highlights essential fields with red boxes. Once again, there needs to be another indicator (most commonly, an asterisk).
• A pie chart or bar graph might use different colors to distinguish between data sets. For users with CVD, these distinctions can be impossible to perceive. 
• Many applications use a red or green dot to indicate a status like "online," "busy," or "offline." Without a secondary indicator, some users will be left out.

Of course, most people with color vision disabilities can still see certain colors; true monochromatic CVD is extremely rare. But if you take all color out of the equation, you’ll quickly understand how often color is used as the only means of communicating a message.

Related: Myths and Facts About Color Blindness and Accessibility

How to Enable Grayscale Mode on Your Phone or Computer

You can find the grayscale setting in your device's accessibility options. It’s a good idea to set a shortcut — you’ll want a quick way to revert back to normal color settings, particularly if you’re using grayscale as an accessibility test.

Here’s the basic process for common operating systems:

• iOS: Go to Settings > Accessibility > Display & Text Size > Color Filters, then toggle on the filter and select Grayscale.
• Android: Go to Settings > Accessibility > Color and motion > Color correction, then toggle on the setting and select Grayscale.
• Windows 11: Go to Settings > Accessibility > Color filters, then toggle on the filter and select Grayscale.
• macOS: Go to System Settings > Accessibility > Display > Color Filters, then enable the filter and choose Grayscale as the filter type.

Note that the exact path may vary, depending on the exact operating system you’re using.

Related: Give Yourself an Accessibility Test: Zoom Your Page to 200%

When Using Grayscale Mode, Ask Questions

You might find “grayscale mode" is an excellent productivity booster (we’ve been using it for the past several weeks, and we’ve noticed that we’re scrolling Reddit less frequently). As an accessibility testing tool, it’s limited, but it’s a nice way to quickly check your content for major errors.

To get more from the experience, try asking yourself questions:

• Do I need to switch back to a “normal" color scheme for the content to make sense?
• If there are status indicators (e.g., "online," "out of stock," "sale"), do they still make sense without color?
• Are error messages, success notifications, or other alerts easy to comprehend without color (like red or green) to signify their meaning?
• Are all interactive elements (such as forms, buttons, hyperlinks) still understandable?
• In navigation menus, is it clear which page is currently active or selected?

Remember, you’re building your knowledge of accessibility — so if you feel frustrated or confused, try to learn from the experience. Think about what you could do differently when designing your content to make sure that every user has the same access to information.

While the grayscale test is a powerful way to build empathy and spot obvious color-related barriers, it’s just one component of a complete accessibility strategy. If you’re ready to take the next step, get started with a free automated analysis powered by AudioEye or send us a message to connect with an expert.