X-Ray! [A to Z a11y]

An emoji behind an X-Ray scanner showing a skeleton. There are also dancing Lego skeleton minfigures and a Lego X-Wing fighter (just because it's X).

X-Ray glasses not required

Hold on now, X-ray? Admittedly this one is a bit of a stretch, but we’re actually talking about colours. Specifically testing colour-modes and colour-related assistive technology/tools.

The companion article for this one “C – Colours Everywhere” can be read by clicking here. In it the concept of colour design is discussed, so these two really do go together.

This post is about tooling and testing rather than specific development so it applies to ALL the Power Platform. Yup I’m looking at you all: Power Apps, Power BI, Power Pages, Copilot studio, even Dataverse. This also applies to all you Web Devs, Pro-Devs, and Microsoft 365 users.

So, why the mention of X-Ray specifically?

Within Windows 11 there is the option to enable Colour Filters to your PC. Other OS’s have similar features but YMMV. One of those colour modes is “Greyscale Inverted” which just makes me think of X-Rays. Tenuous yes, but the connection works for me here.

These colour filters are designed to help people who have Colour Vision Deficiency. I shall call Colour Vision Deficiency CVD from here on in. CVD is also called colour-blindness but that term isn’t really accurate. A philosophical question – how do you know that your green is the same idea of green as mine? That’s by the by though.

Over 8% of men have CVD, whilst it only affects 0.5% of women. That is a sizable chunk of your user base! For every 13 men you are statistically like to have 1 with CVD. There is a great post about CVD over at Market US Media which you can read here.

Colour filters enable the global changing of the way colours appear within Windows. There are 6 options available to cover the majority of scenarios that exist:

  • Red-green (green weak)
  • Red-green (red weak)
  • Blue-yellow
  • Greyscale
  • Greyscale Inverted
  • Inverted

Within the first three there is also the option to adjust the Intensity and the Colour Boost. These filters are designed to make it easy for people with CVD to use PCs. They do this by altering the way colours are presented on screen.

A Night(light) in shining armour

In addition to this capability there is “Night Light” mode which reduces the blue light glare. In the process it also applies a more yellow/orange filter over the whole display. I personally use a tool called f.lux to set a yellow filter on my screen. You can download f.lux from their website here. Night Light mode is often used by people who are susceptible to headaches and migraines. By reducing the overall glare it reduces eye-strain and can reduce the risk of developing a headache or worse.

From personal experience I know that I have to have a yellow filter. Without it I will get a major headache by mid-afternoon. If I go without for a few days then it becomes a migraine, leading to me being ill for days.

Why does this matter?

When we create digital content of any kind, we will spend time on appearance. For some that may be a cursory nod to how things look. For others it will be obsessing over a specific shade of chartreuse.

When people use colour filters, our design is presented in a whole new light. What once looked beautiful can become a hot mess that is unusable.

This is why we should incorporate colour testing as we build things. Test out the colour modes to check for contrast and if colours next to each other appear distinct. Ignore the specific colours that are shown under a colour-filter and focus on the usability and visibility. This particularly applies to the greyscale modes.

Testing this, from a colour-neutral perspective, is a simple case of turning on the colour filters. We should also, always, try to find users with CVD to test. In any case, all our testing should incorporate colour – including X-Ray mode.

Thanks for reading X – X-Ray

Albeit a tenuous link, this post has been the letter X in the A to Z Accessibility: Power Platform Edition. Hopefully you enjoyed it and found it useful. This post is part of the A to Z Accessibility: Power Platform Edition. To see all the posts in the series head on over to the intro post by clicking here. You can also click on the top menu bar category page link, which you can also get to here.

This series is © Mike Hartley. Quoting snippets is OK so long as their is attribution. Please don’t go copying whole chunks out of the post though. If you do want to use larger portions then please contact me using the links on this site.