You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
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:
"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:
with this custom css rule:
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
The text was updated successfully, but these errors were encountered: