Skip to content

Chapter 5 of 8

Visual Accessibility

Color contrast is the visual difference between text and its background, and it must be strong enough for content to be readable by users with low vision or in poor lighting. WCAG AA requires a contrast ratio of at least 4.5 to 1 for normal text and 3 to 1 for large text, defined as 18 point regular or 14 point bold. The AA standard also requires a 3 to 1 contrast ratio for non-text elements such as UI component borders, icons, focus indicators, and graphical objects. WCAG AAA is stricter, requiring 7 to 1 for normal text and 4.5 to 1 for large text, which can be hard to achieve with brand palettes. Tools such as the WebAIM Contrast Checker, axe DevTools, Stark, and the color picker in Chrome DevTools make it easy to verify ratios during design and development.

Color is also unreliable as the only signal because around 8 percent of men and 0.5 percent of women have some form of color vision deficiency, most commonly red-green. Status, errors, and meaning should always be reinforced with text, icons, or patterns so that users do not lose information when colors look the same. Required fields, for instance, can be marked with both an asterisk and aria-required="true"; validation states can pair a red border with an icon and an error message.

Motion, zoom, and theming preferences must also be respected. The prefers-reduced-motion media query lets sites honor an operating-system setting to minimize animation, and meaningful motion such as essential feedback can usually remain while decorative motion, parallax, and autoplay video are reduced. The flashing limit of no more than three flashes per second protects users with photosensitive epilepsy. Content must remain functional when zoomed to 200 percent and must reflow without horizontal scrolling at 320 CSS pixels wide, which is why text should use relative units like rem and em rather than fixed pixel sizes, and why the viewport meta tag should never disable user scaling through user-scalable=no or maximum-scale=1. Sites should also respect prefers-color-scheme for dark mode while ensuring both modes meet contrast requirements, and adapt to forced-colors mode such as Windows High Contrast through the forced-colors media query so that system colors are honored.

All chapters
  1. 1Foundations of Web Accessibility
  2. 2The POUR Principles in Practice
  3. 3Semantic HTML and ARIA
  4. 4Keyboard Navigation and Focus Management
  5. 5Visual Accessibility
  6. 6Forms, Images, and Document Structure
  7. 7Dynamic Interfaces and Complex Components
  8. 8Testing, Cognitive Accessibility, and Inclusive Design

Drill it

Reading is not remembering. These come from the Web Accessibility deck:

Q

What is web accessibility?

Web accessibility is the practice of building websites and apps that people with disabilities can perceive, understand, navigate, and use.

Q

Why does accessibility matter?

It improves inclusion, usability, legal compliance, and overall product quality for everyone.

Q

What is WCAG?

WCAG stands for Web Content Accessibility Guidelines, the main standard used to evaluate digital accessibility.

Q

What are the four WCAG principles?

Content should be Perceivable, Operable, Understandable, and Robust.