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.
High because an unreadable badge permanently degrades the extension's primary ambient notification mechanism for millions of users with low-contrast sensitivity.
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.
// 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).
ID: extension-ux-performance.badge-notifications.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:
// 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.