Thomas Piggott
User Experience Lead
Holy Contrast, Batman!
Accessibility has become a major point of concern for public institutions, as all institutions receiving federal funding are required to meet accessibility standards. Lawsuits have increased substantially and libraries are doing all they can to ensure access to all their patrons. But more importantly, inclusive design is good design.
Ensuring Proper Contrast
When we had the opportunity to redesign our product platform, we made sure that all of our color combinations had the appropriate color contrast. WCAG 2.1 requires text is always at a contrast ratio of at least 4.5 : 1 with its background (see more). Here's what we did to ensure we met accessbility requirements:
- UX created a color palette based on the marketing colors and updated to ensure accessible color combinations
- UX worked with the UI developers to create color variables for each color in the palette
- Color variables were implemented across the platform so developers could just use those variable and not worry about the speific HEX values
Insider Tip
Once you start thinking about color contrast and accessibility, you'll never look at another website the same again. There are so many uses of white text on light backgrounds, like light blues or greens. I know I was guilty of this in the past, because frankly, it thought it looked nice. But that's just to my eyes, and these accessibility requirements help us consider more than just ourselves.
Ask me more!
Accessibility isn't just about color contrast. I'd love to discuss further with you how we worked to ensure our whole platform was accessible. Let's talk!
- What steps did we take to make sure screen readers worked with our products?
- Our platform and products include data visualizations – how are those made accessible?
- How did we verify what we'd done was truly accessible?
Read About the Whole Project
Product Platform Redesign
Re-working an entire platform to create a consistent experience, focused on today’s students.