Icons That Vanish in High Contrast Mode

A setting that repaints every page

Windows has a high contrast setting, built in for years, that replaces the colours of everything on screen with a few strong ones: usually white or yellow text on black, or black on white.

People with low vision use it, as do people who find bright screens painful and some who simply read better that way. For them it is the normal way to use a computer, not an experiment.

Internet Explorer, still the browser on many office computers, applies the setting to every website. Colours are swapped, and background images are removed entirely.

Any button that was only a background image goes with them.

What disappears

• Social media icons drawn as background images, with no text.
• The menu button on a narrow layout, often three short lines.
• The magnifying glass that submits the search box.
• Phone, email and map icons standing in for the words.
• Arrows on slideshows and galleries.
• The close button on a pop-up or sign-up box.

The last one does the most harm. A pop-up that covers the page and cannot be closed leaves the visitor with nothing to do but leave.

Why background images are removed

A designer can place an image in two ways. It can be part of the content, like a photograph in an article, or it can be decoration added by the style sheet, behind or beside the content.

High contrast mode treats decoration as optional. It keeps images that are part of the content and drops the decorative ones, because a texture or gradient behind text is exactly what makes that text hard to read.

The trouble starts when the decoration method was used for things that carry meaning. Icon sets saved as one large picture, with the style sheet showing a different piece of it on each button, are the usual culprit.

Text hidden for screen readers is hidden here too

Many of these buttons do contain a word, such as search or menu, positioned off-screen so that only the icon shows. Screen readers still announce it.

In high contrast mode that does not help. The person using it can see, just not well, and both the icon and the hidden word are out of view.

So a site can pass a screen reader check and still leave high contrast users with blank spaces where the controls should be.

Checking your site

On a Windows 7 or 8.1 computer, press left Alt, left Shift and Print Screen together, and confirm. The screen switches to high contrast; the same keys switch it back.

Open the site in Internet Explorer and go through it as a visitor would: the home page, a service page, the contact page, the shop and anything that pops up.

Look for blank spaces where controls should be, buttons that have turned into plain words with no outline, and text that has vanished from banners.

Try a black and a white high contrast theme. A Mac has contrast settings too, but they do not remove images in the same way, so the test needs Windows.

A worked example

A food safety trainer runs one-day certificate courses for cooks, servers and kitchen managers in a rented classroom, and takes registrations on its website.

The course calendar showed each date with three small icons: a pencil to register, a printer for the course outline and a calendar for saving the date.

All three came from a single image of icons, placed by the style sheet.

A kitchen manager with low vision phoned to say she could see the dates but nothing to click. In high contrast mode the icons were gone, and the clickable areas were blank.

The trainer had never seen the problem, because the office used a Mac.

The fix was mostly words. Each date now has a bordered button reading Register and a link reading Course outline. The calendar icon was dropped, and the footer's social icons gained their names in text.

Give every control visible text

The most reliable fix is a visible word on every control: Search, Menu, Register, Call, Close. Words survive any colour scheme, and they help everyone who does not know what an icon means.

Where an icon has to stand alone, make it a real image in the page, with alternative text that says what it does. High contrast mode keeps those images, and screen readers read their text.

Icons placed beside a visible word can stay as decoration. Losing them costs nothing.

Buttons that lose their shape

High contrast mode also replaces background colours. A green box with white lettering becomes plain text on black, indistinguishable from the words around it.

A border keeps the shape. The mode draws borders in its own colours, so a button with an outline still looks like a button.

Links benefit from the same thinking: underlined links stay recognisable when every colour on the page has been replaced.

Where WCAG comes in

WCAG 2.0, the guidelines most accessibility checks are measured against, asks that anything conveyed by an image also be available as text. Its documented failures include using style sheet images to convey important information.

Level AA also discourages pictures of text where real text would do, which covers banners with the offer written into the image.

Meeting those two points removes most of what high contrast mode can break.

The counter-case

Decorative backgrounds can vanish without loss. A photograph behind a heading, a texture or a pattern was never doing any work, and high contrast users are glad to see it go.

A site where every icon already sits beside a word will pass with little or no change, and a site rebuilt recently may already be fine; ten minutes in the mode will confirm it.

The controls are what matter. Check them in high contrast mode, and give each one visible text or a real image with alternative text.

The check

1. Switch on high contrast on a Windows computer.
2. Open the site in Internet Explorer.
3. Visit every page type and every pop-up.
4. Note each blank control and missing banner text.
5. Add visible words to icon buttons.
6. Give buttons borders, not just colours.
7. Repeat the check after each redesign.

Step three matters because the worst failures hide where nobody tests: a pop-up that appears once per visit, the last page of the checkout, or the narrow-screen menu a page switches to when someone zooms in.

A layout problem that troubles the same readers is covered in lines of text that run the width of the screen.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.