5.x image improvements
Simon Leadbetter, from the digital accessibility consultancy Kindera, reached out to us as part of the #AltAtSource campaign. The campaign seeks to improve digital accessibility by reducing friction around populating alt text by harnessing alt text and descriptions stored in XMP/IPTC metadata fields.
The campaign centers around encouraging:
- Hardware vendors to embed image descriptions — either human- and AI-generated — in an image’s metadata
- Image libraries to generate alt text automatically, and allow editors to edit and validate these descriptions
- CMS providers to automatically populate alt text embedded in the image metadata upon upload
We implemented the feature request in 5.10. Now, when an image is uploaded to Craft with alt text in the embedded metadata, it’s automatically used to populate the native alt text field.
Here’s a video that demonstrates how powerful this feature is.
Craft 6
We’re still hard at work on the Craft 6 design system. One of the biggest initiatives this quarter was introducing a contrast-based color palette.
We started building out the UI using Tailwind colors. While Tailwind provides a nice assortment of colors, we found that each color had inconsistent contrast ratios at the same color stop.
For example, on a white background:
- Yellow 500 has a contrast ratio of 1.9:1. It could be used as a decorative pop of color or background, but couldn’t be used for text or UI components.
- Indigo 500 has a contrast ratio of 4.6:1. It could be used for any text or UI components under the WCAG 2.2 AA guidelines.
At the same color stop — 500 in this example — each color had very different contrast ratios against a white background.
With no real consistency, choosing the correct color stop for components was becoming burdensome, since each color had to be tested in both light and dark modes to ensure it met contrast requirements.
And changing a single color in the UI meant everything had to be tested again.
So we were excited to discover that Adobe built an amazing solution to build color palettes based on color contrast ratios — Leonardo.
The Leonardo API takes several inputs, including:
- The colors in your palette
- Desired contrast ratios
- Background color lightness
The result is a set of color tokens with a consistent contrast ratio against the given background at each color stop.
Here’s part of our light color theme as an example:
The API also makes it straightforward to make this palette adaptive by adjusting the background lightness input to generate a new set of colors.
As a result, while building our design system components, we can generally set our component colors in a single color mode and not worry about contrast when switching between light and dark modes.
Similar to Adobe Spectrum’s color system, we’ll have two color palettes:
- An adaptive color palette that will update colors based on light and dark modes. These color tokens will be used in instances where maintaining contrast is essential — such as body text over the control panel background or input borders.
- A static color palette that will not change between light and dark modes. This palette will be used when maintaining color consistency across modes is important.
We’re optimistic that using Leonardo will make color selection much more intuitive and accessible moving forward.
If you have any questions or suggestions, please reach out to us at accessibility@craftcms.com.