Review of CSS Color Module Level 5

Hi all,

At long last, here are all the notes and suggestions I have made for CSS regarding their document, for the group's review. As discussed, we don't have anything pressing about the substance of the document. We do have a question for CSSWG about the color-contrast() function, and I found several accessibility issues, for which I intend to file separate GitHub issues that include suggestions. You can find all of this below in plain text (well, Markdown) format, and I've attached an HTML file which may be easier to navigate.

Best regards,


Matthew

APA has no accessibility concerns regarding the substance of [CSS Color Module Level 5](https://www.w3.org/TR/2022/WD-css-color-5-20220628/) (we reviewed the 2022-06-28 WD).

We're aware that `color-contrast()` has been pushed back to Level 6. However, we were wondering what are the use cases for this function? The function selects from a pre-determined list of colours; are there situations in which the answer could not have been determined at design time? We don't feel that this function is required in order to further accessibility, but we're happy to provide any needed support in adding it, if you wish to add it or something similar in future.

It's clear that a lot of effort has gone into making the document clear, but we did notice some accessibility barriers, particularly from the perspective of readers who may struggle with color perception. These concerns, with suggestions, are detailed below. *[APA Note: these will be filed as separate GitHub issues.]*

----

# Accessibility suggestions on the document's presentation

## General: color previews

### Naming colors

The color preview feature could actually be very helpful to people with vision impairments that currently have to rely on the text. Whilst they can currently access all of the detailed coordinates for every color, this doesn't give them much of a sense of what the color might look like, making the examples hard to follow. The document describes some of the "preview" colors, but not all.

I found a tool that gives you the closest color name to a given hex color, from an extensive palette of predefined colors. This sort of tool would give a good enough idea for most people who may be unable to perceive the colors directly. The color names could be generated as part of the document build process, and placed in visually-hidden text in the document. The text should also indicate if the colours are transparent.

One such tool is "color-to-name" (<https://github.com/stanleyfok/color-to-name>)—however, a small number of the color names in the palette may be considered vulgar, so they would either have to be filtered out, or a different tool selected. (I am looking into the latter, though so far this tool was the most expressive of the ones I found.)

I noticed that out-of-gamut colors are indicated by a red border on their previews, and they're always described in accompanying text as being out of gamut, which is helpful.

### Keyboard operability for the previews

The color previews can be hovered with the mouse. When this happens, they enlarge, covering some of the text behind. This is particularly useful if the preview is of a transparent color, as the text behind shows through the preview window. It is not possible to activate the preview with the keyboard, so keyboard-only users would likely miss out on this helpful feature.

### Previews in `<pre>` blocks—rendering bug

The previews inside code example blocks can't expand outside of those blocks, so aren't drawn fully in those cases.

## General: Test result indication

_This is quite possibly a bug in a library you're using, though I couldn't find any pointers after a brief search relating to WPT._

There's a low contrast difference between the two sections of the pie charts. This is particularly apparent in §4.

Suggestion: use techniques similar to those from [Figure 21 in the Understanding WCAG SC 1.4.11 document](https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html#figure-passing-pie-chart), i.e. (1) separating the segments; (2) using more contrasting colours; and/or (3) using hollow and solid segments to ease differentiation.

## §2.2

### Example 2

* This example has a figure with a descriptive caption. The `<img>` element lacks an `alt` attribute. I think the `alt` text should mention that the image shows three colours (the two inputs, and the mixed output) on a plane with two axes. The axes are labelled "a" and "b" and cross at the origin, which is in the centre of the plot. We are looking down the L axis onto an ab plane. After doing some research, I determined that LCH uses the same colour space as Lab, and an `<img>` that has `alt` text in Example 22 (in §3.6) refers to this plane as the CH plane. I assume it's convention to label the CH plane "a" and "b" but that does seem a little confusing.
* For someone who struggles to see the color, or low-contrast colors, it would be helpful to label the colors on the chart ("peru", "palegoldenrod" and "mixed" for the mixed color, in this case).

### Example 3

The above two issues apply here too.

## §3.6

### Example 22

In the spirit of the issue reported above, we don't feel this needs extensive `alt` text (though describing the axes and general situation would be helpful). However, it would be particularly helpful to ensure that the different colors can be identified on the plot, e.g. via labelling.

## §4.4

### Figure 5

* The `<img>` needs `alt` text such as "A color swatch, in a grid layout".
* The second part is marked up as a `<table>` but doesn't seem to be one semantically (it's just placing the text to match the layout of the color swatch above). Suggest applying `role="presentation"` to the table, to remove the tabular structure semantics (or you could re-code it using `<div>`s and `<span>`s). That would have the effect of linearizing the table from a screen reader perspective, but that would likely be less confusing than encountering a "table" without headers.

### Example 33

Color previews are missing.

## §5

### Figure 6

* The `<img>` needs an `alt` attribute that explains this is a color swatch in a grid formation (as per figure 5) but that circles are imposed on each grid square. The `<figcaption>` does a great job of explaining the rest.
* As with figure 5, this table should have the table semantics removed (or be re-coded using `<div>`s and `<span>`s).

-- 
Matthew Tylee Atkinson (he/him)
--
Principal Accessibility Engineer
TPG Interactive
https://www.tpgi.com

A Vispero Company
https://www.vispero.com

--
This message is intended to be confidential and may be legally privileged. It is intended solely for the addressee. If you are not the intended recipient, please delete this message from your system and notify us immediately.
Any disclosure, copying, distribution or action taken or omitted to be taken by an unintended recipient in reliance on this message is prohibited and may be unlawful.