+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: Matt Mullenweg Publishes TED Talk on the Future of Work, Prepares to Launch New Distributed.blog Website

WPTavern: Matt Mullenweg Publishes TED Talk on the Future of Work, Prepares to Launch New Distributed.blog Website Matt Mullenweg is teasing out a new website at distributed.blog with the tagline “The future of work is here.” It’s not clear yet whether subscribers to the mystery blog will be on board for blog posts, a new […]

Read more
WPTavern: WPBrigade Patches Critical Vulnerability in Simple Social Buttons Plugin

WPTavern: WPBrigade Patches Critical Vulnerability in Simple Social Buttons Plugin WPBrigade, the developers behind the Simple Social Buttons plugin, have patched a critical privilege escalation vulnerability. The security issue was discovered by the team at WebARX. Developer and researcher Luka Šikić summarized the vulnerability in a post published this week: Improper application design flow, chained […]

Read more
WPTavern: WPWeekly Episode 345 – The Relationship Between Corporate Cash and Open Source Software

WPTavern: WPWeekly Episode 345 – The Relationship Between Corporate Cash and Open Source Software In this episode, John James Jacoby and I discuss a thought-provoking post published by Morten Rand-Hendriksen that takes a deep look at equity in open source software. Morten suggests that the mantra of decisions are made by those who show up […]

Read more