Backgrounds

images / colors / patterns

WCAG requirements for text on backgrounds

Contrast is the rule that matters most

Decorative patterns and images are allowed as backgrounds, but the text placed on top must meet WCAG contrast requirements everywhere the text appears, including over the darkest and lightest parts of the pattern.

  • Normal text: 4.5:1 minimum contrast
  • Large text: 3:1 minimum contrast (24px regular or 18.66px bold)
  • Important: patterns are not ignored during contrast checks. Contrast must hold against the background as rendered, including the pattern, image, and any blend behavior.

High-contrast and forced colors

In increased-contrast modes, decorative patterns should be removed to reduce visual noise and ensure text remains clear. The current background CSS already includes fallbacks for prefers-contrast and forced-colors.

Common accessibility failures

Local contrast failure

Text might look readable overall, but individual letters can cross darker pattern areas where the contrast drops below the minimum. This is the most common failure with line patterns and map-style pattern surfaces.

  • Thin fonts over busy backgrounds
  • Patterns with uneven density
  • Dark pattern intersections under text

Body copy over patterned images

Long paragraphs are more likely to fail because they cover more of the background and expose more worst-case pixels. Headers are safer; body text should usually sit on a solid or calmer surface layer.

  • Prefer patterns behind headings only
  • Use a solid surface behind paragraphs when needed
  • Keep pattern contrast low and spacing consistent

Pattern usage guidance

Safe defaults

  • Keep patterns subtle: low opacity, thin lines, and consistent spacing
  • Never match pattern color to text color
  • Avoid high-frequency noise behind paragraphs
  • Test the worst case: darkest part of the pattern under the thinnest letter strokes
  • Honor user preferences: remove decorative patterns in increased contrast or forced colors

When patterns are appropriate

Recommended

  • Hero and banner blocks with short text
  • Section headers
  • Decorative panels with minimal copy
  • Non-critical supporting areas

Avoid

  • Long paragraphs on patterned imagery
  • Small text sizes over patterns
  • Forms and inputs on busy backgrounds
  • Any background that creates uneven contrast

How to validate (practical testing)

  • Confirm text size category so you test against 4.5:1 or 3:1 correctly.
  • Check contrast against the darkest pattern pixels and any intersections.
  • Zoom to 200% and verify the pattern still does not interfere with readability.
  • Enable increased contrast and forced colors and confirm patterns are removed.

Small class reference

Class What it does Use for
surface--light-grey-lines Applies the diagonal light line pattern surface Light decorative panels, headers, and low-noise content areas
surface--map Applies the topo/map background with blend styling Decorative content areas and branded section backgrounds
card Adds the content surface container Readable text blocks on top of a background treatment
radius-md Adds the standard corner radius Most background panels and boxed content areas
in-sm / in-md Adds inner spacing Keeping text off the background edges

Live examples

These examples demonstrate the actual decorative background surface classes currently available in css/components/wg-backgrounds.css. They are acceptable only when text contrast requirements are met over the darkest parts of the pattern, and when patterns are removed in high-contrast environments.

Graduate Education

The Master of Education Degree (M.Ed.) at Utah Valley University is an applied master’s program aimed at building the instructional skills and professional competency of educators, practitioners, and behavior analysts.

Graduate Education

The Master of Education Degree (M.Ed.) at Utah Valley University is an applied master’s program aimed at building the instructional skills and professional competency of educators, practitioners, and behavior analysts.

Background accessibility checklist

  • Text contrast meets 4.5:1 for normal text and 3:1 for large text.
  • Contrast holds against the darkest pattern pixels, not just the base background color.
  • Patterns are subtle and do not create uneven hot spots behind text.
  • Body copy is placed on a calmer or solid surface when backgrounds are complex.
  • prefers-contrast: more disables decorative backgrounds.
  • forced-colors: active uses system colors and removes images or patterns.
  • At 200% zoom, readability remains strong and the pattern does not interfere.
:root{
  /* Diagonal line tokens */
  --diag-angle: 135deg;
  --diag-line-width: 3px;
  --diag-gap: 4px;
  --diag-line-color: rgba(0,0,0,0.05);
  --diag-bg-color: #f5f5f5;
}

.surface--light-grey-lines{
  background-color: var(--diag-bg-color);
  background-image: repeating-linear-gradient(
    var(--diag-angle),
    var(--diag-line-color) 0,
    var(--diag-line-color) var(--diag-line-width),
    transparent var(--diag-line-width),
    transparent calc(var(--diag-line-width) + var(--diag-gap))
  );
}

.surface--map{
  background: url("https://assets.codepen.io/8724730/bg-map-typographical.png") rgba(238, 241, 240, 1);
  background-blend-mode: multiply;
}

/* Accessibility safety: remove decorative pattern in high-contrast environments */
@media (prefers-contrast: more){
  .surface--light-grey-lines{
    background-image: none;
  }
}

@media (forced-colors: active){
  .surface--light-grey-lines{
    background-image: none;
    background: Canvas;
  }
}
Dark Mode - needs work

It seems that you have reduce motion enabled!