Bringing consistency and order to the colors and codebase of Abt.com while promoting accessiblity
The web team had only one or two defined colors, leaving the developers to eyeball many colors and shoadows.
The Brief
Improve visual consistency, facilitate accessible design, and improve codebase consistency by defining a color system for Abt.com
The Color Analysis
I analyzed the website with projectwallace.com showed 100s of unique color declarations. I grouped these by similar hue and audited where the rules are used on the website.
The System
I created 9-step color scales based on the brand colors using the OK-HSL color space to maintain lightness perceptibility across hues.
I named the color variables based on a common lightness level making accessible color combinations easier to create. I trained the developers on this naming system to promote consistency, improve handoff communications and make their accessibility maintenance responsibilities easier.
Results
Number of CSS Colors before
1000+
After
51 CSS Variables
Conclusion
WIth the color system in place, the team is able to generate new designs with greater consistency, efficiency, and code reuse.