crates.io icon indicating copy to clipboard operation
crates.io copied to clipboard

Enable color-contrast accessibility test and fix all violations

Open carols10cents opened this issue 7 years ago • 2 comments
trafficstars

Once #1227 is merged in, address this comment:

There are multiple elements that currently fail this test. I have disabled it since I think it needs to be addressed by someone more inclined towards design.

by changing tests/axe-config.js to remove:

'color-contrast': {
            enabled: false,
}

run npm test and make changes to fix all violations where we're using colors that don't contrast enough.

carols10cents avatar Jan 14 '18 20:01 carols10cents

Colorable can be handy when testing new colour combinations.

sorin-davidoi avatar Jan 14 '18 22:01 sorin-davidoi

I had this idea to use font size and weight to communicate information hierarchy rather than using grey (specifically $main-color-light)

image

Notice the changes to the version number in the heading and the metadata titles on the right.

Dealing with the hyperlink colour is trickier. It's very hard to pick greens with sufficient contrast. There's a reason why blue hyperlinks are ubiquitous ;)

p-jackson avatar Jan 22 '19 11:01 p-jackson