Your friends at Viget present Inspire, a Design & Interaction Blog

Color Contrast for Better Readability

article introduction image contains the words 'color contrast'

When you create color palettes for your web design projects, are you testing the color combinations for contrast? If you're not, you might not be considering the eventual readability of the design and thus losing potential audience. 

I’ve been working on a process to help me ensure good color contrast and readability in my projects. Thanks to some helpful color contrast accessibility tools, I think I have something that is working and wanted to share with others in the event that you find it helpful, too. 

I should mention that I’m far from an accessibility expert. My goal here is to simply show that a little bit of effort can go a long way when it comes to selecting colors with optimal readability in mind. Check out W3C for a more thorough explanation. Also, check out Contrast Rebellion for an interesting look at the contrast problem. 

Beyond Empathy: Approaching a New Career in UX

So you're starting a career in UX. You’re empathetic, detail-oriented, and a stellar organizer to boot, and you want to combine these skills into a career. Welcome, New UX Designer! We’re so happy to have you in the industry.

Now, I’m sure you’ve heard that empathy is at the core of the UX process; this is one thing we’re great at communicating to designers who are just starting out. However, UX requires more than empathy, and it’s hard to know what else to prioritize when you’re new in the industry and there’s so much to learn. Where do you begin?

Here are a few additional lessons I hope will serve you well as you start out in your UX career.

A Skip Link Primer

Of all the accessibility enhancements that can be made to a page, adding a "skip to content" link is one of the easier wins. These links allow keyboard-only (non-mouse) users to quickly jump to the page's main content or other important sections.

In fact, if you need to conform to WCAG, Level A or above section 2.4.1 requires it.

"A mechanism [...] to bypass blocks of content that are repeated on multiple Web pages."

There's some important nuances to this seemingly simple feature, both in use and implementation, that I'm going to explore.

Testing Accordion Menu Designs & Iconography

Figure 1

Figure 1 - Animated gif of 7 landing page designs. Each frame represents a separate test conducted with 20 participants.

Among UI patterns, the accordion menu is a workhorse. Its ability to collapse long lists into manageable groups is really useful for navigation menus and particularly for search filters. Beyond the decision to use an accordion menu, I often find the specifics of actually designing one to be a little murky. What icon should I use? Should the icon go on the left or right of the menu item? In terms of usability, is an icon really necessary at all?

Seeking some certainty on these questions, I decided to do some testing.

Designing Experience Layers

Yesterday afternoon, I posted a little jab at Vine. What you see in that screenshot is a Vine video page completely devoid of usable content owing to a JavaScript error. I’m attempting a pretty typical task and a primary function of Vine’s service: I want to watch Jay-Z’s reaction to Kanye reprising his schtick at the Grammys. As you do.

But I can’t. Something went wrong. You see, Vine’s video pages are built in a way that expects everything goes off without a hitch. The web browser will receive all the necessary assets in the necessary order and execute everything exactly as the developer intended. Unfortunately, that’s not the way the Web often works.

(For those curious, I was using the most up-to-date version of Google Chrome on a MacBook Air running the latest operating system on my home’s broadband Internet connection. Pretty optimal conditions, right?)

So I post about it on Twitter. Friend and colleague Helen Holmes saw my post and kicked off a lengthy back-and-forth that convinced me to commit my thoughts to the page. I’ve been meaning to write about this particular topic for a while and here’s what’s been rattling around in my head.