- View Offline
- Understanding aesthetics
- Picking harmonious colors
- Structuring your layout
- Using space to organize your design
- Communicating with the right fonts
- Aligning objects to achieve balance
- Adding movement with scrolling and animation
- Achieving proportion by scaling objects and text
- Creating CSS for different devices
Skill Level Beginner
The sixth concept on foundational topics in web design is accessibility and exploring ways to use size and color effectively on the web. Accessibility in web design is all about making sure you design your website to be accessible and usable to the widest possible audience regardless of ability or disability. This includes people who are physically and visually impaired and maybe accessing the web using some kind of browser assistive device. As a result, this demographic requires special consideration when it comes to design.
Several demographic groups fall under the accessibility umbrella, each requiring slightly different design solutions involving size and color. Whether you're designing for a horizontal market or a vertical market, The size and colors you choose can make a big difference. In case you don't know what those terms mean, a vertical market is a market in which a vendor offers services or products that are specific to a particular profession, industry or group with specialized interests and needs.
Vertical markets could include bakeries, bookstores, banks, medical equipment wholesalers, legal practices, dental offices, and senior services providers. A horizontal market is a market in which a vendor offers a wide range of products and services to a broad group of customers with a variety of needs. Think of Amazon, where you can easily find coffee pots, books, fishing gear, and electronics, all vertical markets themselves, housed under the umbrella of a single provider.
The brick-and-mortar equivalent of Amazon is something like Sam's Club, Costco, or another warehouse shopping club. While accessibility isn't specifically a vertical or horizontal market, two key design issues, color and size, almost always need addressing for this demographic when creating your layouts for the web. Let's explore color first. Roughly one in 20 people have some form of color blindness, the most common type restricts the perception of orange, red and green.
Instead of colors, people will see a single hue such as yellow with gridations and tint shade and tone. This means that if you use these colors, you will need to allow for enough contrast between them so each object or text block is visually distinct. The second kind of color blindness effects the same percentage roughly 1 to 5% of males and 0.1% of females. And it has the same general shift in color that you see here in this diagram. The third type of color blindness Tritanopia, effects 0.003% of males and females so it's actually quite rare.
But, as you can see with the diagram, It's affecting the perception of yellow and orange and even some reds. greens are almost all but gone. So all they really see is tints of like, reds and pinks, a little bit of green and some blues, no yellows. Contrast by itself is also a bit of an accessibility issue. Once you've selected a color palette for your design, you should check that there is enough contrast between the font color and the background to ensure your visitors can actually read your text.
While a low contrast design on the left might look beautiful to you, someone with color blindness or low vision may not even be able to see the text. In fact, contrast must be a certain ratio to ensure detection. The ratio for AA compliance is 4.5 to 1, and for AAA compliance, the ratio should be at least be seven to one. There's a really great contrast tool to check color text against background color on this website.
While we're on the topic of online tools, you can also find a full set of color simulation tools on the University of Minnesota's Accessibility website shown here. Okay, let's shift to the topic of size now. Small fonts in the 10 to 14 pixel range used to be the norm for paragraph text. Today however, with increased global awareness of accessibility issues, paragraph text is often set a little bit larger In the equivalent of the 14 to 16 pixel range. This is great news for everyone really since big easy to read to read text is easier on everyone's eyes.
Its also great for two other reasons. First, with the prevalence of touch enabled devices, big text and big buttons are far easier to tap. Second and more importantly, visitors with low vision like seniors have an easier time maneuvering through a website when the content is clearly labeled and easy to see. In addition to vision issues, according to the National Institute on Aging, seniors may also have to work harder than younger folks to do things like process information, draw inferences and focus on important new information without being distracted by irrelevant details.
Knowing this information, as designers, we can make certain modifications to our designs to assist everyone, including seniors, with reading and interpreting the content in our design. For instance, you can size your text and headings to be larger. You can break up your content into smaller bite size pieces. And you can make your buttons bigger with lots of white space around them, so they're easier to click or tap. Once more if you use scalable font units such as m's or percentages in your css your text will scale proportionality should any user zoom in with their browsers.
For further information on accessibility resources for designers here are a few sites you may want to explore including Web Aim and the World Wide Web consortiums, web accessibility initiative websites. Accessibility in web design is all about making sure your website is accessible and usable to the widest possible audience. By making a few minor adjustments to your elements, sizes and colors you can easily meet the needs of every site visitor.
Sign up for a Premium Membership to download courses for Internet-free viewing.
Watch offline with your iOS, Android, or desktop app.Start Your Free Trial
After signing up, download the course here or from the iOS/Android App.