Optic nerve conditions can reduce contrast sensitivity, dull colour perception, and create blind spots or a narrower field of view. Many websites quietly fail these users. Here are seven fixes that make a real difference.

  1. Meet contrast ratios, then exceed them
    The WCAG guidelines ask for a 4.5:1 contrast ratio for body text at level AA. For users with reduced contrast sensitivity, aim higher where you can, and avoid light grey text on a white background. You can check your colours with the WebAIM Contrast Checker.

  2. Never rely on colour alone
    Red and green error states are easy to miss for people with colour-vision loss. Pair colour with an icon or a text label, such as “Error: enter a valid email”.

  3. Support text resizing up to 200%
    Use relative units (rem, em) instead of fixed px, and test that your layout doesn’t break when users zoom in.

  4. Respect user preferences in CSS
    Browsers expose settings such as prefers-contrast and prefers-reduced-motion. Use them:

@media (prefers-contrast: more) {
:root { --text: #000; --bg: #fff; }
}

@media (prefers-reduced-motion: reduce) {

  • { animation: none !important; } }
    1. Make focus states obvious Users with a narrow field of view rely on a visible focus ring to keep track of where they are on the page. Never use outline: none without a clear replacement.

  1. Keep layouts simple and linear
    Content that jumps around or hides in corners is hard to find with peripheral vision loss. Keep a predictable reading order, which also helps screen reader users.

  2. Test with real tools
    Try a screen reader such as NVDA or VoiceOver, and test browser zoom at 200%. Automated tools like Lighthouse and axe catch the basics, but nothing replaces testing with real users.

Your turn
What accessibility fix has had the biggest impact on a project you’ve worked on? Share it in the comments.