color-contrastlisted

# 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.** 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 | --- ## Critical: Text Contrast (WCAG 1.4.3) Normal text and images of text must meet these minimums: | Text type | Minimum (AA) | Enhanced (AAA) | | --- | :---: | :---: | | Normal text (below 18pt / 14pt bold) | **4.5:1** | 7:1 | | Large text (18pt+ or 14pt+ bold) | **3