Accessible CSS Customization: Common Pitfalls and How to Fix Them

Didomi is not an accessibility expert and cannot provide specific accessibility advice. The non-exhaustive information on this page is for general awareness only and is intended to help you identify common issues and get started. For a reliable evaluation and remediation of accessibility concerns, please consult a qualified accessibility partner.

🎨 1. Color Contrast

❌ Poor Contrast Example

/* Low contrast between text and background */
.notice-text {
  color: #999;           /* Light grey */
  background-color: #fff; /* White */
}

Why it’s a problem: The contrast ratio is too low for normal text (less than 4.5:1), making it hard to read for many users.

✅ Accessible Alternative

/* High contrast pairing */
.notice-text {
  color: #1a1a1a;           /* Near-black */
  background-color: #ffffff; /* White */
}

Tip: Use a contrast checker to test before applying.

⌨️ 2. Focus Styles

❌ Bad: Focus Indicator Removed

button:focus {
  outline: none;
}

Why it’s a problem: Removes the visual cue for users navigating with a keyboard.

✅ Good: Custom Focus Indicator

button:focus {
  outline: 2px solid #0077cc;
  outline-offset: 2px;
  border-radius: 4px;
}

Optional: Use brand colors, but make sure the focus ring is always visible.

🧭 3. Button Styling

❌ Non-semantic Element

<div class="btn">Accept</div>

.btn {
  background-color: #0077cc;
  color: white;
  padding: 10px;
  cursor: pointer;
}

Why it’s a problem: <div> isn’t a semantic button—screen readers and keyboard users can’t activate it by default.

✅ Accessible Alternative

<button class="btn">Accept</button>

Or if a custom element is required:

<div class="btn" role="button" tabindex="0" aria-label="Accept">
  Accept
</div>

.btn:focus {
  outline: 2px dashed #0077cc;
}

🧪 4. Avoid Content That Is Only Visible on Hover

❌ Tooltip on Hover Only

.tooltip-text {
  display: none;
}

.tooltip:hover .tooltip-text {
  display: block;
}

Why it’s a problem: Touchscreen users or keyboard users can’t hover.

✅ Accessible Tooltip (visible on focus too)

.tooltip-text {
  display: none;
}

.tooltip:hover .tooltip-text,
.tooltip:focus-within .tooltip-text {
  display: block;
}

📱 5. Responsive Text

❌ Fixed Text Size

.notice-text {
  font-size: 12px;
}

✅ Scalable Text

.notice-text {
  font-size: 1rem; /* Scales with user preferences */
}