Badge text maintains high contrast against background color

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.

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).