Redesign & Relaunch: Oomph’s Color Accessibility Tool for Designers gets a Redesign

It’s been a long time since the Hack Day that launched ColorCube 1.0 — almost exactly 5 years, in fact. We are excited to have redesigned the tool to make it easier to use and to also give ourselves the opportunity to explore some new technology in the process.

Say Hello to AccessibleColor.design

Formerly called ColorCube, AccessibleColor.design (ACd) is a tool built by developers for designers. It’s a tool that anyone can use, but the way it allows visitors to adjust colors to reach a passing threshold without the need for Photoshop or similar tools makes it perfect for designers.

The intention of the tool was always to display and manipulate color in a list. When we devised the interface, we noticed that so many of the other tools deal with one color pair at a time (this color text on top of that colored background). We wanted our tool to display a dense set of information — from a list of colors, show them with white, black, and one more color from the same lists. Then, allow the visitor to adjust the colors to a passing grade, as well as compare one color to another specific color without reloading the interface.

Watch our explainer video overview on Loom (5 minutes)

Highlights of the Redesign

The previous version of the tool was put up very quickly, and did not use a responsive design. Making a tool that displays dense information work for mobile was not our first priority, but now the interface has been simplified and so a move to responsive design was easier. While mobile traffic might continue to be low for a tool such as this, it is more likely that one might want to shrink the viewport to fit it on a large monitor alongside a website or design that someone is currently evaluating.

The design also greatly simplifies the output in the interface, making it easier to understand at a glance whether a particular color pair is passing or not. The previous tool highlighted values that were “edge”, meaning that they passed, but just barely. We found that this was confusing and did not add value to someone’s experience — so we removed it. The result is a more streamlined and clutter-free interface.

The previous ColorCube interface
The updated ACd interface

Functional Improvements

In addition to fixing a few bugs in the color calculations, we added new controls. Visitors can now specify a custom value for the default “light” and “dark” colors. Maybe your design does not use a white background or maybe nothing even gets to true black. Those colors can now be adjusted to meet your design.

The interface now takes advantage of operating system color mode preferences — ”Light” or “Dark” modes. These change the perceptions of the colors as well, so a visitor can override their OS setting in the interface and flip between light or dark modes as many times as they like.

Finally, a History tab has been added and the browser’s LocalStorage is used to save a history of color palettes that are provided to the tool. Going back to a previous color palette is easy, and any palettes from the list can be permanently removed as well.

Functional Enhancements

Internal projects are our chance to experiment with some new ideas and technology. We used this opportunity to add a few fun features.

One of these was the addition of a “Colors from image” feature. Upload an image, and the tool will pull out dominant colors and provide it as a new color palette to evaluate. Besides being fun and a source of color inspiration, this can be useful when a brand logo file has multiple colors that need to be evaluated.

Another enhancement was to add features that support Progressive Web Apps (PWAs). With a service worker in place and a little bit of extra code, the tool can now be recognized as a PWA, which allows it to be “installed” on a smartphone. It will work offline, syncing later as needed, and can be added to a home screen like any other native App without having to go through the App store. This was a fun enhancement that also taught our team a bit about how to make it all happen.

Future Improvements

Our GitHub issues list contains ideas we have sourced from the people who use the tool the most. Contribute your ideas if you use AccessibleColor.design for your next project. We hope to roll out more incremental improvements as we continue to use this project as a way to learn and contribute something valuable to the accessibility community.

Related tags: Branding

ARTICLE AUTHOR

More about this author

J. Hogue

Director, Design & User Experience

I have over 20 years of experience in design and user experience. As Director of Design & UX, I lead a team of digital platform experts with strategic thinking, cutting-edge UX practices, and visual design. I am passionate about solving complex business problems by asking smart questions, probing assumptions, and envisioning an entire ecosystem to map ideal future states and the next steps to get there. I love to use psychology, authentic content, and fantastically unique visuals to deliver impact, authority, and trust. I have been a business owner and real-estate developer, so I know what is like to run a business and communicate a value proposition to customers. I find that honest and open communication, a willingness to ask questions, and an empathy towards individual points of view are the keys to successful creative solutions.

I live and work in Providence, RI, and love this post-industrial city so much that I maintain ArtInRuins.com, a documentation project about the history and evolution of the local built environment. I help to raise two amazing girls alongside my equally strong and creative wife and partner.