Recently, we released a suite of color picker components in React Aria and React Spectrum. These components help users choose a color in various ways,

Accessible Color Descriptions for Improved Color Pickers

submited by

Style Pass

2024-10-02 23:00:03

Recently, we released a suite of color picker components in React Aria and React Spectrum. These components help users choose a color in various ways, including a 2D ColorArea, channel-based ColorSlider, circular ColorWheel, preset ColorSwatchPicker, and a hex value ColorField. You can compose these individual pieces together to create a full ColorPicker with whatever custom layout or configuration you need.

Accessibility is at the core of all of our work on the React Spectrum team, and ColorPicker was no exception. However, these components presented a significant challenge: colors are inherently visual, so how should we make them accessible for users with visual impairments?

Our initial implementation followed the typical ARIA patterns such as slider to implement ColorArea, ColorSlider, and ColorWheel, and listbox to implement ColorSwatchPicker. This provided good support for mouse, touch, and keyboard input, but the screen reader experience left something to be desired. Out of the box, screen readers would only announce raw channel values like “Red: 182, Green: 96, Blue: 38”. I don’t know about you, but I can’t imagine what color that is just by hearing those numbers!

We set out to improve the screen reader experience using textual descriptions of the colors that a user selected. To do this, we compiled an extensive list of color names from sources such as Procato and the CSS named color keywords, and used the Delta E algorithm to match the user’s selected color to the closest color name. This resulted in much more intuitive screen reader announcements such as “Moderate Cornflower Blue” instead of numeric values like “Hue: 200 degrees, Saturation: 60%, Lightness: 62%”. This was a significant improvement!