If there is one thing I have learned over the years, people come in all shapes and sizes with many different skills and abilities. Like very few clothing items can boast “one size fits most,” few designs can say one style fits most. But with a few changes, you can make your designs accessible for more.
Design for Users
If we’ve heard it once, we’ve heard it a million times: designers must keep the end user in mind. There are many ways to determine the users of our products and services. And I will cover them in a future post. But now, let’s discuss the three changes.
Change 1: Color
The most apparent reason to make our designs accessible is to make them so most people can use and enjoy them. Just because the designer can see the whole color spectrum does not mean everyone can.
I love gradients as much as the next designer. Colors are a great way to express moods and convey messages to our users. Unfortunately, many designs out in the wild use white text on light-colored backgrounds and buttons. Likewise, black text on dark backgrounds is equally hard to see. And if our designs are not visible, how can we expect people to use them?
Keeping this one change in mind, we help people gain more access to the websites and content we create to share. These modifications are significant as our current user bases age and experience limitations with their sight.
A great solution is to get a color contrast tool to check your design color choices. One of the tools I use is color.adobe.com. The site has loads of great features, and the best one is under the tab Accessibility Tools.
As you can see in this screenshot, we can check the contrast ratio of the two colors. I chose a couple of colors I use in my brand. This combination works great for text of all sizes and graphics, too. However, if I changed the Text Color to white (#FFFFFF), I would get a much different score.
Awww, I failed all three tests. But have no fear; Adobe is here to help. On the far right panel, I can see my recommendations to help increase this contrast ratio. This panel allows us to find different colors and keep them within our brand guidelines. Now let’s take a look at a couple of examples.
Again, I used colors from my brand. We can see that light blue has an excellent ratio when paired with a dark color. The AAA rating is the best you can receive. It means your text will be legible down to 16 points. We should aim for a contrast ratio of 4.5 or better. Now, let’s pair the blue with the white. Here, the blue does not pass the test. There needs to be more contrast for the text to be easily read and understood.
Did you catch the other trick I used in my visuals? I’ll give you a hint: it has something to do with the bars. Did you get it? Not only did I use numbers to represent pass and fail, but I also used different bar heights. And I’m glad I did! The white text against the light background is tough to read. This technique is just one example of how we can make our content easy to connect with users.
Change 2: Fonts
Does anyone know how many fonts are out there? Haha! I probably have a few hundred in my library. Why? Because I need to be more diligent with removing unused fonts. My go-to styles look great in design and are easy to read, but the rest are experiments.
Anyway, this article isn’t about great-looking font pairs. Nor am I wanting to judge any designer’s font choices. The main reason for not doing so is that I recognize some style decisions are out of the designer’s hands. Sure, we can help educate clients on what styles are better and why, but ultimately, the customer is always right.
I’m talking less about styles and more about size and readability. I have seen many sites with text too small to read at 100% on desktops. And it only goes down from there on mobile devices.
So that you know, I’m not guessing at sizes. I use a fantastic extension called WhatFont. I have it installed on all my browsers, and I can inspect any font style, weight, and size on any website.
So when I tell you designers are setting some text on their sites at 10 or 12 points, you can be sure I checked. Research suggests the lowest we should be setting text is approximately 14 points. Why approximately? Not all fonts have the same letter height as commonly used or installed fonts. When we compare fonts like Arial or Times New Roman, we can better understand whether we need to make our selected font larger or smaller. Generally, if a line of text isn’t significant enough to set at 14 points or more, I argue that it’s not substantial enough to include in the design.
Now, let’s discuss pixels vs. REMs. Hubspot defines rem (short for “root-em”) as a unit to “dictate an element’s font size relative to the size of the root element.” In a nutshell, 1 Rem equals 16 pixels (px). Therefore, if I want my headline text to be 72 pixels, I set my rem to 4.5. And my subheading of 36 pixels would equal 2.25 rem.
So why would we use rems instead of pixels? Accessibility. Per the Hubspot article, “As pixels are absolute units, they do not scale with the viewport. So 1px represents one unit on a physical device, regardless of the device size. As a result, creating responsive websites is often easier using a relative unit like percentage, em, or rem.“
You can read the whole article about Rems here: What Are Rem Units?
Finally, let’s look at what we can do with our images.
Change 3: Images
Images are why we are designers. We are visual people and can use a single image to convey a lot more about our message. The saying goes, “a picture is worth a thousand words.”
But what if someone cannot see the beautiful, creative graphic you worked hours to present? What if you designed it to “fill in the gaps” of what you did not put into the text? Then there is a possibility that you left some readers needing clarification about your whole message. The reason is the growing number of people using screen readers to get their information.
Wikipedia says, “A screen reader is a form of assistive technology that renders text and image content as speech or braille output. Screen readers are essential to people who are blind and useful to those who are visually impaired, illiterate, or have a learning disability.“
I know graphic designers are notorious for saving their images as Untitled-1.jpg, Untitled-2.jpg, etc. I’ll admit, I have done it, too. However, two things happen when we start to name our images with general descriptions. First, our files get more organized! And who couldn’t use a little more organization in their folders? Second, and more importantly, screen readers can read the image name to people that use them. It also helps to add a description when you can. Every time I upload an image for a website, I add the description simultaneously. If I don’t, I always have to figure out which graphics have descriptions and which do not. (Note: Some images can be decorative only. For these images, I do not include a description.)
Wrap Up
With these simple changes, we can begin making our designs more accessible for all users. Images, fonts, and colors all play vital roles in our content and cause people to buy products and services, donate to causes, connect on social media platforms, and more. Keeping these principles in mind, we can still create designs that are easy to access, functional, friendly, and beautiful.
If you liked this article, please consider sharing it on your social media of choice. And if you have a specific topic you would like me to cover in a future post, feel free to drop me a line on my Contact page.
Cheers, friends!
Featured image provided by Frank Castro.
