Blog · Accessibility

Animations and dyslexia: why moving text makes reading harder

9 min read · August 24, 2026

Open almost any modern website and within three seconds something moves — a headline fades in, a banner slides across, a carousel ticks forward. For most readers these effects register as background noise. For many dyslexic readers they are a genuine obstacle: the moment something on the page moves, it captures attention, disrupts fixation, and breaks the fragile concentration that careful reading demands.

This is not a minor inconvenience. If you have dyslexia and find yourself rereading the same sentence four times before a paragraph finally sticks, and if the page you're reading is decorated with scroll-triggered animations, the two problems are almost certainly connected. The good news is that browsers and operating systems now offer real controls for this — and most websites that care about accessibility already respect them.

Why motion is especially disruptive for dyslexic readers

Reading is already an effortful task for many people with dyslexia. The brain is simultaneously decoding letter shapes, assembling them into words, holding the beginning of a sentence in working memory while reading the end, and suppressing the impulse to re-fixate on words that didn't parse cleanly on the first pass. That's a lot happening in parallel — and it leaves very little spare attention to handle peripheral stimulation.

Motion breaks this for two reasons.

First, the visual system is wired to prioritise movement. Peripheral motion triggers an involuntary orienting response — your eye is drawn to whatever moved before you consciously decide to look at it. This is an ancient survival mechanism, not a bug, but in a reading context it means that a slide-in banner in the top corner of the page will pull your gaze off the text, reset your position on the line, and force you to locate your place again. For readers who already struggle with losing their place on the page, this happens constantly and compounds quickly.

Second, motion imposes an extra cognitive load that competes with reading comprehension. Research into reading and attention consistently shows that when the visual field contains competing stimuli — moving elements alongside static text — cognitive resources are divided between tracking the motion and processing the words. Reading comprehension drops, and reading fatigue sets in faster.

There's also a subset of dyslexic readers who experience visual stress — a sensitivity to certain visual patterns that causes discomfort, strain, and sometimes headaches. For this group, animated text or fast-moving elements can trigger symptoms that make continued reading impossible. Auto-playing carousels, parallax scroll effects, and text that slides or bounces on load are particularly problematic.

The types of animations that cause the most trouble

Not all motion is equally disruptive. It's worth being specific about which categories of animation are most likely to derail a dyslexic reading session.

Scroll-triggered fade-ins and slide-ins are the most common and among the most damaging. As you scroll down an article, paragraphs or images animate into view from the sides or below. The problem: your eye is tracking from the end of one line to the beginning of the next, and the peripheral appearance of a new element sliding in from the left catches the orienting response right at the most fragile moment of a line return.

Auto-playing carousels and sliders tick forward on a timer with no user interaction required. The periodic motion happens unpredictably from the reader's perspective, making it impossible to habituate to it. Every tick is a fresh interruption.

Sticky headers that animate on scroll — shrinking, changing background colour, or adding a drop shadow as you scroll past a threshold — create motion in the exact area where your eye returns at the start of each line. This is particularly bad for reading long articles.

Animated typography — text that types itself out character by character, words that flip or rotate, headlines with a glitch effect — is directly disruptive because the text itself is the focus of your attention. You can't ignore it the way you can ignore a sidebar animation.

Hover effects on links and buttons are generally low-impact unless they affect layout (causing text to reflow) or are very large. A colour shift on hover is fine; a link that grows or shifts position on hover can push surrounding text around.

prefers-reduced-motion: the standard that actually works

Since 2017, browsers have supported a CSS media query called prefers-reduced-motion. When a user enables "reduce motion" in their operating system settings, this query fires — and well-coded websites respond by disabling or toning down their animations. Many major sites and web applications now respect it: Apple, Google, Microsoft, GitHub, and most design-system-based products all include reduced-motion overrides in their stylesheets.

The result, when it works, is dramatic. A page that normally bounces and slides into view instead simply appears. Carousels pause. Scroll animations are replaced by instant reveals. The reading experience becomes genuinely quieter.

The limitation is that not every website implements it. Marketing pages, landing pages, and brand sites that have invested heavily in motion design often skip the reduced-motion override entirely. For those, you'll need a browser-level solution (see below).

How to enable reduced motion on your device

The setting lives in your operating system, not in the browser itself. Once enabled, all browsers that implement the standard — Chrome, Firefox, Safari, Edge — will forward the preference to any website that checks for it.

After enabling the setting, reload any animation-heavy page and watch for the difference. Sites that respect the preference will be noticeably calmer. If a site still animates aggressively, it hasn't implemented the reduced-motion override — and you'll want a browser extension.

Browser-level solutions for sites that ignore the preference

When a website doesn't respond to the OS-level setting, a few approaches at the browser level can help.

Chrome flag: force-prefers-reduced-motion. Chrome has a hidden flag that forces the reduced-motion signal regardless of what any site's CSS says. Open a new tab, type chrome://flags in the address bar, search for "prefers-reduced-motion", and set it to "Enabled". This tells Chrome to forcibly disable CSS animations sitewide. It's blunt — it can occasionally break animated UI elements (like loading spinners) that are purely functional — but for reading-heavy sites it's very effective.

Reader mode. Chrome's built-in reader mode (accessible via the page-actions icon at the right end of the address bar on eligible articles) strips the page down to its text and images, removing nearly all animations in the process. It's not available on every page, and it strips design context that is sometimes useful, but for long articles it's worth trying. Our full write-up on reader mode vs reading extensions for dyslexia covers when it helps and when a dedicated extension does better.

Custom CSS extensions. A user-stylesheet extension (such as Stylus) lets you write a rule that globally targets all sites: *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }. This is the same technique that reduced-motion CSS uses, applied at the browser level. It's effective and flexible, though it requires a few minutes of setup.

How font choice relates to motion sensitivity

There's a less obvious connection between typography and the perceived intensity of motion on a page. Pages set in condensed, high-contrast, or heavily decorative fonts are already making the visual system work harder to decode text. When motion is also present, the combined load is higher than either factor alone would suggest — a well-known principle in cognitive load research.

Switching to a dyslexia-optimised font — one with generous letter spacing, distinctive letterforms, and moderate weight — reduces the baseline decoding effort. This doesn't eliminate the problem of animations, but it does lower the floor: there's more cognitive headroom available before motion tips the balance into genuine disruption. Readers who combine font overrides with reduced motion settings consistently report less fatigue than those who use either intervention alone.

LexiFont lets you apply fonts like Lexend, Atkinson Hyperlegible, or OpenDyslexic to every website in Chrome with a single click. Combined with the reduced-motion settings above, it creates a substantially quieter reading environment across the whole browser — not just on sites that have made dyslexia-friendly design choices themselves.

The relationship between typography and contrast sensitivity and background colour follows the same logic: each variable compounds the others, and addressing them together gives more relief than tackling any one in isolation.

What to do on specific site types

Different kinds of pages warrant slightly different approaches.

News sites and blogs are usually best handled by reader mode or a reading extension. Most are article-driven and qualify for reader mode; the stripped-down view removes both animations and the visual clutter that surrounds the main text. See our notes on making news sites dyslexia-friendly for site-specific tips.

Documentation and reference sites (GitHub, Stack Overflow, company wikis) tend to be less animated than marketing pages, but scroll-triggered transitions still appear on modern revamps. The Chrome flag approach works well here because these are functional reading environments, not brand experiences — disabling animations doesn't cost you anything.

Social media feeds are among the hardest to tame because motion is often built into the core product: auto-playing video, animated story previews, like-button effects. Reduced-motion settings help with CSS animations but don't pause auto-playing video. Platform-specific settings (such as toggling off autoplay in preferences) need to be combined with the OS setting for a meaningful improvement.

Landing pages and marketing sites are the worst offenders and the ones least likely to implement reduced-motion CSS. For these, the Stylus custom-CSS approach or the Chrome flag is most reliable. If you're visiting a specific site repeatedly — say, an online learning platform or a company intranet — adding a single site-specific stylesheet override is a five-minute fix that pays off every time you visit.

A practical starting checklist

None of these steps conflict — they stack. The OS setting handles CSS animations sitewide. The font override reduces baseline visual load. Reader mode strips problem pages entirely. The Chrome flag catches the holdouts. Together they produce a browsing experience that is genuinely calmer than what most dyslexic readers currently deal with.

A note on accessibility and web standards

The Web Content Accessibility Guidelines (WCAG) 2.1 include a success criterion — 2.3.3 Animation from Interactions — that requires websites to provide a way to disable motion triggered by interaction, unless the animation is essential to functionality. This is a Level AAA criterion, meaning it's advisory rather than mandatory under most accessibility laws, but it reflects a clear professional consensus: unnecessary animation is an accessibility barrier, not a design flourish.

For anyone who builds websites: implementing @media (prefers-reduced-motion: reduce) takes about ten minutes and affects a meaningful proportion of your audience — not just people with dyslexia or vestibular disorders, but anyone who finds heavy animation fatiguing, which is a larger group than most analytics reveal (because people with this sensitivity tend to leave fast). Our dyslexia-friendly web design checklist covers this alongside typography, spacing, and colour contrast.

Get LexiFont Pro — apply dyslexia-friendly fonts sitewide and read with less strain, $14.99 one-time

Further reading

• Dyslexia and eye tracking — why some readers lose their place
• Visual stress and fluorescent lighting — screen tints that help
• Reader mode vs reading extensions — which is better for dyslexia?
• Dyslexia-friendly web design — a practical checklist
• Dyslexia and reading fatigue — why it happens and how to reduce it