In Detail

The Most Common Windows High Contrast Mode Incompatibilities

, from Notes # 10

  • Selected (?) Radio Buttons: On most web pages it’s impossible to tell whether radio buttons are selected. In the example below, the “One Way” option is marked, but this can not be seen visually when High Contrast Mode is turned on.

Two radio buttons side by side in a black background. Selection areas are empty in both of them.

  • Invisible Icon‑Buttons: Hamburger‑menu icons, the “X” symbols used to close pop‑ups, and similar icon buttons can become invisible due to low contrast. Because I couldn’t see the hamburger menu, I mistakenly thought the site was a single‑page site most of the time.

A hamburger menu icon in the header

A black header. Nothing can be seen.

  • Datepickers: Just like radio buttons, most calendars do not make it clear which date is selected. In the example below, May 4 and May 6 are actually selected, but this isn’t visible. Google Flights’ design is a very good example here.

A table-like calendar. Each day seems like the same.

A table-like calendar. 3 May and 6 May is marked with a circle

  • Selected (?) Tabs: Determining which tab is active becomes impossible in situations like the one shown below.

There are three tabs under

  • Buttons Without Borders: Missing button borders are a common issue like in Spotify’s cookie‑accept banner. Although it doesn’t severely affect functionality, floating‑in‑the‑air buttons are not a great user experience.

There are three options: Accept, decline and manage. But there are no borders around the buttons.

Discuss this article on LinkedIn