When transparent is not transparent
Tags: a11y, css, html
Published: 2020-01-07 14:33:47

---
title: When transparent is not transparent
published: true
description: A short story of how we discovered that transparent is transformed into white in high-contrast mode on IE.
tags: a11y,CSS,HTML
---

We are working on a component library that needs to be as accessible as possible. So we are running different a11y tests, and during one of those tests, we found an interesting issue on Internet Explorer that was solved in a peculiar way.

...But let me give you some more background first.

We developed a button with the following (simplified) code:

```html
<button>
  I am a button... click me!
</button>
```
```scss
button {
  background: #03a;
  border: 0;
  border-radius: 2px;
  box-sizing: border-box;
  color: #f8f8ff;
  display: inline-block;
  font-weight: bold;
  height: 2.5rem;
  padding: 0 1.5rem;
  text-transform: uppercase;
  transition: background 0.25s;
}

button:focus {
  outline: 1px dashed navy;
  outline-offset: 2px;
}

button:hover {
  background: #029;
}

button:active {
  background: #03b;
  color: white;
}
```

Which looks like this when placed on a web page:

![Animated gif with a button being clicked](https://thepracticaldev.s3.amazonaws.com/i/l723mr7azu2lj1dxz9m3.gif)


And we run different tests on it using several tools. One of the tests consists of running the components in high-contrast mode (HCM). For that, we use the [High-Contrast extension on Chrome](https://chrome.google.com/webstore/detail/high-contrast/djcfdncoelnlbldjfhinnjlhdjlikmph) as well as the native high-contrast mode available on Windows (for tests on Internet Explorer).

In Chrome, the result was satisfactory:

![Button in high contrast mode on Chrome](https://thepracticaldev.s3.amazonaws.com/i/z9ju58yy8l9cz2r2v1uv.png)

But we found some issues on Internet Explorer:

![Button in high contrast mode on IE11](https://thepracticaldev.s3.amazonaws.com/i/88eeucuwo36znk712e52.png)

This is a problem because as the background of the button has the same color as the background of the page, it may look like regular text and not as a button (even when screen readers identify it as a button, sighted users may be confused by it.)

> Before someone says "_why don't you just ignore IE?_", let me tell you that it is not my choice, and this is part of a contract in which the client specifically requested support for IE11. Ignoring IE is not an option.

There is a way to target high-contrast mode on Internet Explorer by using a [media feature like this `-ms-high-contrast`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/-ms-high-contrast):

```scss
@media screen and (-ms-high-contrast: active) {
  /* High contrast styling goes here */
}
```

One possible solution would be to add a border to the button with the same color as its background. That is feasible, but annoying considering that the button has multiple states, and also it can be presented in different colors depending on the placement, functionality, etc.

And then someone said "**_How about using a transparent border?_**"

It sounds silly, no? A transparent border would still be transparent in high contrast mode... wouldn't it? But what did we have to lose? So we tried...

```scss
button {
  border: 2px solid transparent;
}
```

...and **it worked**!

![Button in high contrast mode on IE11 with a white/transparent border](https://thepracticaldev.s3.amazonaws.com/i/fo1duqjjjzm41vvkk8df.png)

Windows HCM converted the transparent border into a white border; which doesn't make too much sense if you asked me –according to this [Accessibilly article](https://accessabilly.com/accessibility-issues-concerning-windows-high-contrast-mode/) this happens because the color is changed in HCM and it will differ from the background–, but I'll take it as it is exactly what we needed:

- The button size is not negatively affected because we are using `box-sizing: border-box`, 
- We don't need to use the `-ms-high-contrast` feature anymore, and 
- The border is not visible because it is transparent... until it isn't.

-----

And that's the short story of how we discovered that transparent is not really transparent in some cases in Windows and IE. 😊

Now, off to continue with the web accessibility testing! Cheers!