APA has no accessibility concerns regarding the substance of CSS Color Module Level 5 (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.]
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.
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.
<pre> blocks—rendering bugThe previews inside code example blocks can’t expand outside of those blocks, so aren’t drawn fully in those cases.
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, i.e. (1) separating the segments; (2) using more contrasting colours; and/or (3) using hollow and solid segments to ease differentiation.
<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.The above two issues apply here too.
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.
<img> needs alt text such as “A
color swatch, in a grid layout”.<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.Color previews are missing.
<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.<div>s and
<span>s).