Building Visually Accessible Websites by Supporting Contrast Theming

“Accessibility” as the word suggests is the concept of making products available to different spectrums of people. Making tech accessible means designing it in a way that it can be used by people with a diverse range of movement, sight, hearing, and cognitive abilities, people with a diverse range of devices, and those with a lower network bandwidth. However, the scope of accessibility is not limited to the ones that I just mentioned, and the general idea is to bring our technology to as many people as we can.

As of January 2024, 5.35 billion people are using the internet worldwide, which amounts to 66.2% of the global population [Source: Statista]. As networks become more widely available, these numbers will keep growing, and it makes us as creators of content on the web more responsible for making our content on the internet available to a larger spectrum of internet users.

WCAG Contrast Criteria

The WCAG guidelines (Web Content Accessibility Guidelines) recommend a minimum contrast ratio of 4.5:1 for text and images of text. This means that the difference in luminance between the text and the background should be at least 4.5 times greater. For large text (18pt or larger) or bold text, the minimum contrast ratio is 3:1.

The above guideline is developed by the W3C (World Wide Web consortium) to ensure that creators, designers, and developers build more usable and accessible content on the web.

Visual Accessibility

Windows provides four inherent High Contrast themes to support users with visibility impairments. These themes are built using a small color palette, resulting in a higher contrast ratio, making UI elements easier to see and thus improve navigation, ease of use, and readability.

The High Contrast settings can be changed through Start Menu > Settings > Contrast Themes.

(A screenshot of Windows Contrast Setting Screen showing the Different High Contrast modes — Aquatic, Desert, Dusk, Night Sky)

Windows Supports 4 High Contrast Themes — Aquatic, Desert, Dusk, and Night Sky

You can check High Contrast mode using forced-colors media feature. This can be paired with prefers-color-scheme to determine whether it’s a dark mode high contrast or a light mode high contrast.

const highContrast = matchMedia('(forced-colors: active)');
const darkTheme = matchMedia('(prefers-color-scheme: dark)t.');

function checkThemes() {
    if (highContrast.matches) {
        console.log('High contrast enabled');
    }
    if (darkTheme.matches) {
        console.log('Dark mode enabled');
    }
}

For Windows users, a dark theme with high contrast would mean that the contrast theme is either Aquatic, Night sky, or Dusk. A light theme with High Contrast would indicate a Desert Theme.

In High Contrast mode the following changes happen:

• Background colors and background images are removed and replaced with white or black, or a corresponding theme color.
• Any CSS styling furthermore is overridden. This is the opposite for border, or outline colors.
• Any UI opacity is turned to 100%. Images remain unaffected unless manually replaced.

A Snip From the Bing Homepage in an Aquatic High Contrast Mode

High contrast mode is primarily an operating system (OS)-controlled feature, and developers don’t need to explicitly build it into their products. Browsers automatically adjust web content when High Contrast Mode is active. However, as a developer, you may need to tweak your code or write your code in a way that enables the OS to effectively wrap its High Contrast Palette around your code.

You will need to style your UI to support High Contrast Users.

The best way to do this is to use Semantic HTML. Semantic HTML refers to using HTML elements that convey meaning about the structure and content of a web page. Note the <a/> and the <button/> tags being used explicitly for UI Elements.

<a href="https://www.example.com">Visit Example</a>
<button type="button">Click Me</button>

A non-semantic HTML would be written like this

<div style="cursor: pointer; text-decoration: underline; color: blue;">Visit Example</div>
<p>To Visit the Docs <span style="color:blue;">Click Here</span></p>

Windows uses these semantic tags to enforce a High Contrast mode. A would look like a Button but a Button built using a div would look like any other text.

Another way would be to use the ‘transparent’ property correctly. Surrounding text containers with a border: 1px solid transparent would ensure that these borders pop up correctly while on a High Contrast mode.

.textContainer {
    border: 1px solid transparent;
}

Any additional styling that you feel may be necessary can be written using the following CSS queries to detect Forced Colors/ High Contrast mode.

@media (forced-colors: active) {
    /* Your high contrast styles go here */
    /* For example: */
    body {
        background-color: black;
        color: white;
    }
}

However, it is recommended that you keep manual forced colors styling to a minimum, and let the operating system do the heavy lifting.

There may be an instance when you want your custom styles to persist over the forced styles that Windows is applying on your components. forced-color-adjust is the CSS Property that does the job. Setting it to auto will allow the element to be of the color specified by the OS. Setting it to none will allow your custom styling to persist.

/* In forced colors mode, the element will keep its custom colors */
.custom-box {
    border: 2px solid gray;
    background-color: #f0f0f0;
    padding: 10px;
    forced-color-adjust: none; /* Custom styling persists */
}

Instead of building your own components, using a 3rd party library always turns out to be helpful, because they're developed with best accessibility practices in mind. You can try out using Bootstrap, Material UI, Semantic UI and the likes.

Have a great time building the web!

Please leave a feedback <3

I hope you found this blog helpful! Your feedback is invaluable to me , so please leave your thoughts and suggestions in the comments below.

Feel free to connect with me on LinkedIn for more insights and updates. Let's stay connected and continue to learn and grow together!