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 pattern/image + blend).

High-contrast and forced colors

In increased-contrast modes, decorative patterns should be removed to reduce visual noise and ensure text remains clear. Use prefers-contrast and forced-colors fallbacks to disable patterns/images.


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 topo/contour patterns.

  • 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 surface layer.

  • Prefer patterns behind headings only
  • Use a solid surface behind paragraphs
  • Keep pattern opacity very low

Pattern usage guidance

Safe defaults

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

When patterns are appropriate

Recommended

  • Hero/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 (normal vs large) to choose 4.5:1 or 3:1.
  • Check contrast against the darkest pattern pixels and any intersections.
  • Zoom to 200% and verify the pattern still doesn’t interfere with readability.
  • Enable increased contrast / forced colors and confirm patterns are removed.

Live examples

These examples demonstrate decorative pattern backgrounds. They are acceptable only when the 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 solid surface when backgrounds are complex.
  • prefers-contrast: more disables decorative backgrounds.
  • forced-colors: active uses system colors and removes images/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!