Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enable color-contrast accessibility test and fix all violations #1233

Open
carols10cents opened this issue Jan 14, 2018 · 2 comments
Open

Enable color-contrast accessibility test and fix all violations #1233

carols10cents opened this issue Jan 14, 2018 · 2 comments
Labels
A-accessibility A-frontend 🐹 C-enhancement ✨ Category: Adding new behavior or a change to the way an existing feature works E-help-wanted

Comments

@carols10cents
Copy link
Member

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.

@sorin-davidoi
Copy link
Contributor

Colorable can be handy when testing new colour combinations.

@p-jackson
Copy link
Contributor

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

@locks locks self-assigned this Sep 7, 2019
@locks locks removed their assignment Apr 19, 2020
@Turbo87 Turbo87 added the C-enhancement ✨ Category: Adding new behavior or a change to the way an existing feature works label Feb 11, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
A-accessibility A-frontend 🐹 C-enhancement ✨ Category: Adding new behavior or a change to the way an existing feature works E-help-wanted
Projects
None yet
Development

No branches or pull requests

5 participants