Simulating Vision Deficiencies to Test UI

Firefox dev-tools

You can simulate vision deficiencies in the “Accessibility” tab and there you can test how your users see your website when they have:

• Protanopia, which is blindness to red.
• Deuteranopia, which is blindness to green.
• Tritanopia, which is a form of blue-yellow color blindness
• Achromatopsia. People with complete achromatopsia cannot perceive any colors, they see only black, white, and shades of gray.
• Contrast loss (or Reduced contrast sensitivity), reduced ability to distinguish an object from other objects and the background (like black coffee in a black cup or grey text on a white background).

In the “Accessibility” tab, you can also check for issues: it will tell you whether you have problems with labels, whether contrast is compliant with WCAG, and check for image alt attributes.

Chrome dev-tools

The option to simulate vision deficiencies hides in the “Rendering” tab (you can find this tab in the “Other tools” menu). You can find all the options that Firefox has. The new one is the “Blurred Vision” option, to see how a person with, for instance, hyperopia (farsightedness) can view your website.

#accessibility #a11y #ux #design #inclusivedesign