Lyft Open Sources ColorBox Algorithm for Building Accessible Color Systems

September 27, 2018

lyft-open-sources-colorbox-algorithm-for-building-accessible-color-systems Theme Builder Layout

Lyft has open sourced its color algorithm for creating an accessible color system. The company’s design team also packaged the algorithm as a web tool called ColorBox. It makes it easy for anyone to produce color sets with accessible contrast ratios, as outlined in the WCAG 2.0 standards.

“We made accessibility a cornerstone of our new color system,” Lyft designer Kevyn Arnott said. “We wanted to remove the need to manually check color contrast using third-party tools, and we needed to make it dead-simple for everyone to create accessible products.”

Arnott’s post “Re-approaching color” describes how his team created the algorithm and why it was necessary. As Lyft’s design and engineering teams grew, it became apparent that color naming and selection was not consistent across their products. With thousands of people building products that rely on color, scaling a color system becomes vitally important.

Lyft used what they had already done with color naming and selection and created an algorithm that would standardize the progression of lightness-to-darkness across color hues. The result is that every color 0–50 is accessible (4.5:1) on black and every color 60–100 is accessible (4.5:1) on white.

ColorBox is a mesmerizing and powerful tool to play with. It has inputs for the number of steps, hue, saturation, and luminosity. Each input also comes with different preset curve options, offering greater control over how colors progress in hue and saturation.

“This algorithm allows us to remove all the dependencies we previously had with color selection, so if we have a new designer working on this or we change tools or monitors, we’ll still have the same outcome,” Arnott said. “This algorithm also enables us to quickly modify or scale color as we need to over time.”

Many companies and open source projects seem to be short on accessibility experts, so a tool targeted at making accessible color systems more approachable is a welcome contribution. The JavaScript color algorithm is open source on GitHub (Apache 2.0 license) and can be modified for any project’s specific needs.

Share this article:

eHost-square-ad Theme Builder Layout

We’re listening.

Have something to say about this article? Share it with us on Facebook, Twitter or LinkedIn:


Related Posts

initial-documentation-for-block-based-wordpress-themes-proposed Theme Builder Layout

Initial Documentation for Block-Based WordPress Themes Proposed

In a pull request on the Gutenberg repository yesterday, Riad Benguella created an initial document that outlines how block-based WordPress themes might work. While the document is merely a starting point for the conversation, it is a set of ideas that will likely...

new-google-search-console-report-checks-site-speed Theme Builder Layout

New Google Search Console report checks site speed

Edwin Toonen Edwin is an experienced writer, editor & content manager. Before joining Yoast, he spent years honing his skill at The Netherlands’ leading web design magazine. Google is rapidly expanding the capabilities of Search Console — its must-have tool for...

black-friday-banner-gone-wrong-advertising-in-free-plugins Theme Builder Layout

Black Friday Banner Gone Wrong: Advertising in Free Plugins

Screenshot of the Yoast Black Friday AdOn November 28, millions of people awoke to a Black Friday ad on nearly every page of their WordPress admin, courtesy of the Yoast SEO plugin. That day also coincided with the U.S. Thanksgiving holiday, so it left freelancers and...

Get ALL Your SEO, WordPress & Divi News

Join Our Daily Roundup

SEO News and More

SEO News and More

Subscribe ToThe Weekly SEO Trade News Updates

Get the latest SEO, SEM and SMM marketing intel, tips and tricks from one of the best SEO Gurus online. 

Every Tuesday morning we send out an aggregated email listing all new posts on SEO Trade News.

Excellent! Now check your email to confirm your subscription.