And so, I’ve been revisiting some work I did previously for Open Media Player on fixing high-contrast related bugs and issues.
Before we get into the meat of the post, I’ll recap why high contrast and ignore colour settings matter. People with low vision use a number of techniques to read text and web sites. They may use a screen magnifier, or zoom in with their browser. And, those users who struggle to perceive contrast, may employ the high contrast settings built into operating systems including Windows. Or, they may set their browsers to ignore the colours and styles specified by a web site.
Under such settings, background images used on buttons and elsewhere will disappear, and subtle borders which help to demarcate regions of a page can become invisible. Suddenly, an apparently beautiful page becomes much harder to comprehend!
Obviously, it’s better to consider this situation upfront, and take care how background images and other styling is used. However, if you find that you need to fix a site after the fact, is there anything you can do?
Why … yes!
<body> of the web page –
the only cost is that the test is run every 4-8 seconds via
A lot of the CSS fixes will involve colours and colour combinations. Your initial reaction may be – “Help! I don’t know what specific settings or high-contrast theme the user has chosen. So, how do I select safe colours?”
The answer can be found in the use of operating system styles. These are a set of pre-defined terms in CSS, that tell the browser to use your computer’s operating system colours – whatever they may be.
An example follows from the LACE project –
note this is applied to SVG, hence the use of
Highlight is one of the pre-defined system styles, which produces the green
bars in the Sankey diagram on the right of the first screen shot, in high contrast mode.
In “normal” mode, the bars in the diagram are a light grey.
The next CSS example is applied to form fields, and uses the pre-defined term
border-style property must be
inset to overcome a Firefox restriction or bug.
And, here’s a screen shot showing the result of the fix, again on the right. As you may be able to see, the edges of the form fields are more noticeable, after the fix.
Not, pretty, but pragmatic accessibility fixes for high contrast and ignore-colour settings.
Now. Go experiment!
Update, 5 April 2016. I propose that there are actually three components: