The Saga of Accessible Colors — Video and Slides

I recently gave a presentation for Maxability about color contrast. This is a complex topic and could never be fully covered in one hour. I hoped to bring some understanding of why we still have problems with color contrast, understanding why designers may use a color that doesn’t meet color contrast requirements, and strategies to build better products.

Video recording of MaxAbility webinar

Slides

The Saga of Accessible Colors (Transcript and notes)

Muwekma Ohlone People

Accessible Color Contrast

The spice market: La Cigogne, Marrakech

Color Contrast for Designers

Identify where colors can be improved within the approved color palette. Many times the low-contrast color is a non-standard, perhaps outdated choice. It’s also important to focus color contrast changes within the greater color conversations and include color-blindness, dyslexia, and dark mode/high contrast considerations.

Color Contrast for Developers

Color Contrast for PMs

Color Contrast for Users

4.5:1 Battle Cry

WebAim 1 Million

Diamond’s State of the Accessibility Report (.pdf), released for Global Accessibilty Awareness Day 2020, highlights 85% of pages have low contrast as determined by automated testing

This was the analysis done by the WebAim 1 million. It’s a horrible number, but is it as bad it sounds? I did an evaluation of Intuit’s home page and several sites listed in the Alexa top 10 to see what was being highlighted as low contrast.

Intuit Home Page.

Google Home Page

YouTube Home Page

QQ.com

Automated Testing Doesn’t Tell The Whole Story

Goals For Today

  • Understand Overlapping requirements
  • Explore Conflicting User Experiences
  • Learn strategies for moving forward

Color Challenges

Call to Action buttons

Intuit uses Orange for primary call to action buttons. The current orange does not provide 4.5:1 color contrat.. Orange gets muddy at 4.5:1

But orange provides visual contrast against blue/black typography. The orange button creates a clear call to action, which is important for some customers:

The TurboTax team is investigating options to replace the orange button. They’ve added a color theme that switches the orange button for an accessible blue button. But this has some tradeoffs. The blue button matches the page’s colors and doesn’t stand out as the clear call to action. They ran tests, via UserTesting.com to test the actionable nature of the buttons. While the blue buttons are more readable, people with low vision and color-blindness had a slight preferance for the orange buttons.

Warm colors, such as orange, advance on the screen. Whereas cool colors, such as blue recede on the screen. This is one reason why orange call to action buttons have great strength

White vs Black Text on colored backgrounds

Defending low contrast decisions

Form inputs with different styles of placeholders, labels, and helper text

Intuit’s goal is to reduce the customer’s need to enter data. To this end, we use artificial intelligence to prepopulate form data. This can significantly increase the efficiency of creating a tax return or sending an invoice to a customer. But this brings up the conflict between inputs that have pre-filled data and placeholders. Customers found it confusing when forms had a combination of inputs with data and placeholders, they tended to skip the inputs with placeholders, as they looked like values. So Intuit uses a lower contrast placeholder color. It’s marginal on readability, but reduces the confusion between what is a value and what is a placeholder. Ultimately, Intuit’s Design System prioritizes moving the placeholder text out of the input and using a secondary string below the input. This removes the potential of confusion and makes the descriptive text available to everyone. We also use aria-describedby to surface that additional information to screen readers when the input has focus.

Low contrast placeholder text also makes it critical to not use placeholders as form input labels. They are meant to be suggestions, not labels.

Visual Hierarchy

  • Size and Scale
  • Color and Contrast
  • Typographic Hierarchy
  • Spacing, Proximity, and Negative Space
  • Alignment
  • Repetition

It’s common to place a light background color on tertiary information, such as a footer. But be careful, that body link color may not have enough contrast when placed on a background color. This should be accounted for in the color branding decisions.

Overlapping Link Requirements

We also need to make sure a user can scan a page and know which links have been visited, focused, active, or have a mouse hover. This complicates the color choices when color is the only differentiator. Jared Smith explained this complexity in his article: WCAG 2.0 and Link Colors. His color selections are:

  • Normal: #3344dd
  • Hover/Focus/Active: #bb1122
  • Visited: #884488

Don’t Depend on Color

a:visited:after { 
content:"\2713";
}

Color Strategies

There’s more to inclusive design than color

Listen to your customers

Designers Love Grey

Color Prioritization

Simply Unreadable Text

Content that falls between 2:1 and 3:1 requires design justification. For instance, it is a disabled button or placeholder text. If the design needs to be updated if there’s insufficient justification.

Start a conversation

  • Is it a heading?
  • Is it disabled?
  • Is it an icon or logo?
  • Because that’s what others are doing?

There are valid reasons for this contrast, but check to see what needs updating.

Why is contrast between 4:1 and 4.5:1? In many ways, these are the elements that take the longest to fix. Focus on what causes this and how they can be updated:

  • A branding color that didn’t consider accessibility
  • An adequate link color that fails when on a background color
  • A background gradient
  • A color that doesn’t meet the color palette

Action items

  • Automated testing is great, but doesn’t provide scale
  • Prioritize below 3:1
  • Provide clear strategies to PM
  • Listen to your customers
  • Prioritize their complaints
  • Empower Inclusive Design
  • Don’t depend on color
  • Get involved early in color branding discussions
  • Bring Designers and Engineers together.

Find more accessibility information from Ted Drake on his developer website: Last-Child.com.