Designing with accessibility in mind!
If you’re a software developer, full stack or UI/UX designer, you must know about accessibility right!
My article of ‘Color psychology of design’ has received so many claps and has been saved by many of you, thank you so much! I hope it helped you a lot. So I decided to write an article about accessibility.
Yes, accessible design is so important. It specifically considers the need of people with disabilities and democratize your design. It means having empathy for your users. About 16% of the global population i.e., estimated 1.3 billion people experience a significant disability today.
So, we follow WCAG ( Web content accessibility guideline) accessibility guidelines. So, general rule of thumb is your text font should be above a certain range in different screen sizes and also the contrast between your text and background in terms of color should have a minimum ratio of 4.5:1.
First, let’s start with color contrast! It helps to understand how different colors relate to each other and how they can be combined. Make sure to read about color wheel in detail. Now how do you check these all things right? So, here I listed some Figma plugins to check color contrast between text and background.
For example, if a page is very light on one edge and fades to very dark on the other edge, there is no one color that can run across the page and meet the contrast guidelines on both edges. One way of addressing this would be to change the lightness of the letters as well so that each letter always meets the contrast ratio for the background that is immediately behind the letter.
Another method is to provide a halo around the text that provides the necessary contrast ratio if the background image or color would not normally be sufficiently different in relative luminance.
Look at the images below. The grey background with black text looks hard to read while the white background with black text is easily readable. The contrast ratio is shown below:
If you use too much colors on your interface then everything becomes a priority and user don’t know where to look. So, it’s always great to have minimal colors. Here, I shared some Figma plugins and resources to check color contrast:
A11y — Color contrast checker (Figma plugin)
Abel eddy (Figma plugin) - It has color contrast checker, alt text checker, color blind simulator, touch size checker. Have a look!
Contrast with size
Having a contrast of size adds visual interest in the composition and help you to establish the key elements in your layout so you can be sure the viewer is focusing on the right area. In the real world, we notice things that are close to us more than things that are far away. Example: You won’t say this man is short unless there a tall man beside him, and there will be no 1st or 2d position if only element or person in that place. It makes a higher sense of priority and makes a lot of sense of your design and idea.
Contrast with shape
Utilizing contrast in shape will allow you to deepen the level of contrast to attract more level of attention to an area. If we place a number of rectangles and one circle somewhere, then obviously our focus will be on that circle right.
Contrast with type
Creating contrast with type usually means contrast through typography using different fonts or font weights. This helps to show the viewer what’s important in your design and creates emphasis. The most important element commands the most attention while the secondary element is subtle yet legible. This dynamic builds a visual hierarchy
Now, let’s talk about 3 C concept.
Here are 3 C’s of accessibility which I found that covers all necessary accessibility issues with solutions on how a designer can overcome them.
1. Color contract accessibility: It shows how your screen is visible to once with the color deficiency. You can also go to whocanuse.com, enter text and background color to get an idea about how it appears for the users with color deficiency.
Here is Stark plugin from Figma. You can see the color ratio here, higher the ratio better the contrast.
Next is color blind plugin. It allows you to view your designs in the 8 different types of color vision deficiencies.
You can go to whocanuse.com to get an idea on how it appears to the user with color deficiency
2. The next C is clickable area. It can be action buttons or input field. These will make easy specifically for users with cognitive disabilities:
The clickable area should be easy to access even for the users with deficiency.
It would be better if you apply hover effect to all the clickable areas.
Pressed effect so that user may exactly know when they press the button, navigation i.e., indication steps as it helps user to understand where they’re standing in process.
Labels and instructions: Users with disability find it easy to use the relevant user interfaces.
3. Next C is Common content accessibility. Here, I’ll talk about typography and layout. Optimizing typography, the first always alignment. Next, line spacing. You must include line spacing of 1.5x of font size. Next, paragraph spacing. Must include paragraph spacing of 1.5x of the line spacing. It’s always good to use shortcut keys on any type of interface. It must be responsive for any device. Always pay attention to mobile and desktop responsibilities.
Recommendation:
I recommend you to read WCAG guidelines for better understanding accessibility guidelines.
Thank you for reading to end. Hope this article will be useful for your next project and help you to get clear with accessibility and contrast more. Please give your feedback about this article as it encourages me to write more.
