Striped backgrounds and op-art hero images that seem to move

A fabric shop launches its summer collection. The designer wants the home page to feel graphic and modern, so the hero is drawn in bold op-art: black and white vertical stripes, each 8 pixels wide, across the full width of the page, with a white card in the middle that reads "The summer edit" and a "Shop the edit" button. Nothing moves. Look at it for a few seconds, though, and the stripes start to shimmer: the edges bend, faint colours run along them, and the whole hero seems to drift. The same failure turns up as an op-art photo or illustration of rings or checks in a hero, a checkerboard or houndstooth background copied from a pattern gallery, a dot grid set close across a section, and stripes one pixel wide that turn into uneven bands when the page is zoomed or scrolled.

No success criterion fails here, and this guide is a best practice. Success criterion 2.3.1 Three Flashes or Below Threshold counts flashes, pairs of opposing changes in brightness over time, and a still image has none, so the hero passes it whatever its contrast and size. Its Understanding document mentions patterns only to exempt fine, balanced ones that flash, such as white noise or an alternating checkerboard. The draft of WCAG 3 adds a requirement against pseudo-motion, defined as static content that gives the perception or feeling of motion, but it is still in development.

The thresholds come from television. The Epilepsy Foundation of America's expert consensus (Harding, Wilkins and others, 2005) treats a pattern as able to provoke seizures when it has clearly visible stripes, more than five light-dark pairs in any orientation. When the stripes cover more than 0.006 steradians from the closest expected viewing distance, the lightest stripe is brighter than 50 cd/m², and the pattern shows for half a second or more, it should have no more than five pairs if it changes direction, oscillates, flashes or reverses, and, if it is unchanging, "no more than eight stripes". ITU-R BT.1702-3 adds that stripes may be parallel or radial, curved or straight, or formed by rows of repeated elements such as polka dots, and in its informative annex it counts a pattern as harmful only when its light and dark bars differ in brightness as much as a harmful flash, and, for a still pattern, only when it fills more than 40% of the screen, a looser area than the quarter the consensus uses. Japan's broadcasters ask for something similar, without figures: NHK and the commercial broadcasters' guideline on animation and other techniques asks them to avoid regular patterns, such as stripes, spirals and concentric circles, that fill most of the screen.

WCAG counts a flash with the same figures in its own terms. It defines 0.006 steradians as a quarter of a 10-degree field, which W3C estimates as 341 × 256 CSS pixels, and a general flash as a change of a tenth of white's relative luminance or more. Applying those to a still pattern is this guide's reading, not a rule anyone has written for the web. By it, the hero fails on every count. Its stripes are black (relative luminance close to 0) and white (1), it holds 80 light-dark pairs at 1,280 pixels wide, and it fills far more than a quarter of the field. At arm's length a CSS pixel is about 0.0213 degrees, so each pair spans about a third of a degree: close to 3 cycles per degree, the spacing Arnold Wilkins and his colleagues found most likely to cause discomfort, illusions and seizures.

Pattern sensitivity is found in most people with photosensitive epilepsy, and matters clinically for about 30 to 50% of them; in one study, 11 of 32 photosensitive patients reacted to still patterns. Stripes at about 3 cycles per degree can also make most people see illusions of colour, shape or movement, and give people with migraine headaches. The Epilepsy Society lists images on screens with a contrasting dark and light pattern, such as black and white stripes or checks, as a possible trigger, and W3C's cognitive accessibility task force names diagonal lines in a background and optical illusions among the pseudo-motion it wants WCAG 3 to cover. A phone held close makes the hero fill even more of what someone sees.

2 of 10 groups affected

• No vision (not affected)
• Low vision (not affected)
• Colour vision (not affected)
• No hearing (not affected)
• Hard of hearing (not affected)
• No speech (not affected)
• Motor (not affected)
• Reach, strength (not affected)
• Cognitive (affected)
• Seizures (affected)

• Photosensitive seizures For people with pattern-sensitive epilepsy, a large still grating of black and white stripes at this spacing is the kind of image that provokes epileptic activity in laboratory tests, and it is on screen the moment the home page opens.
• Limited language, cognitive and learning abilities The stripes seem to shimmer and drift around the card, pulling the eye away from the heading and the button, so people who are easily distracted struggle to settle on what the page says.

The audit finds nothing here. Its flash check steps through animations and counts changes over time, and this hero never changes. axe, and Lighthouse, which runs axe's rules, have no rule for patterns, and no WCAG criterion gives them one, so the page passes. An AI asked to review the page against WCAG has no reason to raise it either. Meanwhile pattern galleries, such as Lea Verou's CSS3 Patterns Gallery, offer stripes, checkerboards, houndstooth and polka dots as backgrounds to copy, with nothing said about their size or contrast. IRIS, EA's open-source library, checks video for harmful spatial patterns as well as flashes, so a recording of the page can go through it; a person still has to look for patterns in images and count them.