Accessibility: don't remove borders from buttons

Removing borders from buttons is part of many CSS resets, including mine, till recently:

However, during an accessibility test with a tester who uses high-contrast mode, I realized the problem with this.

High contrast mode is used by many people with low vision or photosensitivity. It replaces your carefully-chosen website colour palette with palettes that are easier for such users to perceive and tolerate. Among other things, it strips background colours from buttons, rendering them the same colour as the rest of the background.

This works fine for buttons with browser default styles, which include a border. But if you've removed those borders with CSS, all that's left of the button is its label text—which, unlike link text, is rendered the same colour as regular text. Here's an example of buttons without borders, viewed in one of the standard Windows high contrast themes:

Without borders, background colours, or any other indication that they are interactive, my tester was uncertain about whether buttons were, indeed, buttons. The only cues she had were things like placement and label wording. She had to hover over them to see if the cursor turned into a hand (which is not the default for buttons; it has to be set in CSS).

Button borders, on the other hand, are retained in high contrast mode. They are converted into the appropriate colour, depending on the theme. Users in high contrast mode see them something like this:

The difference can be clearly seen. The buttons with borders are much easier to perceive as buttons.

So, don't remove borders from your <button>s. Give them custom borders if you wish, but give them borders. If you don't want the borders to show in non-high contrast mode, make them the same colour as the button background.

What about button-style links? Typically, these links have a background colour and no underline, making them look like buttons. Whether that's a good idea is debatable, but that ship has sailed; these links are very popular.

Same as for buttons, in high contrast mode, only the link text will show. High contrast mode displays links in a different colour than non-linked text, but we know from Success Criterion 1.4.1 Use of Color that colour alone is not sufficient for "conveying information, indicating an action, prompting a response, or distinguishing a visual element".

Given that underlines are the web standard for indicating links, I'd recommend using the CSS forced colors media query to underline any links that have had underlines removed in your default styling, including button-style links, in high contrast mode.

This would also include menus and any other links that typically aren't underlined. However, don't try to replicate your nice design in high contrast mode—that simply isn't possible—nor go all out trying to make a high-contrast-specific theme. People use high contrast out of necessity, not esthetics. They just need to be able to see, understand, and use your content. The MDN standard warns:

In general, web authors should not be using the forced-colors media feature to create a separate design for users with this feature enabled. Instead, its intended usage is to make small tweaks to improve usability or legibility when the default application of forced colors does not work well for a given portion of a page.

So, just test in high contrast mode to ensure that everything essential is visible and make any small adjustments necessary for accessibility and usability, such as button borders and link underlines.