Loading...
Loading content...
Loading content...
No content should flash more than 3 times per second.
Why it matters: Flashing content can trigger seizures in users with photosensitive epilepsy.
Web pages do not contain anything that flashes more than three times in any one second period, or the flash is below the general flash and red flash thresholds.
What This Means: This success criterion requires that web pages must not contain content that flashes more than 3 times in any one-second period, unless the flash is below the general flash threshold (a relative luminance change of less than 10%) or the red flash threshold (for red flashing content). This prevents content that could trigger photosensitive epileptic seizures.
Why It's Important: Flashing content, especially at certain frequencies, can trigger seizures in users with photosensitive epilepsy. This is a serious health and safety issue. By limiting flashing to 3 times per second or ensuring flashes are below the threshold, we protect users from potential harm.
Avoid animations or content that flashes more than 3 times per second. If flashing is necessary, ensure the relative luminance change is less than 10% (general flash threshold) or below the red flash threshold for red content. Test animations and video content for flashing patterns. Use tools like PEAT (Photosensitive Epilepsy Analysis Tool) to verify compliance. Consider using static content or slower animations instead of fast flashing.
This criterion ensures that users with epilepsy can access and understand the content, improving their overall experience and ability to use the website effectively.
Impact: When this criterion is properly implemented, it removes barriers for these user groups and creates a more inclusive web experience for everyone.
An animation flashes 5 times per second, exceeding the 3-flash limit.
<div style="animation: flash 0.2s infinite;">Flashing content</div>Content flashes at most 3 times per second or is static.
<div style="animation: flash 0.4s infinite;">Safe content</div>This success criterion benefits the following user groups:
Tip: Use this checklist during development and testing to ensure all requirements for 2.3.1 Three Flashes or Below Threshold are met. Check off items as you complete them.
To meet this success criterion, ensure the following requirements are met:
While meeting the minimum requirements ensures compliance, consider these enhancements for a better user experience:
If the flash is small, it's okay to flash quickly.
Size matters, but the 3-flash-per-second limit applies regardless. Small flashes can still trigger seizures if they exceed the threshold.
Only bright flashes are dangerous.
Even dim flashes can be dangerous if they exceed 3 per second. The threshold considers both brightness and area.
Animations that flash more than 3 times per second.
Slow down animations to flash at most 3 times per second. Use smooth transitions instead of abrupt flashes.
Video content with rapid flashing sequences.
Review video content for flashing. Edit or replace sequences that flash more than 3 times per second.
CSS animations with fast flash effects.
Adjust animation timing to ensure flashes occur at most 3 times per second. Use opacity transitions instead of on/off flashes.
Note: These are official W3C resources for 2.3.1. For the most up-to-date information and detailed technical guidance, always refer to the official W3C documentation.
Implementing 2.3.1 Three Flashes or Below Threshold correctly requires understanding your specific context. Code solutions vary significantly based on multiple factors:
HTML, React, Vue, Angular, PHP, Python, and other frameworks each have different patterns and best practices.
Server-side rendering, client-side rendering, static generation, and hybrid approaches require different solutions.
Your existing components, styling approach, and UI library influence how accessibility must be implemented.
Your specific user base, content type, and interaction patterns determine the most appropriate implementation.
We provide tailored implementation guidance by analyzing your specific technology stack, coding patterns, design system, and project requirements. Our team reviews your codebase and provides custom solutions that integrate seamlessly with your existing architecture.
Get Custom Implementation HelpPart of
Operable PrincipleGuideline
2.3 Seizures and Physical Reactions