color-contrast

# Color Contrast Accessibility Skill > **Canonical source**: `examples/COLOR_CONTRAST_ACCESSIBILITY_BEST_PRACTICES.md` in `mgifford/ACCESSIBILITY.md` > This skill is derived from that file. When in doubt, the example is authoritative. Apply these rules whenever implementing or reviewing colour choices in HTML, CSS, SVG, or any visual interface element. --- ## Core Mandate Sufficient contrast between foreground and background colors is a prerequisite for users to read text, identify UI components, perceive graphical content, and track keyboard focus. **Color alone must never be the sole means of conveying information.** Contrast depends on the colors actually adjacent after opacity, gradients, images, overlays, states, and themes are applied — a passing palette is not proof the finished interface passes. All visual interface elements that convey information or require user interaction must meet WCAG 2.2 Level AA contrast thresholds in **light mode, dark mode, and forced-colors (high contrast) mode**. --- ## Severity Scale (this skill) | Level | Meaning | | --- | --- | | **Critical** | Contrast failure makes content or interaction completely inaccessible | | **Serious** | Contrast failure significantly impairs access for a disability group | | **Moderate** | Contrast issue degrades usability but content remains partially accessible | | **Minor** | Best-practice gap; marginal impact | Prioritize by user impact when time is limited: (1) text/controls required to complet...