Decorative vs Informative SVG
Background patterns are decorative — they carry no information. For CSS background-image SVG patterns, no ARIA attributes are needed because the browser doesn't expose CSS background images to the accessibility tree. The pattern is invisible to screen readers by design. This is correct behaviour.
Contrast Ratio Requirements
WCAG 2.2 Success Criterion 1.4.3 requires a 4.5:1 contrast ratio between text and its background. When text overlays a pattern, you must ensure sufficient contrast at every point in the pattern tile. Measure contrast at both the lightest and darkest region of the tile. If the pattern has too much variation, add a semi-transparent overlay between the pattern and the text.
The Text Overlay Problem
Patterns with high local contrast (e.g., alternating black and white elements) are particularly problematic for overlaid text. A white text on a black stripe reads fine, but the same white text on an adjacent white stripe is invisible. Solutions: (1) reduce pattern contrast, (2) add a translucent backdrop to text containers, (3) avoid placing text directly on high-contrast patterns.
/* Add backdrop to ensure text readability over any pattern */
.pattern-text {
background-color: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(4px);
padding: 0.5rem 1rem;
border-radius: 6px;
}Non-Text Contrast (SC 1.4.11)
WCAG 2.2 SC 1.4.11 requires a 3:1 contrast ratio for UI components and graphical objects. If a pattern is used as a button background or form field border, the pattern's foreground colour must have 3:1 contrast against the page background. This rarely affects purely decorative patterns but is critical for patterned interactive elements.
Prefers-Reduced-Motion
WCAG 2.2 SC 2.3.3 (AAA) recommends allowing users to disable non-essential animation. The prefers-reduced-motion: reduce media query reflects the user's OS "reduce motion" setting. All animated patterns must be completely static when this preference is active. Test by enabling "Reduce Motion" in your OS accessibility settings.
Prefers-Contrast
The prefers-contrast: more media query detects users who have requested increased contrast (e.g., Windows High Contrast Mode, macOS Increase Contrast). When active, replace subtle tonal patterns with higher-contrast versions, or remove them entirely and show a solid background colour. This dramatically improves readability for users with low vision.
Focus Indicators Over Patterns
When interactive elements (links, buttons, form fields) appear over patterned backgrounds, their CSS focus outline must remain visible against the pattern at all points. The WCAG 2.2 Focus Appearance criterion requires a focus indicator with a 3:1 contrast against both the focused component and the adjacent background. Use a double-ring outline (white ring + coloured ring) for maximum visibility over any background.