Color & Contrast

Overview

Color & Contrast.com (https://colorandcontrast.com) is an online interactive library for user interface designers to learn about color and contrast perception. It is intended to be simple and easy to understand, with interactive examples to aid in educating complex topics. Color & Contrast.com is a guide for beginning a journey into learning about visual perception and its affect on user interface design.

My role

Content creation and curation, design, and development.

Context and inspiration

A majority of my career has been working with color, and finding ways to create accessible color systems. Over the years, I've created accessible color systems for higher education (Ellucian design system) and for Adobe (Spectrum design system). These experiences led me to create the tool Leonardo, which provides access to color science as a tool in color palette creation.

Over time, I began collecting my own resources on color and contrast perception. I learned primarily from optometry and color science text books, which can be difficult to understand.

Simultaneously, I began noticing an influx of articles, tools, and statements from the design industry that promote falsehoods or misinterpretation of perception and science. Designers are becoming more interested in the science of visual perception, but fall victim to popular click-bait articles that only convolude the facts or obstruct their journey to understanding these concepts.

This inspired me to release Color & Contrast.com as the go-to resource for nearly anything a designer needs to know, or would want to know, about color science, color perception, and contrast perception, along with various aspectso of vision to provide more detail about inclusive design.

Digestible content

A primary goal was to make the content accessible to designers. Every topic was written to be as concise and approachable as possible.

Actionable insights

Aside from learning these topics, designers need a clear understanding of how they affect user interface design. Certain topics are clear, whereas others may be very obscure. For this reason, each topic has actionable insights to help designers in their daily work.

Interactive examples

Most topics on Color & Contrast.com include interactive examples or demonstrations. These small tools provide a great way to learn beyond what the written word can accomplish. By interacting with these examples, sighted visitors can grasp a better sense of the topic and how it may affect interface design.

White's illusion example with slider to separate or bring together the midtone gray bars, helpful in demonstrating the appearance of the gray tone based on its surroundings (due to lateral inhibition).