WCAG 2.3.1 Flash Test: How to Test Websites for Seizure Hazards

Under the Web Content Accessibility Guidelines (WCAG) 2.2 Success Criterion 2.3.1 (Three Flashes or Below Threshold), websites must not contain visual flickers or video content that could trigger photosensitive seizures.

Because web content is dynamic and interactive, testing it requires recording user interactions directly. This guide explains how to capture screen recordings of suspect animations and test them against WCAG 2.3.1 using the free Video Audit scanner.

Figure 2: Common interactive triggers that bypass traditional static video safety checks.

#Why Web Content Needs Testing

Video files remain static after export, but web applications re-render continuously based on user input and API responses. Elements that frequently cause WCAG 2.3.1 violations include:

#Spotting Flashing Hazards

Check for abrupt brightness swings across broad screen areas. A small blinking text cursor will not trigger a violation. However, an element alternating between light and dark values (10% or greater relative luminance shift) fails if it covers more than 25% of any $341 \times 256$ CSS pixel subarea within a one-second window.

Because these animations depend on client-side rendering, you must record the screen during execution to test them accurately.

#Desktop Compared to Mobile Layouts

Responsive design alters component sizes relative to the viewport:

• Mobile viewports: Elements stack vertically. An ad banner that occupies a modest corner on desktop can fill over half the screen on mobile, crossing the 25% visual area threshold.
• Desktop viewports: Full-width background videos and modal overlays cover much wider total pixel areas.

Record the specific screen layout where the component occupies the greatest percentage of the viewport.

#Common Web Violation Examples

#Example 1: Animated GIF Ad Banner

• Trigger: A promotional banner loops with abrupt cuts between pure white and dark backgrounds.
• Failure: Alternating between high-contrast frames more than three times per second across a large banner violates WCAG 2.3.1.
• Fix: Extend frame display durations so the loop alternates fewer than three times per second, or insert a subtle cross-dissolve.

#Example 2: Dashboard Notification Badge

• Trigger: An alert badge blinks rapidly between white and deep red to draw attention.
• Failure: Blinking faster than three cycles per second across a prominent badge creates rapid luminance and saturated red transitions.
• Fix: Reduce the animation cycle to less than three pulses per second, or shift from a strobe to a continuous glow.

#Example 3: Hero Background Video

• Trigger: An autoplay hero video cuts rapidly between bright outdoor scenes and dark indoor shots, or uses simulated flash photography.
• Failure: When background video spans the full viewport width, rapid brightness cuts covering more than 25% of the visual field fail the test.

#Example 4: Motion Preference Handling

• Trigger: Autoplay background loops run continuously on page load regardless of user system preferences.
• Failure: Rapid visual transitions run for users who have requested reduced motion in their operating system settings.
• Fix: Check CSS @media (prefers-reduced-motion: reduce) and automatically replace flashing video with a static poster frame.

#Step 1: Record the Website Content

To test a web page, record a screen capture of the relevant animations or user interactions.

Capture guidelines:

1. Select the capture area: You can record a specific element or the entire browser window. Because the WCAG threshold evaluates a 10-degree visual cone (mapped to a $341 \times 256$ pixel subarea at standard viewing distance), recording the entire browser window yields the most realistic results.
2. Maintain standard frame rates: Set screen recording software to at least 30 fps. Low capture rates (such as 15 fps) can skip brief flashes, producing false passes.
3. Keep compression light: Heavy video compression creates compression artifacts that soften sharp transitions, skewing luminance calculations.
4. Capture full interaction cycles:
   • Auto-play media and GIFs: Let the animation run for 5 to 10 seconds to record several full loop repetitions.
   • Pulsing notifications: Record while the badge is actively blinking.
   • Motion controls: Record behavior both with and without prefers-reduced-motion enabled.

#Step 2: Upload and Analyze the Video

Open the free Video Audit scanner after saving your recording.

1. Select your file: Drag the video file into the upload dropzone.
2. Choose WCAG 2.2: Verify the selected profile is set to WCAG (checking Success Criterion 2.3.1).
3. Start analysis: Click Analyze Video. The engine decodes frames locally in your browser memory, calculating relative luminance shifts across time.

#Step 3: Interpret Web Violations

When the analyzer detects a violation, review the results panel to locate the offending component on your page.

Figure 3: Using Flash Zone overlays to isolate the flashing UI element.

#1. Check Failing Timecodes

Review the timeline chart warnings. The report distinguishes between Luminance Flashes (overall brightness shifts exceeding 10%) and Saturated Red Flashes (transitions into saturated red states).

#2. Locate the Component with Flash Zones

The video preview displays bounding boxes directly over the failing region. Align these coordinates with your recorded browser layout to see which banner, badge, or GIF triggered the alert.

#3. Check Spatial Area Measurements

Check the spatial cluster size in the event log. If a flashing element covers more than 25% of any $341 \times 256$ CSS pixel subarea, the page fails WCAG 2.3.1 Level A compliance.

#How to Fix Website Violations

Resolving a violation does not require removing animation entirely. Standard adjustments include:

• Lower the contrast swing: Prevent elements from snapping between stark dark and light shades. Soften the color contrast or add a short transition curve to eliminate harsh flash edges.
• Slow the animation cycle: Keep progress spinners, pulsing indicators, and skeleton loaders slow and continuous.
• Provide user controls: Include pause buttons on auto-playing carousels, background headers, and looping GIFs.
• Support reduced motion: Use prefers-reduced-motion queries to replace high-movement headers with still images.

#Continuous Accessibility Testing

Testing individual screen recordings catches issues during redesigns and QA audits. For production web applications with regular deployments, integrate video recordings into automated end-to-end test pipelines to verify visual safety before merging changes.

#Frequently Asked Questions