Designing Web Content for People with Vision Loss: Lessons from a Retinitis Pigmentosa Info Site

Retinitis Pigmentosa (RP) is a group of genetic eye conditions that gradually reduce peripheral vision and night vision. Many people with RP, and their families, rely on the web to understand symptoms and treatment options. That makes accessibility a core requirement for any site serving them, not an extra.

I work on retinitis-pigmentosa.co.in, an information site about RP and its treatment options in India. Here are some design principles that matter for audiences with low vision or tunnel vision.

1. High contrast and scalable text

• Use a contrast ratio of at least 4.5:1 for body text (WCAG AA).
• Use relative units (rem, em) so text scales with browser settings.
• Avoid light grey text on white. It looks clean but is hard to read.

2. Simple, linear layouts

Tunnel vision makes busy multi-column layouts tiring to scan.

• Prefer a single main content column.
• Keep related information close together.
• Use clear headings so content can be skimmed and navigated by screen reader.

3. Screen reader friendliness

• Use semantic HTML (<nav>, <main>, <article>, proper heading order).
• Write meaningful alt text for images.
• Make sure every interactive element is keyboard-accessible with a visible focus state.

4. Plain language for medical content

Medical content is often written for clinicians. Short sentences, defined terms, and a consistent structure (what it is, symptoms, options, next steps) help patients understand it.

5. Dark mode and user preferences

Many people with night blindness or light sensitivity prefer dark themes. Respect the system setting:

@media (prefers-color-scheme: dark) {
  body { background: #121212; color: #f2f2f2; }
}

Over to you

• What accessibility tools or checklists do you use for content-heavy sites?
• Has anyone built for users with low vision and found something that surprised you?

I'd also welcome feedback on the site itself: retinitis-pigmentosa.co.in.