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

Fails Lighthouse's "color contrast" accessibility audit (Background and foreground colors do not have a sufficient contrast ratio) #43

Open
zenflow opened this issue Aug 18, 2020 · 0 comments

Comments

@zenflow
Copy link

zenflow commented Aug 18, 2020

Problem

You can easily reproduce this by running Lighthouse against the demo page @ https://newcss.net/.

In the report, under Accessibility -> Contrast, you will see this message:

Background and foreground colors do not have a sufficient contrast ratio.
Low-contrast text is difficult or impossible for many users to read. Learn more.

"Learn more" links to https://web.dev/color-contrast/

Below that we see a list of the failing elements. They are all the <a> elements within the <header> element.

So the color for <a> elements is fine against the body background color, but not dark enough against the header background.

Workaround

To fix this locally in my project, I override this new.css css rule:

a {
    color: var(--nc-lk-1);
}

with this custom css rule:

a {
    color: var(--nc-lk-2);
}

But I think this makes it less pretty.

Suggested solution

Unfortunately, I'm not really sure what a good solution would be, since I'm not much of a designer, but I thought I would bring up the issue at least.

Off-topic comments

Thanks for the sweet css framework! I'm really enjoying it! <3

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant