Color contrast in spec

[michael-n-cooper]

Filed by private email.

I notice that the green text on green background (for the Editor's Notes) is not meeting color contrast. It is only 2.37 to 1. foreground color: #22bb22, background color: #e9fbe9
Gentle Suggestion: I think if you change it to foreground #008400/ background #e9fbe9

that it will pass.

P.S. Also...the Respec-pill only has color contrast of 1.19 (foreground color: #ffe9bf, background color: #ffd280, font size: 8.3pt, font weight: normal)

1

Gentle Suggestion: Would it be possible to change the white text in this respec pill to black?

P.P.S. Finally, the grey Respec text on the white button background only has a 4.4 to 1 ratio (foreground color: #787878, background color: #ffffff, font size: 8.3pt, font weight: normal)

ReSpec

Gentle suggestion: If you bump up the grey text to #767676 it will pass.

[michael-n-cooper]

Note many of these issues are with Respec or W3C styles and should be filed there.

[awkawk]

We should make sure to do an accessibility review of the TR document.

[steverep]

@awkawk, suggest changing title if you want this issue to track an accessibility review.

See w3c/respec#425 and w3c/respec#827 for other issues I've raised that still are not fixed in our publications.

[awkawk]

@michael-n-cooper Do we have a publication checklist that we could just add "accessibility review of Spec" to and then close this issue?

[michael-n-cooper]

We could add accessibility review to the QA checklist but I don't think it would advance accessibility. The problems we're encountering are with other tools we use, including the W3C TR styles that all TR documents must use, so a routine QA check of the guidelines won't help us.

We should use this issue as a trigger to get them fixed in other places. I've asked Roy to take a look at that. This may require looking at Respec Accessibility Issues and the TR styles. We may or may not be able to fix some problems by override styles using our guidelines CSS.

[jake-abma]

Looking at https://w3c.github.io/wcag21/guidelines/ there’s also a fail for the red vertical bar (W3C Editor’s Draft) at the left: https://www.w3.org/StyleSheets/TR/2016/logos/ED which has white text (#ffffff) on a red background with hex code: #ff1b00

Beside a fail for Color Contrast: SC 1.4.3 we also have a failure of Images of Text SC 1.4.5

Note: The image when scaling fastly looses sharpness as the image is very small, at https://www.w3.org/TR/UNDERSTANDING-WCAG20/ the image (when you still choose to use an image) is much bigger, staying sharper at zoom levels, see: https://www.w3.org/StyleSheets/TR/2016/logos/WG-Note

[ruoxiran]

For the green text on green background (for the Editor's Notes) is not meeting color contrast, I change the forground color in our guidelines CSS, change it to foreground #008400.

[michael-n-cooper]

I added Roy's color suggestion to the guidelines.css. The red color is no longer being used. Further style issues, unless very clearly caused by WCAG-specific style choices, should be filed in the TR Design repository.