+44 0330 223 3428
Call Us
+44 0330 223 3428

WPTavern: Lyft Open Sources ColorBox Algorithm for Building Accessible Color Systems

WPTavern: Lyft Open Sources ColorBox Algorithm for Building Accessible Color Systems

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.


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…

Source: WordPress

Related Post
WPTavern: Clean Blocks: A Free Multipurpose WordPress Theme Compatible with Gutenberg

WPTavern: Clean Blocks: A Free Multipurpose WordPress Theme Compatible with Gutenberg Clean Blocks is a new free theme from Catch Themes that was released last week on WordPress.org. The design is suitable for businesses, agencies, freelancers, and other service professionals who require featured content, a portfolio, testimonials, a blog, and a services section. Clean Blocks […]

Read more
WPTavern: Laraberg, a Gutenberg Implementation for Laravel, is Now in Beta

WPTavern: Laraberg, a Gutenberg Implementation for Laravel, is Now in Beta The family of Gutenberg derivatives is expanding with the beta release of Laraberg, an implementation for Laravel. Maurice Wijnia, a developer at Van Ons, an agency based in Amsterdam, created Laraberg as an easy way for developers building applications with Laravel to integrate the […]

Read more
HeroPress: How the WordPress community helped me find my way

HeroPress: How the WordPress community helped me find my way Este ensaio também está disponível em português. As I make a checklist of all the things I’ll have to pack to travel from São Paulo to Berlin, to attend WordCamp Europe 2019, I can’t stop thinking how hard the path to this point has been. […]

Read more