{
  "id": 19958432,
  "title": "Designing for low vision: 7 accessibility fixes that help people with optic nerve conditions",
  "url": "https://urgent.news/2026/11/14/designing-for-low-vision-7-accessibility-fixes-that-help-people-with",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-11-14T09:53:53.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/opticatrophy/designing-for-low-vision-7-accessibility-fixes-that-help-people-with-optic-nerve-conditions-18cd"
  },
  "original_language": "en",
  "account": "Optic nerve conditions can present challenges such as reduced contrast sensitivity, poor color perception, and limited field of view. Many websites unintentionally exclude users with these conditions. Here are seven accessibility features that can significantly improve the experience for individuals with optic nerve issues.\n\nFirst, ensure your website meets contrast ratios and goes beyond them. The Web Content Accessibility Guidelines (WCAG) recommend a contrast ratio of 4.5:1 for body text. However, for users with reduced contrast sensitivity, aiming for higher ratios and avoiding light grey text on white backgrounds can make a substantial difference.\n\nSecondly, never rely solely on color to convey important information. Red/green error states, for instance, can be easily overlooked. Instead, pair color with an icon or text label to ensure all users can understand the message.\n\nThird, support text resizing up to 200%. Use relative units like rem or em instead of fixed pixels (px) in your CSS. Test your layout to ensure it doesn't break when users increase the text size. This flexibility allows users to customize their viewing experience according to their needs.\n\nFourth, respect user preferences in CSS. Utilize media queries to adjust your design based on user settings. For example, you can apply a higher contrast theme when a user prefers more contrast:\n\n`css\n@media (prefers-contrast: more) {\n:root {\n--text: #000;\n--bg: #fff;\n}\n}\n`\n\nFifth, make focus states clear for users with a narrow field of view. These users depend on a visible focus ring to track their location on the page. Avoid using outline: none without providing a replacement, as this can make navigation difficult and confusing.\n\nSixth, keep layouts simple and linear. Content that jumps around or hides in corners can be challenging to find for individuals with peripheral vision loss. Maintain a predictable reading order, which also benefits screen reader users by presenting content in a logical sequence.\n\nLastly, test your website with real tools. Use a screen reader like NVDA or VoiceOver, adjust browser zoom to 200%, and employ a contrast checker to evaluate your design. While tools such as Lighthouse or axe can catch some accessibility issues, nothing compares to testing your site with real users to ensure the best possible experience.\n\nIf you have worked on an accessibility project, consider what fix had the most significant impact. Disclosure: I am part of a team working on a patient-information site for optic nerve conditions (optic-atrophy.com), where these considerations are particularly relevant.",
  "summary": "`Optic nerve conditions can reduce contrast sensitivity, dull colour perception, and create blind spots or a narrower field of view. Many sites quietly fail these users. Here are seven fixes that make a real difference. 1. Meet contrast ratios, then exceed them WCAG AA asks for 4.5:1 for body text. For users with reduced contrast sensitivity, aim higher where you can, and avoid light grey text on…",
  "key_points": [
    "Never rely solely on color to convey important information, pair color with icon or text label",
    "Support text resizing up to 200% using relative units like rem or em in CSS"
  ],
  "editors_take": "Prioritizing high contrast and flexible layouts shifts web design from mere compliance toward a functional standard that accommodates the specific sensory limitations of users with optic nerve conditions.",
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}