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.
Post a Comment