WPT pass/fail pie charts have low contrast, exacerbate red-green anomalouus color vision

[svgeesus]

Originally reported as an issue on CSS Color 5,

• [css-color] Test result indication accessibility w3c/csswg-drafts#7689

but not specific to that specification.

[svgeesus]

The generated html for one pie chart is

<span title="firefox 9/29" class="wpt-result" 
style="background: conic-gradient(forestgreen 111.72413793103449deg, darkred 0deg);"></span>

[svgeesus]

@matatk

[matatk]

Re-posting the suggestion from the original issue, for convenience:

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.

Please ping me if you have any questions.

Update: just adding this link to close the loop back to the a11y-request issue: This comment is from the APA WG and relates to our review of CSS Color Module Level 5.

[tabatkins]

Hm, I chose the colors to have differentiable color brightnesses, without being excessive and causing color vibration. (I have a minor amount of red/green anomaly, and they look good to me now, but didn't when I was using CSS red and green.)

Happy to do something different, tho I'm currently just doing a conic-gradient() so anything beyond just changing the colors will require some more effort to make happen.

[svgeesus]

forestgreen is oklch(55.78% 0.1688 142.89) while darkred is oklch(39.986% 0.1641 29.234) so a Lightness difference of 15.

[tabatkins]

Right, that's what I said. 😃

[matatk]

Thanks @tabatkins, @svgeesus. Using the WCAG contrast ratio calculation, forestgreen and darkred have a ratio of 2.28:1. For adjacent non-text items that impart meaning, WCAG requires at least 3:1.

In the enlarged picture above, the colours seem much further apart to me than they did in the spec itself, but the small size of the charts on the page exacerbates the issue (for me, personally, at least). I acknowledge that there's work afoot on alternative contrast ratio algorithms—though I feel that some people will struggle to differentiate the parts of these charts. (I have a vision impairment; I'm actually very good with color, but find this difference somewhat low—though I am doing my best to talk from professional, rather than personal, experience.)

I have had another closer look at the screengrab above, and the spec on my screen, and the colours seem different (my green is more vibrant; the one above seems washed out), so there could be a colour profile issue exacerbating my perception of this (though, again, this is likely to be hard for some others to distinguish, too).

I can understand you may be concerned that if you were to meet a 3:1 ratio here, the colours would be somewhat distorted. Perhaps it would help to try separating out the slices of pie (though ACK regarding the CSS technique you're using being neat and concise). I also wondered about having a 'solid' section and a 'hollow' section for the chart.

[svgeesus]

I have had another closer look at the screengrab above, and the spec on my screen, and the colours seem different (my green is more vibrant; the one above seems washed out), so there could be a colour profile issue exacerbating my perception of this

It is a color profile issue, but on my end: Windows grabs the rgb values from the frame buffer but does not link these to the ICC profile of the screen. Since they are untagged, they get treated as sRGB values but here, they are the values on my wide gamut screen. So the grab looks washed out.

[svgeesus]

Agreed the WCAG 2.1 contrast is 2.28 while the APCA L^c is 18.8 if green is the text color, -19 if the red is the text color.

Changing forestgreen to lightgreen ups WCAG 2.1 to 7.06 and APCA L^c to 68.5 or -71 depending which is considered text.