Skip to main content
ux-ui

Rule #2 – Design for the Operating System's Built-In Accessibility

By טוביה שיינפלד May 24, 2026 1 views

Why do websites break when High Contrast Mode is enabled?

Websites that rely on CSS background images as a core design element break in High Contrast Mode because the OS hides background images, leaving text unreadable against an empty background. The fix is to use semantic HTML and CSS, avoid conveying critical information through background images, and test your UI under different OS accessibility modes.

Did you know:

True accessibility starts by working with the technology users already have. Supporting OS-level accessibility features like High Contrast Mode isn't a bonus — it's a fundamental requirement for every interface.

 Accessibility Starts with Supporting Technology That Already Exists

Every operating system — whether it's Windows or macOS, Android or iOS —   comes with built-in accessibility tools. These tools are an integral part of the OS itself. They are technologies that enable people with disabilities to use their personal devices just like anyone else: launching applications, reading documents, browsing the web, and carrying out everyday tasks.

When we design an accessible user interface, we must support the features our users already rely on — features built into the accessibility infrastructure that operating systems themselves provide.

High Contrast Mode? Your Interface Needs to Handle It

Consider a Windows user who has enabled High Contrast Mode (High Contrast Mode)a built-in tool designed to help people with visual impairments. This feature is widely used, and when activated, the OS automatically overrides the colors of text and backgrounds to make them more readable and distinct.

But what happens when a website doesn't account for this?
Many websites — especially those that rely heavily on CSS background images as a core design element, simply disappear. When a background image is used as the foundation for displaying text or providing visual contrast — but vanishes entirely in accessibility mode — the user is left with a broken, unreadable, unclear interface that is sometimes completely unusable.

A concrete example:

In the first screenshot — an interface on a non-accessible site. All logos are rendered using CSS  as background images rather than as an IMG tag

Non-accessible interface – before High Contrast Mode is enabled

The moment High Contrast Mode is activated, a dark background that exists as an image (rather than a standard CSS color) disappears — and the light-colored text sitting on top of it becomes almost completely unreadable.

Non-accessible interface – after High Contrast Mode is enabled

The takeaway: embrace the accessibility tools built into the OS

Instead of "fighting" the operating systemwork with it. Give assistive technologies the place they deserve. Use HTML and CSS semantically and correctly. Don't rely on background images to convey critical information. Maintain clear hierarchy, ensure adequate contrast, and always test your website or system under different OS accessibility modes.

Real accessibility starts before the code

Accessibility isn't just about meeting standards — it's about deeply understanding how users perceive your interface. The better we understand the tools that help them, the better equipped we are to build products that genuinely respect them.

Frequently asked questions

Updated:

Ready to make your site accessible?

Run a free WCAG 2.1 AA / ADA scan or talk with our team

Ready to make your site accessible?

Leave your details and we'll get back to you with a custom offer — no commitment