Visual Accessibility — Contrast, Zoom and Motion
IntermediateLow vision, colour vision deficiency and motion sensitivity affect a large share of users. Each has a specific, testable requirement — and meeting them improves the design for everyone.
Overview
These requirements are unusual in being precisely measurable: a contrast ratio either meets 4.5:1 or it does not, a page either works at 200% zoom or it does not. That makes them easy to check and hard to argue about, which is why they are the most commonly cited accessibility failures. They also affect far more people than the label suggests — colour vision deficiency alone is about one in twelve men, and anyone reading a phone in Indian sunlight is temporarily low-vision.
Contrast and Colour
The numbers, and the rule that colour is never the only signal.
/* WCAG AA — the working minimum:
body text 4.5:1
large text (>=24px, or >=18.66px bold) 3:1
UI components, borders, icons, focus rings 3:1
AAA is 7:1 for body text, worth aiming at for long reading. */
/* The usual failures:
grey placeholder text on white (#999 on #fff = 2.8:1)
white text on a mid-tone brand colour
disabled state so faint it is unreadable
text over a photograph with no scrim */
/* Check: DevTools colour picker shows the ratio and an AA/AAA badge
directly in the swatch. There is no excuse for guessing. */
/* Never rely on colour alone — about 1 in 12 men has a colour
vision deficiency, and red/green is the common one: */
<span class="error">✕ Failed — 2 tests did not pass</span>
/* icon + text + colour, so the meaning survives without the colour */
/* Charts: use pattern, label or shape in addition to hue. */
/* Test it: DevTools -> Rendering -> Emulate vision deficiencies
(protanopia, deuteranopia, blurred vision). */Zoom and Text Scaling
Two different things, and layouts fail differently for each.
/* 1. PAGE ZOOM (Ctrl +). WCAG requires the page to work at 200%
with no loss of content or function, and no two-dimensional
scrolling. This effectively means a responsive layout: at 200%
a 1280px window behaves like 640px. */
/* 2. TEXT-ONLY scaling: the user raises the browser's default font
size. This is what px-based type ignores completely: */
html { font-size: 16px } /* overrides the user's choice */
body { font-size: 14px } /* fixed, ignores it too */
/* Use rem, and do not set a px font-size on html. */
/* WCAG also requires text to be resizable to 200% without loss —
which fixed-height containers break: */
.card { height: 120px } /* text overflows when scaled */
.card { min-height: 120px } /* grows instead */
/* Avoid anything that clips scaled text */
white-space: nowrap /* on a container that must hold text */
overflow: hidden /* on a text container */
/* Test both, quickly:
Ctrl + five times, and read the page
set the browser default font to 24px, and reload */Motion and Reading Comfort
Reduced motion, and the layout choices that help dyslexic and low-vision readers.
/* Large or parallax motion can cause nausea and dizziness for
people with vestibular disorders. Honour the system setting: */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
}
/* Reduce, not remove: a short fade is fine and still communicates
state. It is the movement across the screen that causes harm. */
/* Anything auto-playing or looping needs a pause control if it runs
longer than five seconds — a WCAG requirement, and it covers
carousels, marquees and animated backgrounds. */
/* Reading comfort, which helps dyslexic readers particularly:
- 45-75 characters per line max-width: 65ch
- line-height at least 1.5 line-height: 1.5
- left-aligned, never justified text-align: start
- generous paragraph spacing
- avoid ALL CAPS for long text — it removes word shape
- avoid pure #000 on pure #fff, which can cause halation */
body { color: #1a1a1a; background: #fafafa }Key Points to Remember
- 1WCAG AA is 4.5:1 for body text and 3:1 for large text and UI components — DevTools shows the ratio directly
- 2Colour must never be the only signal; pair it with an icon, text or shape
- 3A page must work at 200% zoom, and text must scale — which px-based font sizes and fixed heights prevent
- 4prefers-reduced-motion should reduce movement rather than remove all feedback, and long animations need a pause control
- 5Line length around 65 characters, line-height 1.5 and left alignment materially help dyslexic and low-vision readers
Interview Questions
Sign in to ask AriaWhat contrast ratios does WCAG AA require, and for what?
Why does a fixed-height card break text scaling?
What should prefers-reduced-motion actually change?
Ask Aria about Visual Accessibility — Contrast, Zoom and Motion
Your personal AI tutor — ask anything about this concept
Revision Status
Personal Notes
Sign in to save personal notes for this topic.
Discussion
Sign in to join the discussion.