Designing with color accessibility in mind (part 2)
If you’ve ever been outside on an extremely sunny day and tried to read something off the screen of a phone or tablet, you may have noticed it’s really difficult to make out what’s on the screen. While color contrast is always important for users with visual impairments, it can also make your content way easier to read for a student with good vision who’s trying to read your website on a phone while walking across the quad.
Understanding the importance of color accessibility guidelines and how to make good design choices, as I addressed in last week's post, is half the battle. Now we'll look at how you can apply those guidelines to your design, while staying on-brand.
Here's a webpage example we will walk through.
1. The hero image fades to Illini Blue (#13294B) at the bottom. The word “nature” appears in large, Illini Orange (#FF552E) text and meets both AA and AAA accessibility standards.
2. The smaller text may fall below 18pt on smaller screen sizes, and the hero image gets a little lighter towards the top so it appears in white (#FFF) to remain accessible.
3. This headline appears in 32pt font, so while it is considered large text and would be accessible in Illini Orange (#FF552E) under WCAG AA standards, it is displayed in Altgeld (#DD3403) so that it also meets WCAG AAA standards.
4. The body text is set in Illini Blue (#13294B) which is accessible on a white (#FFF) background at all text sizes. The link is 16pt bold and set in Industrial Blue (#1D58A7). If the link were not bold at this size, it would meet WCAG AA standards but not WCAG AAA standards.
5. The background of the footer is Cloud (#F8FAFC) and the 18pt body text is set in Illini Blue (#13294B)
6. The link in the footer appears in Industrial Blue (#1D58A7) on a background of Cloud (#F8FAFC). Since it is larger than 18pt, it does not need to be bolded.
Remember, accessible visual design is better for all users, not just the visually impaired. If you need any help, or would just like someone to take a look at what you're working on, feel free to get in touch with me.
For more information on how to use color to leverage the university brand, visit our brand standards page on color.