Most accessibility wins are small and one-time. These tips lean on the Web Content Accessibility Guidelines (WCAG), the shared rulebook behind the ADA's web guidance.
Colour contrast
Contrast is the gap in brightness between text and its background. Low contrast (same saturation/shade among colours) is one of the biggest barriers for low-vision readers. The fix is to keep text nice and contrasting even when the decorations stay soft.
| Level | Normal text | Large text* |
|---|---|---|
| AA (aim for this) | 4.5 : 1 | 3 : 1 |
| AAA (gold star) | 7 : 1 | 4.5 : 1 |
*“Large text” means about 18.66px bold, or 24px and up.
Text size & spacing
Comfortable text is a gift to every visitor. A few rules of thumb:
- Start around 16px (1rem) minimum for body text — 18px is even cozier (Section 508 typography).
- Use relative units like
remor%instead of fixedpx, so readers can scale text. - Let text grow to 200% without breaking the layout (WCAG 1.4.4).
- Give lines room: line-height around 1.5–1.75, line length near 70 characters.
- Pick clear fonts. Sans-serif is easiest for body reading for many low-vision folks.
Clear structure
Screen readers and keyboard users navigate by your structure, not your visuals:
- Use one
<h1>per page, then<h2>,<h3>in order. Avoid skipping levels for sizing. - Use real landmarks:
<header>,<nav>,<main>,<footer>. - Add a “skip to content” link at the top (this site has one — try pressing Tab).
Kind link text
Links should make sense out of context, because screen reader users often pull up a list of just the links. “Click here” can be a maze, but descriptive text is a map.
Next: Extra Design Considerations for screen readers, alt text, and keyboard care.
Accessibility Main Page