+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: AMP Plugin for WordPress Version 1.0 Introduces Gutenberg-Integrated AMP Validation

WPTavern: AMP Plugin for WordPress Version 1.0 Introduces Gutenberg-Integrated AMP Validation Version 1.0 of the official AMP plugin for WordPress was released on the eve of WordCamp US, after two years in development by contributors from Automattic, XWP, and Google. This first stable version has a massive changelog with 30 people credited for their contributions. […]

Read more
WPTavern: WordPress 5.0 “Bebo” Released, Lays A Foundation for the Platform’s Future

WPTavern: WordPress 5.0 “Bebo” Released, Lays A Foundation for the Platform’s Future In 2016 at WordCamp US in Philadelphia, PA, Matt Mullenweg announced to the world that a new post and page editor would be coming to WordPress. “The editor does not represent the core of WordPress publishing,” Mullenweg said. His vision of the editor […]

Read more
Dev Blog: WordPress 5.0 “Bebo”

Dev Blog: WordPress 5.0 “Bebo” Say Hello to the New Editor We’ve made some big upgrades to the editor. Our new block-based editor is the first step toward an exciting new future with a streamlined editing experience across your site. You’ll have more flexibility with how content is displayed, whether you are building your first […]

Read more