“Aren’t most websites accessible nowadays?” You’d be surprised
Modern web design leans heavily on motion, bright colour palettes, layered visuals, and immersive media. These techniques are great at grabbing attention and giving a site a “wow” factor. But what looks impressive to many can be uncomfortable, even harmful, to others. People with epilepsy, vestibular disorders, low vision, colour vision deficiencies, or cognitive impairments can face real barriers when sites use fast auto-playing video, high-contrast or low-contrast colour combinations, and aggressive motion effects such as parallax scrolling. As an accessible web designer, it’s my job to assess which of these effects are worth implementing and, if I do, what measures I need to put in place to make them accessible to all audiences.
In this post, I’m going to look at three common design choices: auto-playing video, bright colour schemes, and parallax scrolling. Why they can create accessibility problems, and, most importantly, how to implement them responsibly so everyone can use your site.
1. Auto-playing video: attention-grabbing but risky (frankly overused in my opinion). Why designers use it:
- Instant engagement: video immediately catches the eye and can communicate brand personality faster than text. We’re also in a world with an increasingly shorter attention span, so this method is often used all too quickly.
- Faster storytelling: a short clip can show features, mood, or movement more effectively than a static image.
Accessibility issues
- Seizure risk: flashing, rapid contrast changes, or strobe-like effects can trigger photosensitive epilepsy.
- Cognitive load and distraction: continuous motion competes with users’ focus, interferes with screen readers, and makes reading hard.
- Performance and bandwidth: bulk videos slow page load on mobile or assistive devices, causing frustrating experiences.
How to make it accessible
- Never auto-play sound. Sound should always be user-triggered. Imagine a blind user visiting your site for the first time, only to be blasted by the latest trending hit.
- Prefer static alternatives: a high-quality poster image or short looping animation that follows safe guidelines can still deliver the same brand voice.
- Allow users to stop, pause, or hide video with clearly visible controls.
- Respect reduced-motion user preferences. This can be accomplished through coding so your site looks at the user’s browser settings. If the user requests reduced motion, skip or replace animations with static content.
- Test for flashing: ensure video conforms to guidelines such as the World Wide Web Consortium’s recommendations for reducing seizure risk (avoid large areas flashing at 3–60Hz, avoid intense contrast flashes).
- Lazy-load and offer lower-bandwidth versions for mobile.
Quick checklist
- No auto-play with sound
- Clear pause/stop/close controls
- Poster image fallback
- Reduced-motion support
- Flashing/contrast checked against seizure guidelines
2. Bright or poor colour contrast: aesthetic vs. legibility. Why designers use bold palettes:
- Brand identity: bright, distinctive colours set your product apart.
- Visual hierarchy: colour helps draw attention to calls to action and navigation.
Accessibility issues
- Low contrast between text and background makes reading difficult for people with low vision or when viewing on a bright screen outdoors.
- Certain colour combinations are indistinguishable to people with red-green colour blindness (deuteranopia/protanopia) and other forms of colour deficiency.
- Relying on colour alone to convey meaning (e.g., button changes colour when you hover over it) excludes users who can’t perceive that colour.
How to make it accessible
- Use contrast-checking tools: aim for WCAG contrast ratios. At minimum 4.5:1 for normal text and 3:1 for large text; aim for 7:1 for enhanced readability and compliance in many contexts. Here’s a great tool I use to check colour contrast - https://webaim.org/resources/contrastchecker/
- Don’t rely on colour alone: use icons, labels, patterns, or text to convey information.
- Offer a black and white theme option and ensure it meets contrast standards. This is also a great way to see if colour changes in interactions work well. If you hover over a button and it barely changes shades, it likely doesn’t work well for colour blind users.
- Test with colour-blind simulators and with real users when possible.
- Use accessible colour palettes: choose hues that retain contrast and meaning under common types of colour vision deficiency.
Quick checklist
- Body text >= 4.5:1 contrast ratio
- Large text >= 3:1 contrast ratio
- UI states (hover, focus, pressed, etc) are not dependent on colour alone
- Theme variations tested for contrast
- Colour-blind simulation check passed
3. Parallax and motion effects: depth vs. disorientation. Why designers use parallax:
- Depth and storytelling: layered motion suggests depth and makes scrolling feel engaging. If you’ve not heard of a parallax effect before, here’s an example - https://parallax-architecture.webflow.io/
- Visual interest: subtle movement draws the eye and adds polish.
Accessibility issues
- Vestibular problems: motion that simulates movement or shifting layers can trigger vertigo, motion sickness, or nausea.
- Focus and readability: moving backgrounds may distract from or obscure foreground text.
- Keyboard and assistive tech issues: complex motion tied to scroll position can interfere with keyboard navigation and screen reader flow.
How to make it accessible
- Use subtle, limited parallax only where it adds real value. This is another example of a design choice that I feel is overused - yes, it’s cool looking, but does it add value?
- Respect reduced-motion preferences: if a user prefers reduced motion, disable parallax and replace it with static images or a simpler transition. (Similar to the video example, this is a coding solution.)
- Provide a control to pause or disable motion effects in the UI when reasonable (an accessibility menu or settings panel).
- Keep foreground content on its own layer and avoid overlapping moving text.
- Test with keyboard-only navigation and screen readers to ensure motion doesn’t break flow.
Quick checklist
- Parallax respects “prefers-reduced-motion” (a user browser setting that can be read through coding)
- Foreground text remains static and readable
- Option to disable motion is available
- Keyboard and screen reader behaviour tested
General best practices for inclusive design
- Build with functionality in mind first, make content accessible, then look to enhance visually for capable devices.
- Research how assistive technology, like screen readers, uses your site and make appropriate tweaks to help users who have them.
- If possible, test with real users. This will really help gain insight into how users interact with your site and if they encounter issues. Automated checkers are also available, like Lighthouse and WAVE. For best practice, combine manual testing, user testing with people with disabilities, and automated tools.
- Offer settings for personalisation: text size controls, high-contrast mode, reduced motion toggle, and easy-to-find accessibility help.
- Prioritise performance: faster pages are more usable for everyone, especially people on limited connections or older devices. I use this tool to check website speed - https://pagespeed.web.dev/
Practical implementation examples
- Video hero: use a poster image, show a “play” button that starts the video in a modal with controls, and hide the video if the user prefers reduced motion.
- Bright CTA buttons: choose colours with sufficient contrast against the background, add icons or labels, and ensure focus styles are clear for keyboard users.
- Parallax section: instead of full-page moving layers, animate only small decorative elements and always provide a static fallback.
Resources and tools
- WCAG 2.1 guidelines for contrast, motion, and more - https://www.w3.org/WAI/standards-guidelines/wcag/
- Contrast checkers: WebAIM Contrast Checker, Contrast Ratio - My go-to, https://webaim.org/resources/contrastchecker/
- Colour-blind simulators: Coblis, Chrome DevTools emulation (Webflow offers this as an inbuilt tool) - https://www.color-blindness.com/coblis-color-blindness-simulator/
- Accessibility testing tools: axe, WAVE, Lighthouse - https://chromewebstore.google.com/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd
Conclusion
The techniques that make websites feel modern and engaging, like auto-playing video, vivid colour schemes, and layered motion effects, can also exclude and harm users if used without care. The good news is these features are not inherently inaccessible. With thoughtful implementation, fallbacks, and respect for user preferences, you can keep visual impact while ensuring everyone can access your content.
Would you like a consultation to see if your site is accessible and what improvements you can make? Book a call with me here - https://calendly.com/hello-ryandeandesigns/30min