Every accessibility audit tends to uncover the same recurring issues, and surprisingly, many of them can be traced back to just one or two lines of CSS.

The problem isn’t careless developers; it’s that many of these patterns have become common habits inherited from outdated tutorials and boilerplates that were never designed with accessibility in mind.

In this article, we’ll walk through five of the most common CSS accessibility mistakes, supported by WebAIM Million 2024 data, along with practical code examples to fix them.

---

1. Removing outline: none Without a Replacement

This is arguably the most harmful accessibility mistake found in CSS.

According to the WebAIM Million 2024 report, nearly 78% of websites have detectable focus indicator issues.

The most common reason?

❌ Avoid this

* {
    outline: none;
}

/* or */

button:focus {
    outline: 0;
}

Removing the focus indicator makes keyboard navigation extremely difficult for:

• Keyboard-only users
• People with motor impairments
• Screen reader users
• Anyone navigating using the Tab key

✅ Do this instead

button:focus-visible {
    outline: 3px solid #005FCC;
    outline-offset: 3px;
}

Using :focus-visible displays the focus indicator only for keyboard navigation without affecting mouse users.

Recommended: Ensure the outline has at least a 3:1 contrast ratio against the adjacent background.

---

2. Color Contrast That Fails WCAG

Insufficient color contrast is the single most common accessibility failure, affecting 83.6% of websites according to WebAIM 2024.

WCAG requires:

• 4.5:1 minimum contrast ratio for normal text.
• 3:1 for large text.
• 3:1 for user interface components such as buttons, form controls, and icons.

❌ Avoid this

color: #AAAAAA;
background: #FFFFFF;

/* Contrast ratio: 2.32:1 */

✅ Do this

color: #595959;
background: #FFFFFF;

/* Contrast ratio: 7.0:1 */

To quickly verify contrast issues, use tools such as:

• axe DevTools
• WebAIM Contrast Checker

---

3. Using Color Alone to Convey Information

Displaying an error only in red, or indicating success only in green, violates WCAG Success Criterion 1.4.1.

Approximately 8% of men have some form of color blindness, making color-only communication unreliable.

❌ Avoid this

.error {
    border-color: red;
}

✅ Do this

.error {
    border-color: #CC0000;
    border-width: 2px;
}

.error::before {
    content: "⚠ Error: ";
    font-weight: bold;
}

Always pair color with another visual cue, such as:

• An icon
• Descriptive text
• A thicker border
• A different pattern or style

Color should reinforce information—not be the only method of conveying it.

---

4. Using Fixed px Font Sizes Instead of rem

WCAG 1.4.4 Resize Text requires users to resize text up to 200% without losing content or functionality.

Using fixed pixel units prevents this.

❌ Avoid this

body {
    font-size: 14px;
}

h1 {
    font-size: 24px;
}

p {
    font-size: 16px;
}

✅ Do this

html {
    font-size: 100%;
}

body {
    font-size: 1rem;
}

h1 {
    font-size: 1.5rem;
}

p {
    font-size: 1rem;
}

Because rem units are based on the browser’s root font size, users who increase their preferred font size automatically receive appropriately scaled typography.

---

5. Ignoring prefers-reduced-motion

Animations, hover effects, transitions, and parallax scrolling can trigger dizziness, nausea, or seizures for users with vestibular disorders or photosensitive epilepsy.

Fortunately, one media query solves the issue.

❌ Ignoring user preference

.card {
    transition: transform .4s ease;
}

.card:hover {
    transform: scale(1.05);
}

✅ Respecting prefers-reduced-motion

.card {
    transition: transform .4s ease;
}

.card:hover {
    transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {

    .card {
        transition: none;
    }

    .card:hover {
        transform: none;
    }

}

Users who enable Reduce Motion in their operating system expect websites to respect that preference.

This adjustment affects only those users while leaving everyone else’s experience unchanged.

---

Quick Accessibility Checklist

Accessibility Issue	Recommended Fix
outline: none without replacement	Use :focus-visible with at least 3:1 contrast
Low color contrast	Minimum 4.5:1 for text, 3:1 for UI elements
Color used as the only indicator	Add icons, labels, or additional visual cues
Fixed px font sizes	Use rem with html { font-size: 100%; }
Animations ignoring user preferences	Implement prefers-reduced-motion

---

Build Accessible Websites Without the Manual Work

Rather than manually auditing every page, Hemam Tools helps websites comply with accessibility best practices through 30+ assistive accessibility features, activated with a single line of code—no redesign or rebuild required.

Learn more at: hemam.io

---

References

• WebAIM Million Report 2024
• W3C WCAG 2.2
• Sara Soueidan — Focus Indicators Guide