How accessible is your page to the visually impaired?

Accessibility

Everyone knows the fact that colors and images play a pivotal role in the aesthetic appeal, make your website more accessible and thus improving the user experience and is also a vital way to display information from highlighting certain words to using the conventional colors for the benefit of end-users. It’s a very powerful tool if we look at the design world as it helps in conveying emotions, adds relevance to some context, or also helps in brand awareness. There are a lot of advantages, however, there are people who don’t see the world as other people.

All the information you portray through colors will be null for them. These people with visual impairments won’t be able to work their way through this colored world. Red-green color blindness is the most common form, followed by blue-yellow color blindness and total color blindness. Red-green color blindness affects up to 8% of males and 0.5% of females of Northern European descent.

How different type of visually impaired people see your website: We used different tools on our website to see how different people see our website(www.rapidfork.com)

Checking how it feels for different types of visual impairments:

People with red/green color blindness or Protanopia:

Although in the examples below, the color may seem different to the person suffering from Protanopia, which is the most common type of color blindness. The difference in colors doesn’t deprive users to see or read anything as the color contrast of the content and the background is good enough.

Left Original | Right with Protanopia filter (Tested using: https://www.toptal.com/designers/colorfilter)

But if the contrast is not good enough, this is how they will see it, which is almost nothing other than a bunch of scattered colors:

How to improve accessibility:

• Use better color contrast
• Avoid using similar colors for side by side
• Use light background colors for easy readability

Far-Sightedness:

Nearly 10 percent of people suffer from far-sightedness. In these nearby objects seem blurry.

Tested using: https://chrome.google.com/webstore/detail/web-disability-simulator/olioanlbgbpmdlgjnnampnnlohigkjla/related?hl=en

How to improve the accessibility:

• Avoid small text and allow zoom
• Include proper text height and spacing
• Allow text to speech so that user can know what your content contains

Dyslexia:

According to a 2017 study, between 5–10% of the population experience dyslexia, which equates to around 700 million people worldwide. In this problem, people have trouble reading words, making sentences etc.

Tested using: https://chrome.google.com/webstore/detail/web-disability-simulator/olioanlbgbpmdlgjnnampnnlohigkjla/related?hl=en

How to improve accessibility:

• Include images, videos, or audio, etc. to represent your content.
• Avoid using complex words
• Use simple fonts
• Increase font size and line spacing

Peripheral vision or Glaucoma:

Also known as Tunnel Vision is an eye problem which allows individual to only see the object that is right in front of his/her eye.

How to improve accessibility:

• Include main content in the center of the page
• Allow resizing of the page
• Use easy to read fonts
• Use better color contrast

Best Practices:

• Don’t use only the color to represent your information, use text along with it.
• Use icons, images, audio, video to convey content.

How Google displays error messages using color, text, and icon.

• Use proper architecture guidelines to structure content on your webpage.
• Use better color contrast to make text easily readable.

Blue text on the red background making it difficult to read it

• Use monochromatic colors to distinguish between certain content.
• If images are not self-explanatory, right short but concise information describing the image.