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

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

Run Lighthouse against the demo page at https://newcss.net/ and inspect the failing elements within

. Start with the a color rule using --nc-lk-1 and compare it with the header background and the suggested --nc-lk-2 workaround. Done means the Accessibility > Contrast audit no longer reports those links while retaining an acceptable appearance.