WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: High Contrast Test

for

From: Mallory
Date: Jan 5, 2020 1:07PM

Hi,
Chrome doesn't support WHC (or didn't... since Microsoft switched Edge's browser engine to chromium, which Chrome uses, they've added code and patches. There's a canary version of Chrome which does support WHC now, and I think in the next few months all Chrome will support it), so right now you can test using Firefox (although I wouldn't unless you know how to adjust it due to Firefox bugs), IE11 and Edge.

Edge is a pleasure to use with WHC. Unlike FF and IE11, it will show CSS background images. In the past, browsers removed these in order to ensure high contrast, however Edge deals with this by adding "backplates" of a solid background colour to text blocks.

The main thing with Windows High Contrast is it offers a severely limited colour palette to users (so it's not necessarily limited to users who need a very high contrast. It's also useful for people who need any particular palette, including low contrast if they need that). While it shouldn't matter which of the pre-made themes you use, I tend to use any of the black ones. In Firefox if you don't change any settings (fresh Firefox install), you'll want to stick to the White theme until they completely fix their WHC bugs.

What to check for: if you can't see controls (because their edges and/or icons are invisible); can't tell the difference between control states (pressed buttons, checked custom checkboxes and radios, selected custom dropdown items with keyboard, focus states). If a modal dialog opens, can you tell what content belongs to the modal vs the page below?

The above can mean that content is relying on Color Alone or changes in color as the sole indication of conveying information visually, which I find extremely common. What's more particular to Windows High Contrast which may not be true of other high contrast technologies is that CSS box-shadow is also ignored, meaning elements whose hit areas or focus states are delineated with box-shadow alone instead of borders and outlines are invisible (example: you can't use keyboard + WHC on Twitter because they expose the focus states of many buttons with box-shadow only).

The related WCAG SCs are Use of Color (1.4.1) and Sensory Characteristics (1.3.3; while the bulk of 1.3.3 is about "instructions", one of the listed Failures, F26, mentions graphical symbols, for example if users need to see it to determine what a button does, or how it works, or its status. SVGs used as icons need to be marked up properly, or properly designed, in order to be visible at all or have sufficient contrast when WHC mode is on).

Whether you want to consider this a bug on the part of developers (they can easily fix this by adding transparent borders and outlines) or on the part of the accessibility tool is up to you/your organisation. Personally, because I find the fixes trivial and because this can affect a decent number of people (Microsoft claims it has measured 4% of its users running WHC. 4% of all Windows users is no small number), I always flag this somehow and recommend developers make the changes. That and I'm selfish: I'm a regular WHC user, and there are websites where I have to turn it off if I want to use them with keyboard. Luckily I'm not restricted to keyboard!

A bug I've recently discovered, which I certainly consider a WHC bug, is text inside <mark> elements do not appear to adjust their colours the way all other text does. This can render all the content inside the <mark> elements completely invisible unless it occurs to the user to hit Ctrl-A or something-- it's visible when highlighted.

cheers,
_mallory

On Sun, Jan 5, 2020, at 6:57 PM, james mathu wrote:
> Hi All,
>
> Requesting you to help with this.
>
> I want to perform a high contrast test as a part of Accessibility
> testing. I am using chrome browser and i am trying to perform this test by
> using Default Windows Contrast Themes.
>
> Question1: Are those themes apply to the chrome browser & which themes we
> need to use for testing.
>
> Question 2: What is the importance of doing this High contrast test?
>
> Question 3: If those themes are not applicable on chrome browser can you
> pleas suggest me any of the good tools to perform this high contrast test.
>
> Regards,
> James
> > > > >