Six Tints, Five Speeds — New Ways of Thinking About Color Palette Design and Typography for Design Systems

Scheduled at 10:15 am in Penrose 2 on Friday, November 21.

Speaker(s)

• Jeff Witt, Founder / CEO, YRA Tech

Session Details

• Length of Session: 1-hr
• Format: Lecture
• Expertise Level: Intermediate
• Type of session: General Conference

Summary

Color choices, contrast levels, font and typeface choices, and text sizing all affect usability, and particularly affect readability. Making WCAG-conformant choices for individual widgets or pages may not be very difficult, but how do you make an entire site cohesive, reflect brand sensibility, and be consistent? I present an algorithmic approach which applies additional structure and constraints to a Design System in order to guide designers toward stronger, more cohesive designs by default.

Abstract

First I will present a quick overview of web and mobile accessibility requirements related to use of color and luminance contrast, review current best practices, and outline the quirks of the WCAG luminance contrast formula and how it can affect brand palette choices.

I will then present a novel method of palette building for Design Systems, which can be adapted to existing brands or used for validating new ones. The method applies additional constraints to the traditional palette design approach, which provide better guardrails for whole-page coordination.

Next I will review web and mobile accessibility requirements related to text, review the various technologies for text rendering that affect usability and accessibility, and discuss the accessibility implications of traditional best practices for typography.

Finally I will present a novel method of classifying text styling choices for design systems. This classification system, in conjunction with the above palette design constraints, provides a framework for managing attention and optimizing usability beyond WCAG requirements while still reinforcing brand presence.

If time allows, I will discuss implications of this system for chart design.

Keypoints

1. Reducing tints and shades in a Design System's palette can enhance consistency and avoid common a11y bugs
2. Text speed is a useful construct for managing attention and framing legibility as well as reading impairments
3. Additional Design System constraints can help designers without impinging on creativity

Disability Areas

Cognitive/Learning, Vision

Topic Areas

Accessible Course Design, Other, Uncategorized, Web/Media/App Access

Speaker Bio(s)

Jeff Witt

Jeff Witt is founder and CEO of YRA Tech, which provides tools and services for web and mobile accessibility, specializing in higher education. He was previously a web and mobile accessibility specialist for edX.org and Fidelity Investments. Way, way back he was an Accessibility Program Manager for Windows at Microsoft.