Use transparent borders and outlines to assist with high contrast mode

Say you’ve got this nice little button.

Because outline doesn’t clip to the shape of your button if you use border-radius, it can be tempting to use a sharp box-shadow for focus styles.

button:focus {
  outline: none;
  box-shadow: 0px 0px 0px 3px #192a56;
}

With standard operating system and browser settings this looks fine. There’s plenty of contrast and the focus style is very clear. Job done, right? Unfortunately not because in Windows High Contrast Mode, both the background and focus styles probably won’t show up.

There is a solution to this: transparent borders and outlines! First, we add a transparent border to our button:

button {
  border: 1px solid transparent;
  /* all the other CSS */
}

This border is completely invisible and you probably won’t even notice it, but the difference in Windows High Contrast Mode is huge.

This doesn’t fix the focus style though. It’s best to provide genuine contrast with focus styles so when a keyboard user tabs to your element, they can see that it is focused. To improve the initial focus style, we need to tweak it a bit:

button:focus {
  outline: 2px solid transparent;
  outline-offset: 4px;
  box-shadow: 0px 0px 0px 3px #192a56;
}

We first set a 2 pixel outline and then using the ever-handy outline-offset, push it out by another 4 pixels. Now, when a user focuses our button, it looks great both in a standard operating system and browser configuration and it looks great in Windows High Contrast Mode.

Here’s all the CSS for the button:

button {
  display: inline-block;
  padding: 0.5rem 2rem;
  font: inherit;
  font-weight: bold;
  border-radius: 2rem;
  border: 1px solid transparent;
  background: #3f25c4;
  color: #ffffff;
  min-width: 10rem;
  cursor: pointer;
}

button:hover,
button:focus {
  background: #8c7ae6;
  color: #000000;
}

button:focus {
  outline: 2px solid transparent;
  outline-offset: 4px;
  box-shadow: 0px 0px 0px 3px #192a56;
}

This is a quick win, for everyone: the visual design is left almost untouched and it’s accessible.