Backgrounds and accessibility: contrast, readability and inclusive design

Last reviewed on 28 April 2026.

Backgrounds are an accessibility surface. Whatever sits on top of them — body copy, calls-to-action, focus rings, error messages — has to remain perceivable for users who do not see the way the designer who picked the background does. That includes users with low vision, colour-vision differences, motion sensitivity, photophobia, and users on devices with washed-out screens, sun-glare, or system-level high-contrast settings. The points below cover the constraints that come up most often when a background is in the mix.

Contrast ratios and where to measure them

The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios between text and its background:

• 4.5:1 for normal body text — Level AA.
• 3:1 for large text (at least 18pt, or 14pt bold) and for non-text elements like icons and form-control borders — Level AA.
• 7:1 for body text under Level AAA, where stricter conformance is required.

The trap with patterned and textured backgrounds is that the average colour passes but the busiest area fails. Measure against the darkest and lightest pixels in the region where text actually sits, not against a flat sample of the background. Most browser dev-tools include a contrast picker that shows the live ratio over an image; design tools such as Figma have plugins that do the same.

Busy backgrounds: when to use a text zone

If a background varies enough that some areas fail contrast, you have three good options:

1. Add a flat overlay. A semi-opaque rectangle behind the type, tinted to match the design system, brings the local contrast back into range. This is the technique most photo-driven hero sections rely on.
2. Reserve a quiet area. Many abstract and textured backgrounds can be designed with a deliberately calm region for type — for example, a gradient that flattens out in the centre, or a pattern that fades on one side.
3. Move the type. When neither overlay nor quiet zone works, the simplest answer is to place the headline in a panel beside the busy background rather than on top of it.

Backgrounds that resist all three of those moves are usually the wrong background for the layout, regardless of how appealing they look in isolation.

Colour-vision differences

Around one in twelve men and one in two hundred women have some form of colour-vision difference. This rarely affects whether a background "works" aesthetically, but it does affect whether colour-only signals carry information. A red error message on a red background is the most obvious failure. More subtle: an interactive state that relies only on a hue change against a coloured background — for example, a green "active" tab on a teal background — can disappear for a deuteranopic user.

The defensive practice is to never rely on colour alone. Pair a hue change with a shape change, an underline, an icon, or a contrast change.

Motion and animated backgrounds

Animated gradients and looping abstract patterns can be elegant and harmless — or they can trigger vestibular reactions and migraine in sensitive users. The current recommendation is to:

• Honour the prefers-reduced-motion media query. If the user's system requests reduced motion, freeze the animation or replace it with a static frame.
• Avoid full-screen parallax, fast horizontal scroll-jacking, and high-frequency flicker.
• Keep loop durations long enough that the motion reads as ambient rather than insistent — under about 0.2 Hz of perceptible change.

The animated gradient page covers practical implementations that respect reduced-motion preferences.

Focus visibility on patterned surfaces

The default browser focus ring is designed to contrast against a white page. On a dark, textured or patterned background it can disappear entirely, leaving keyboard users unable to tell which element is focused. Two reliable fixes:

• Override :focus-visible with a focus ring that has its own contrast against the background — typically a 2–3 px outline plus an offset, in a colour with at least 3:1 contrast against the busiest part of the area.
• Add a flat focus halo (a filled rounded rectangle) behind the focus ring on backgrounds where an outline alone won't carry.

Forced-colours mode

Windows High Contrast and the cross-platform forced-colors CSS media query replace authored colours with a system palette. Background images in background-image are typically removed; background-color is replaced. If the readability of your layout depends on the background colour in any way — for example, a hero where white text is only legible because of a dark background — the layout has to remain coherent when those colours are forced. Test by enabling High Contrast Black or High Contrast White on Windows, or by toggling forced-colours emulation in browser dev tools.

Dark mode and luminance

On a very bright OLED display, pure-white text on a pure-black background can produce uncomfortable halation around the type. Softening both ends of the contrast — a near-black background such as #0a0a0a with a near-white text colour around #e5e5e5 — typically reads more comfortably while still passing AA. The black backgrounds page covers this in more detail in the dark-mode context.

Common mistakes

• Designing only against placeholder text and missing the moment when the real headline lands on the busy area of a hero.
• Picking a background colour because it tests well against grey at #999 body text — the test passes for grey but fails the moment the eventual brand colour is used in body type.
• Hiding the focus ring "for cleanliness" on a darker background and breaking keyboard navigation.
• Animating a background loop at a frequency that competes with reading speed.
• Forgetting that gradient backgrounds disappear in forced-colours mode and that every layer of the composition must still make sense without them.

Run through the checklist before sign-off. Backgrounds that pass it tend to be quietly better-designed across the board, because they have been judged against constraints rather than only against taste.