Web Accessibility Training – Low Vision & Colour Blindness

Module 3: Low Vision & Colour Blindness 

Designing for users who can see — just not clearly

• Beyond blindness
• Designing for real-world vision impairments

Slide 2 – Why This Matters

• 2.2 billion people globally have a vision impairment
• 1 billion cases remain unaddressed
• ~39 million are blind
• 250+ million have low vision (86%)
• These impairments affect everyday web use

Key idea:
Most sight-based access needs are not blindness

Slide 3 – What Is Low Vision?

Low vision includes:

• Blurred or reduced clarity
• Loss of contrast sensitivity
• Difficulty reading small text
• Reliance on zoom or larger text

Important:
Many low-vision users do not use screen readers

Slide 4 – Text Resizing & WCAG

WCAG requires:

• Users must be able to change text size
• Without zooming the entire interface

If you use:

• ❌ Pixel-based font sizes
  You block this need

Solution:
Use relative units (em, rem)

Slide 5 – Raise Your Base Font Size

Why this matters:

• Many users don’t know how to resize text
• Older users often need larger text most
• Tech literacy may be low

Best practice:

• Aim for 16px or higher as a base size
• Scale everything from that base

Slide 6 – Line Height & Justified Text

Problems with justified text:

• Creates uneven spacing
• Breaks reading flow
• Gets worse when text is resized

WCAG guidance:

• Avoid justified text
• Prefer left-aligned text
• Use comfortable line height

Slide 7 – Font Choice Matters

Accessible, readable fonts:

• Arial
• Georgia
• Tahoma
• Times New Roman
• Helvetica
• Verdana

General rules:

• Use familiar fonts
• Limit font families
• Avoid ALL CAPS
• Avoid long italic text
• Use bold sparingly

Slide 8 – Zoom & Reflow

Common failure:

• Zoom makes content larger
• Layout breaks
• Horizontal + vertical scrolling required

WCAG Reflow rule:

• No scrolling in two directions
• Content must adapt when zoomed

Biggest frustration for low-vision users

Slide 9 – Colour Blindness Basics

Colour blindness affects:

• Red / green
• Blue / yellow
• Sometimes all colour perception

Design mistake:

• Using colour alone to convey meaning

Rule:
If colour disappears, meaning must remain

Slide 10 – Images & Colour Meaning

Example problem:

• Maps or diagrams using colour only
• Routes indistinguishable for colour-blind users

Accessible solutions:

• Descriptive alt text
• Patterns or line styles
• Labels or annotations
• Supporting text

Slide 11 – Links & Colour

Common mistake:

• Removing underline from links
• Relying on colour alone

WCAG requires:

• Links must be visually distinct
• Not colour-only
• 3:1 contrast ratio for links

Best practice:

• Keep underlines
• Or add another visual cue

Slide 12 – Colour to Infer Status

Problem:

• Red = error
• Green = success
• No text or icon

Fails for:

• Red/green colour blindness

Fix:

• Add text labels
• Use icons + text
• Never rely on colour alone

Slide 13 – Testing Zoom (200%)

How to test:

• Zoom browser to 200%
• Content should:
  • Stay readable
  • Reflow vertically
  • Avoid horizontal scrolling

If this works:

• You’re supporting low-vision users

Slide 14 – Don’t Disable Zoom

Bad practice:

• Blocking zoom via viewport meta tag

Why it’s harmful:

• Users need custom magnification
• Responsive design ≠ accessibility

Best practice:

• Allow zoom
• Let users control their experience

Slide 15 – Key Takeaways

• Low vision ≠ blindness
• Text must scale cleanly
• Layouts must reflow
• Colour must not carry meaning alone
• Users need control, not restrictions

Accessibility means designing for difference, not perfection

Module 3 – Low Vision & Colour Blindness: Class Quiz

Instructions:
Answer all questions. Choose the best answer where applicable.

Section A: Multiple Choice

1. According to WHO estimates, how many people globally have a near or distance vision impairment?

A. 250 million
B. 1 billion
C. 2.2 billion
D. 39 million

2. What percentage of significant visual impairments are low vision rather than blindness?

A. 50%
B. 65%
C. 75%
D. 86%

3. WCAG states that users should be able to resize text without:

A. Refreshing the page
B. Changing devices
C. Zooming the entire interface
D. Using assistive technology

4. Why are pixel-based font sizes a problem for low-vision users?

A. They load slowly
B. They break screen readers
C. They prevent user text resizing
D. They reduce colour contrast

5. Which unit is most appropriate for accessible text sizing?

A. px
B. %
C. em / rem
D. vh

Section B: True or False

6. True or False:

Many low-vision users rely on screen readers.

7. True or False:

Justified text can become harder to read when users increase text size.

8. True or False:

Responsive design alone guarantees accessibility for low-vision users.

Correct answer: False

Section C: Short Answer

9. List TWO reasons why increasing the base font size helps accessibility.

10. Why does WCAG discourage relying on colour alone to convey meaning?

Expected answer (summary):
Because colour-blind users may not perceive the difference, causing loss of meaning or missed information.

Section D: Applied Understanding

**11. A website removes link underlines and relies only on colour to show links.

Which WCAG principle does this violate, and why?**

12. What is the main accessibility problem when zooming causes horizontal scrolling?

A. The font is too small
B. The site is not responsive
C. The content fails WCAG Reflow requirements
D. The browser is outdated

Bonus Question

13. Why is disabling zoom considered harmful, even on responsive websites?