CSS Accessibility (focus, contrast)

Badar KhalilUpdated October 1, 2026 2 min read

CSS Accessibility (Focus, Contrast)

CSS accessibility isn't just a legal checkbox — it directly affects whether keyboard users, screen reader users, and people with low vision can actually use your site. This guide focuses on two of the most impactful areas: visible focus states and sufficient color contrast.

Why CSS Accessibility Matters

Many accessibility failures come down to CSS decisions — removing focus outlines, using low-contrast text, or hiding content in ways that break for assistive technology. Fixing these issues in CSS accessibility often requires only a few lines of code but has a major real-world impact.

1. Visible Focus States

Keyboard users rely on the browser's focus indicator to know which element is active. Removing it with outline: none; without a replacement makes a site unusable for anyone navigating by keyboard or switch device.

Mistake	Consequence
outline: none; with no replacement	Keyboard users can't see which element has focus
Focus style identical to default state	No visible difference when an element is focused
Low-contrast focus ring	Focus indicator is hard to see for low-vision users

2. The :focus-visible Pseudo-class

:focus-visible lets you show focus styles only for keyboard navigation, while suppressing them for mouse clicks — giving mouse users a cleaner UI without sacrificing keyboard accessibility.

3. Color Contrast Basics

WCAG Level	Normal Text	Large Text
AA (minimum)	4.5:1 contrast ratio	3:1 contrast ratio
AAA (enhanced)	7:1 contrast ratio	4.5:1 contrast ratio

Tools like WebAIM's Contrast Checker can verify whether a text/background color pair meets these ratios before shipping.

4. Don't Rely on Color Alone

Conveying meaning through color alone (like red text for errors) excludes colorblind users. Always pair color with an icon, text label, or pattern.

5. Respecting Reduced Motion

Some users experience discomfort or vestibular issues from animations. The prefers-reduced-motion media query lets you disable or simplify animations for users who've set that system preference.

6. Accessible Hiding Techniques

Technique	Effect
display: none;	Hides from everyone, including screen readers
visibility: hidden;	Hides visually and from screen readers, but keeps layout space
.sr-only class pattern	Hides visually but keeps content available to screen readers

Try It Yourself

Practice writing accessible focus and contrast-safe CSS with the examples below.

Try it Yourself CSS

button:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 2px;
}

/* No ugly outline for mouse clicks, but keyboard users still see it */
button:focus:not(:focus-visible) {
  outline: none;
}

Output

Press Run to execute.

Try it Yourself CSS

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

Output

Press Run to execute.

Try it Yourself CSS

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Output

Press Run to execute.

Exercise: Fix the Invisible Focus StateCSS

The CSS below removes focus outlines with no replacement. Fix it so keyboard users get a clearly visible focus indicator using :focus-visible.

Try it Yourself CSS

a, button {
  outline: none;
}

Output

Press Run to execute.

Show expected output

CSS that restores a visible focus indicator for keyboard navigation using :focus-visible.

This is a self-check — compare your result with the expected output above.

Was this page helpful?