We can spend hours and days choosing the right color for the app/website, refining our palette to find just the right purple. What we don’t always realize is that for about 4.5% of the users, all that energy is wasted. Everyone’s eyes are different and everyone sees color in different ways. That perfect color we spent so long choosing … may look very different (or grey) to some users. Why not spend a little time over colors that will make your experience easier on the eyes and more clear in meaning?
Did you know?
Approximately 1 in 12 (8%) men and 1 in 200 (0.5%) women are affected by some form of color blindness. While there are different forms of the condition, red/green color blindness is the most common. People with red/green color blindness have difficulty in differentiating reds, greens, and yellows of same values, especially when the greens have more yellow than blue in them.
How do we make our application/website accessible for these users?
There are 3 simple steps as designer to make it more accessible:
#1 Adding enough Contrast in Color
Color contrast is the most overlooked accessibility problem. Users who have vision problem may find it difficult to read text from a background color if it has low contrast. Good color contrast improves the readability of your content for everyone in all kinds of situations:
outside in bright sunlight,
on old monitors and secondary displays (like TVs, Kindles, or projectors),
and for people with low or blurry vision (including situational vision deficiencies like allergies or just transitioning from a dark space to a bright space)
The standard for color contrast is WCAG standard, which has a baseline recommendation of at least 3:1 ratio. The best way to follow the rules is that the focus content should be AAA compliant, supporting content should be at least AA compliant, and supplementary text (like headings, pull quotes, captions, etc.) can go as low as 3:1.
#2 Don’t use color alone to make critical information understandable
We often use color as a tool to indicate a status or meaning. A red background or border indicates an error. Green may tell your user that an action was successful. Be careful not to use color alone to communicate these messages, as those with color blindness may not see a distinction to understand your meaning.
Try to use other indicators like patterns or text.
In the same way, patterns or icons can be used to add value to colors in charts, graphs, and other images that differentiate elements based on color. As always with charts, be sure to provide a key (aka legend) that indicate the color and pattern to the data it represents.
When it comes to forms, a red border may seem obvious to some people, it may not even indicate as an error for people with color blindness. Instead of relying solely on border color, supplement it with a message, icon, or both.
#3 Use labels or instructions with form fields and inputs
Using placeholder text as labels are one of the main mistakes made while designing a form. Placeholder text is usually gray and has low contrast, so it’s hard to read. Users who use screen readers usually navigate through a form using the Tab key to jump through the form elements. The <label> elements are read for each form control. Any non-label text, such as placeholder text, is usually skipped over.
Help users to understand what they should do when filling in a form and the best practise is that labels don’t go away, even when the person is filling an input. Users should never lose context of what they’re filling in.
Kommentare