+
+
+
+
+ );
+}
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/accessible-color-descriptions.mdx b/packages/dev/s2-docs/pages/react-aria/blog/accessible-color-descriptions.mdx
new file mode 100644
index 00000000000..b598de46ba3
--- /dev/null
+++ b/packages/dev/s2-docs/pages/react-aria/blog/accessible-color-descriptions.mdx
@@ -0,0 +1,183 @@
+{/* Copyright 2025 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License. */}
+
+import bundleSizeImageUrl from 'url:../../../../docs/pages/assets/bundle-size.webp';
+import initialVideoUrl from 'url:../../../../docs/pages/assets/color-picker-initial.mp4';
+import finalVideoUrl from 'url:../../../../docs/pages/assets/color-picker-final.mp4';
+
+import {BlogPostLayout} from '../../../src/Layout';
+export default BlogPostLayout;
+
+import docs from 'docs:@react-spectrum/s2';
+import React from 'react';
+
+export const tags = ['color picker', 'color', 'internationalization', 'localization', 'components', 'accessibility', 'react spectrum', 'react'];
+export const description = 'Recently, we released a suite of color picker components in React Aria and React Spectrum. Since colors are inherently visual, ensuring these components are accessible to users with visual impairments presented a significant challenge. In this post, we\'ll discuss how we developed an algorithm that generates clear color descriptions for screen readers in multiple languages, while minimizing bundle size.';
+export const date = '2024-10-02';
+export const author = 'Devon Govett';
+export const authorLink = 'https://x.com/devongovett';
+export const hideNav = true;
+
+# Accessible Color Descriptions for Improved Color Pickers
+
+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](../ColorArea.html), channel-based [ColorSlider](../ColorSlider.html), circular [ColorWheel](../ColorWheel.html), preset [ColorSwatchPicker](../ColorSwatchPicker.html), and a hex value [ColorField](../ColorField.html). You can compose these individual pieces together to create a full [ColorPicker](../ColorPicker.html) with whatever custom layout or configuration you need.
+
+## Initial accessibility experience
+
+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](https://www.w3.org/WAI/ARIA/apg/patterns/slider/) to implement ColorArea, ColorSlider, and ColorWheel, and [listbox](https://www.w3.org/WAI/ARIA/apg/patterns/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!
+
+
+
+## Improving screen reader announcements
+
+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](https://procato.com/rgb+index/?css) and the [CSS named color keywords](https://developer.mozilla.org/en-US/docs/Web/CSS/named-color), and used the [Delta E](https://en.wikipedia.org/wiki/Color_difference) 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!
+
+However, despite the improvement, this approach presented several challenges. First, it required a huge number of strings for all of the color descriptions. We had almost 700 named colors, each of which needed to be translated into the 34 different languages we support, resulting in almost 24,000 strings measuring over 1 MB gzipped in bundle size.
+
+
+
+
+In HSL, certain hues also appear to shift as the lightness changes — for example, blue tends to shift toward purple as it gets lighter. This would lead to perceptually inaccurate descriptions, where colors that appear purple might be described as blue. OKLCH resolves this issue by maintaining a consistent hue across all lightness levels.
+
+HSL
+
+ OKLCH
+
+
+
+These properties of OKLCH allow us to generate perceptually accurate descriptions for any color. Once a color is mapped to the OKLCH color space, we determine its hue name by dividing the color wheel into segments. Since the hue channel is measured in degrees from 0 to 360, it's simple to find the closest hue name using the angles of each segment.
+
+
+
+ HSL
+
+
+
+ OKLCH
+
+
+ {[
+ [334, 362, 'Pink'],
+ [2, 32, 'Red'],
+ [32, 71, 'Orange'],
+ [71, 115, 'Yellow'],
+ [115, 155, 'Green'],
+ [155, 220, 'Cyan'],
+ [220, 274, 'Blue'],
+ [274, 302, 'Purple'],
+ [302, 334, 'Magenta']
+ ].map(([start, end, name]) => {
+ let center = (360 - (start + (end - start) / 2) + 180) * Math.PI / 180;
+ let radius = 280 / 2;
+ return (
+
+
+ {name}
+
+ )
+ })}
+
+
+If a hue falls at least halfway between two segments, the names of both segments are combined. For example, a hue between red and orange would be described as “red orange”. These combinations are separate localized strings in order to account for languages that have specific terms for mid-hues, such as “Rotorange” in German.
+
+There are also a few additional special cases. For instance, dark orange is referred to as “brown”, while darker yellows tend to appear more green and are described as “yellow green”.
+
+
+
+
+The hue name is combined with lightness (very dark, dark, light, very light) and chroma (grayish, pale, and vibrant) descriptors based on ranges in the L and C channels of the OKLCH color space to create a complete color description.
+
+
+
+
+ Orange
+
+ Brown
+
+
+
+
+ Yellow
+
+ Yellow Green
+
+
+
+
+The order that the hue, chroma, and lightness descriptors are combined varies by language. For example in English we say `"{lightness} {chroma} {hue}"`, but in Italian the order is `"{hue} {chroma} {lightness}"`. This flexibility is achieved by using placeholders, allowing our translators to determine the appropriate arrangement for each language.
+
+Check out the color picker below to see the results of this algorithm:
+
+```tsx render
+'use client';
+import {ColorPicker} from 'react-aria-components';
+import {ColorSwatch} from '@react-spectrum/s2';
+
+// TODO: No ColorEditor in S2
+
+
+
+ Very Light
+
+ Light
+
+
+ Dark
+
+ Very Dark
+
+ Lightness
+
+
+
+ Grayish
+
+ Pale
+
+
+ Vibrant
+
+ Chroma
+
+
+ }
+
+
+