CSS and Accessibility

Accessibility in CSS is about making sure the visual styling of a page doesn't create barriers for people with different vision, motor, or cognitive needs. Because CSS controls color, contrast, focus indication, and motion, it plays a direct role in whether a site is usable by people relying on screen readers, keyboard navigation, or assistive settings at the operating-system level.

Three concerns come up constantly in accessible CSS: sufficient color contrast for readability, visible focus indicators for keyboard users, and respecting a user's request to reduce motion — each backed by concrete, testable CSS techniques rather than vague guidelines.

Why it matters

CSS can make a page unusable without changing a word of it: pale grey text that cannot be read in sunlight, a removed focus outline that leaves keyboard users lost, motion that makes some people ill. A few rules, written once, prevent all three, and they are checked in every accessibility audit.

Color Contrast

Text needs sufficient contrast against its background to be readable by users with low vision or color blindness. The Web Content Accessibility Guidelines (WCAG) define a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (roughly 18pt or larger, or 14pt bold) at the AA compliance level. Contrast is a function purely of the color and background-color values you choose in CSS, so checking a color pairing with a contrast-ratio tool before shipping is a simple, high-impact habit.

Focus-Visible Styles

Keyboard users navigate a page by tabbing between focusable elements (links, buttons, form fields), and they rely entirely on a visible focus indicator — usually an outline — to know where they currently are on the page. Removing the default outline with outline: none without providing a clear replacement is one of the most damaging accessibility mistakes in CSS. The modern :focus-visible pseudo-class lets you style focus specifically for keyboard interaction while avoiding an outline appearing on a simple mouse click, giving the best experience for both input methods.

prefers-reduced-motion

Some users experience discomfort, dizziness, or distraction from animated motion, and many operating systems expose a "reduce motion" accessibility setting that CSS can detect with the prefers-reduced-motion media feature. Wrapping non-essential animations and transitions in @media (prefers-reduced-motion: reduce) { ... } lets you shorten or remove motion for users who have requested it, without affecting the experience for everyone else.

Examples

.button {
  outline: none; /* removing default requires a deliberate replacement below */
}

.button:focus-visible {
  outline: 3px solid #0057d9;
  outline-offset: 2px;
}

Clicking the button with a mouse shows no outline, but tabbing to it with a keyboard displays a clear, high-contrast 3px outline offset from the edge, so keyboard users always know where focus currently is.

.hero-heading {
  animation: fade-in-up 0.6s ease-out forwards;
}

@media (prefers-reduced-motion: reduce) {
  .hero-heading {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

Most users see the heading animate in with a fade and slide, while users with reduced-motion enabled at the OS level see the heading appear immediately in its final position, with no animation at all.

Exercise

Fix three problems. The paragraph's light grey text has too little contrast on white; change it to #374151. The button's focus outline has been removed; give keyboard users a 3px solid outline in #1d4ed8 with a 2px offset. The button animates constantly; stop the animation for users who prefer reduced motion.

Expected result: darker paragraph text, a visible outline when the button is reached with the Tab key, and no pulsing when the system's reduced-motion setting is on.

/* The page contains: <main> with an <h1>, a <p> and a <button> */

p {
  color: #c0c0c0;
}

button {
  outline: none;
  animation: pulse 1s infinite alternate;
}

@keyframes pulse {
  to {
    transform: scale(1.1);
  }
}

/* The page contains: <main> with an <h1>, a <p> and a <button> */

p {
  color: #374151;
}

button {
  animation: pulse 1s infinite alternate;
}

button:focus-visible {
  outline: 3px solid #1d4ed8;
  outline-offset: 2px;
}

@keyframes pulse {
  to {
    transform: scale(1.1);
  }
}

@media (prefers-reduced-motion: reduce) {
  button {
    animation: none;
  }
}

Quick quiz

Interview questions