Skip to main content

Visual design

Some visual designs can injure or hinder users. Over 500 children were hospitalized after a Pokémon cartoon that aired in Japan gave them seizures. Know the triggers for several disorders and the guidelines on how to avoid harmful content.

Level 1

Eliminate flashing triggers

    Avoid flashing content

  • What to do

    What is flashing content? It falls into two categories, general flashes and red flashes.

    • A general flash is a pair of opposing changes of contrasting brightness. An extreme example is white to black and back to white.
    • A red flash is any pair of opposing changes that involve saturated red. These can be dangerous for triggering a seizure.

    Small objects like cursors, icons, or small blocks of blinking information will not cause issues. The content flashing needs to exceed a certain size, frequency, and luminance to be problematic.

    • Luminance > or = 20 candela per square meter (cd/m2)
    • Frequency > or = 3 flashes per second (3Hz)
    • Size occupies approximately 10% of the central visual field or 25% of screen area at typical viewing distances

    As a designer you have to decide if flashing content is really necessary. The first and best option is don’t include problematic content flashing between dark and light colors, especially when one color is a saturated red.

    still image of police car lights and policeman shinning bright flashlight

    Don't use content flashing faster than three times per second at a size that exceeds guidelines. This police car video would fail.

    Resources
    Requirements
  • Slow the frequency of flashes to under three times in any one-second period

  • What to do

    If you deem flashing content necessary, then make sure it flashes less than three times per second. When frequency of flashing is too high, it can trigger a seizure. Research has shown that content that flashes less than three times per second is not problematic.

    Play

    In this example, the background changes between highly contrasting colors less than 3 times per second.

    Resources
    Requirements
  • Reduce the size of the flashing content below the general flash and red flash thresholds

  • What to do

    If you deem flashing content necessary, the region must be small enough to avoid a negative response. Determine the safe size in one of two ways:

    • Easy size (for a desktop screen): Make sure the size is smaller than 341 x 256 pixels.
    • Calculated size: use formulas to calculate the safe size. The area should not occupy more than approximately 10% of the central visual field or 25% of screen area at typical viewing distance. See the Resources section below.

    Pro tip: If there’s more than one flashing area on the screen at the same time, add up their sizes to be sure the size threshold isn’t exceeded.

    Play

    In this example, the flashing content is smaller than 341 x 256 px.

    Resources
    Requirements

Level 2

Video and animations do not auto-play or can be stopped or hidden

Level 3

Use motion effects cautiously

    Avoid using unnecessary motion effects

  • What to do

    People with vestibular (inner ear) disorders can experience debilitating reactions from motion on a computer screen. A known trigger occurs if motion effects (beyond simple text scrolling) happen when a user scrolls up or down a page. A parallax effect, where the background moves at a different rate than the foreground, is one example. Although motion effects are not prohibited by WCAG, we recommend avoiding any that are known triggers. This includes the use of autoplaying looped videos containing panning camera movement.

    Resources
  • Reduce use and scope of interaction-triggered motion effects

  • What to do

    Like flashing content, motion effects are more likely to affect users if the effects are more pronounced or widespread. Limit the portion of the screen affected, reduce the luminosity, and reduce the frequency of motion effects. This will decrease the likelihood of triggering seizures or dizziness for those with vestibular (inner ear) disorders. Note that this guidance concerns motion effects that are triggered by user action. The primary concern is mouse movement which causes screen motion beyond the normal movement of the cursor or the normal scrolling of content.

    Resources
  • Allow users to control motion

  • What to do

    People with vestibular (inner ear) disorders can experience debilitating reactions from motion on a computer screen. Most browsers now allow a website to detect system-level user preferences for reduced motion. Limit the risks of seizures or dizziness from motion effects by designing an experience that works with and without animation. Flagging responsive motion in wireframes can let developers incorporate reduce-motion features available in browsers and operating systems.

    Where technological considerations prevent you from implementing an experience based on user motion preferences, give users context as well as a way to turn off, hide, or reduce motion. First, if content contains motion, consider telling the user before they reach the motion, either as part of the link leading to the content or earlier in the content. Second, provide a control to turn off, hide or reduce motion.

    Resources
    Related toolkit topics
    Implement motion media queries to reduce user risk, Coding interactions - Dynamic content