crates.io
crates.io copied to clipboard
Enable color-contrast accessibility test and fix all violations
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.
Colorable can be handy when testing new colour combinations.
I had this idea to use font size and weight to communicate information hierarchy rather than using grey (specifically $main-color-light)

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 ;)