Removing the default focus outline with outline: none is one of the most common accessibility mistakes in CSS — it makes a site effectively unusable for anyone navigating by keyboard.
/* NEVER do this without a replacement */
button:focus { outline: none; } /* keyboard users lose all visual feedback */
/* Instead: replace it with something equally visible, or better */
button:focus-visible {
outline: 2px solid #3858e9;
outline-offset: 2px;
}
/* :focus-visible only shows for keyboard navigation,
not mouse clicks - the best of both worlds */
Color Contrast Matters Too
/* WCAG AA requires at least 4.5:1 contrast ratio for normal text */
.text-low-contrast { color: #999; background: #fff; } /* fails - ~2.8:1 */
.text-good-contrast { color: #595959; background: #fff; } /* passes - 7:1 */
Browser DevTools’ accessibility panel flags contrast failures directly, and :focus-visible lets you style keyboard focus distinctly from mouse clicks — both are small changes with an outsized real-world impact on who can actually use your site.