# Accessible CSS customization

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](https://webaim.org/resources/contrastchecker/) 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 */
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.didomi.io/consent-management-platform-cmp/consent-notices/accessible-css-customization.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.