# Badge text maintains high contrast against background color

- **Pattern:** `ab-001367` (`extension-ux-performance.badge-notifications.badge-contrast`)
- **Severity:** high
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-001367
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-001367)

## Why it matters

Badge text that fails WCAG 2.2 SC 1.4.11 (Non-Text Contrast, 3:1 minimum) is unreadable for users with low vision or color-blindness — the count value the badge conveys becomes invisible. The Chrome extension badge is one of the few always-visible UI elements in the browser chrome; inaccessible badge colors affect every user session, not just users navigating the popup. Chrome Web Store policy requires extensions meet accessibility standards, and this is a concrete, checkable criterion.

## Severity rationale

High because an unreadable badge permanently degrades the extension's primary ambient notification mechanism for millions of users with low-contrast sensitivity.

## Remediation

Choose badge background colors that achieve at least a 3:1 contrast ratio against the default white badge text. Verify combinations using the WebAIM contrast checker before shipping.

```js
// High-contrast options with default white text
chrome.action.setBadgeBackgroundColor({ color: '#c0392b' }); // Dark red ~5.1:1
chrome.action.setBadgeBackgroundColor({ color: '#2c3e50' }); // Dark navy ~8.9:1
chrome.action.setBadgeBackgroundColor({ color: '#1a7a1a' }); // Dark green ~5.3:1

// For yellow badges, explicitly set dark text (Chrome 110+)
chrome.action.setBadgeTextColor({ color: '#000000' });
chrome.action.setBadgeBackgroundColor({ color: '#f8c200' }); // 7.9:1 with black
```

Common failures to avoid: white text on `#ffff00` (yellow, ~1.1:1), `#00ff00` (lime, ~1.4:1), or `#cccccc` (light gray, ~1.6:1).

## Detection

- **ID:** `badge-contrast`
- **Severity:** `high`
- **What to look for:** Examine `chrome.action.setBadgeText` and `chrome.action.setBadgeBackgroundColor` calls. Check the badge text color (default is white `#ffffff`) against the background color being set. Calculate or estimate the contrast ratio between the text color and badge background. Common contrast failures: white text on yellow, white text on light green, dark text on dark background.
- **Pass criteria:** The badge text color and background color achieve at least a 3:1 contrast ratio (WCAG AA for large text and non-text elements). Using the default white text on a dark or saturated background (red `#ff0000`, blue `#0000ff`, dark green `#006600`) is generally acceptable. White text on yellow, lime, or light colors fails. At least 1 implementation must be confirmed.
- **Fail criteria:** Badge color combination results in poor contrast — the badge text would be difficult to read. Example failures: `#ffff00` (yellow) background with white text, `#00ff00` (lime) background with white text, `#cccccc` (light gray) with white text.
- **Skip (N/A) when:** The extension does not use the badge API (`chrome.action.setBadgeText` not found in codebase), or the badge background uses the browser default which is typically a high-contrast color.
- **Detail on fail:** Specify the color combination and estimated contrast ratio. Example: `"Badge background set to #ffdd00 (yellow) with default white text — estimated contrast ratio ~1.9:1, below the 3:1 minimum"` or `"setBadgeBackgroundColor('#cccccc') with default white text — contrast ratio ~1.6:1."`
- **Remediation:** Choose badge background colors that contrast well with white text:

  ```js
  // High-contrast options for white text
  chrome.action.setBadgeBackgroundColor({ color: '#c0392b' }); // Dark red
  chrome.action.setBadgeBackgroundColor({ color: '#2c3e50' }); // Dark navy
  chrome.action.setBadgeBackgroundColor({ color: '#1a7a1a' }); // Dark green

  // Or set dark text explicitly (requires Chrome 110+)
  chrome.action.setBadgeTextColor({ color: '#000000' });
  chrome.action.setBadgeBackgroundColor({ color: '#f8c200' }); // Yellow with black text
  ```

  Verify contrast using the WebAIM contrast checker or WCAG guidelines.

## External references

- wcag 1.4.11

Taxons: accessibility

HTML version: https://auditbuffet.com/patterns/ab-001367