Designing for blind, low vision or colour blind

With 4.5% of the global population experiencing colour blindness, 4% experiencing low vision, and another 0.6% being blind – visual difficulties with using the web are quite prevalent.

According to the Web Accessibility Initiative (WAI): “accessibility requirements for people with low vision, describes what people with low vision need for electronic content, tools, and technologies to be accessible. It includes an overview of low vision and describes specific user needs.”

Accessibility for blind, low vision or colour blind

Web experiences are inherently visual and the internet is full of sites, tools, and apps that are practically unusable for people with visual impairments. For example, it’s not uncommon to see websites that use combinations of background and foreground colours that make pages virtually unreadable for colour blind users. Despite all this, people with visual impairments use the web every day to surf, read and write emails, and do anything else anyone can conceivably do on the internet. Designing for the visually impaired will make it easier for everyone.

Designing for users that are blind, have low-vision or are colour blind:

• Allow users to adjust the font size of the text
• Avoid using images with text in the image, make the text an element instead
• Avoid using text or elements that are smaller than 16 pixels
• Avoid justified paragraph text
• Don't write in all caps especially if under 20 pixels
• Make buttons and link text clear and meaningful
• Give feedback when an action is performed such as when a button is clicked, display some visual stimuli to inform the user that an action has been successful
• Avoid large blocks of text and keep paragraph width to less than 80 characters
• Avoid flashing on the screen
• Allow users to pause any moving or animated information on a page
• Ensure a responsive reformatting of content and images and always avoid a horizontal scroll bar
• Use detailed ‘Alt Text’ on images that thoroughly describe the image
• Choose a colour palette with a high contrast ratio between the text and the background
• Be thoughtful with colour choices and avoid forbidden colour pairs such as red and green
• Allow users to review and correct any inputted information before finalizing a submission
• Consider using textures in place of colours to differentiate elements on the screen
• Allow users to switch to the dark mode
• Avoid using pop-ups, overlaps and modals
• Provide an audio alternative to video content
• Pair icons or text with colours to show actions and results, instead of just colour
• Allow access to colour blind tools and browser extensions
• Ensure that all functionality that is available by mouse is also available by keyboard commands
• Design with a screen reader in mind and use headings to organise page content to allow a user to skim the information on a page
• When designing for mobile, ensure you cater to device accessibility options to leverage the phone’s functionality

We have created an infographic to help illustrate what to be aware of when designing and developing for people that blind, have low-vision or are colour blind: Designing for blind, low vision or colour blind. If you are keen to reach more people by making your digital assets more accessible, Contact Us today and we can help you make this happen.