Grayed out links: Lighthouse complains about insufficient contrast

Question

I want to show grayed-out placeholder text on my website for months where there is no newsletter.

Lighthouse (in Chrome Dev Tools) complains that these grayed-out items "do not have sufficient contrast ratio", but that is intentional.

Is there any way to annotate the elements to explain to Lighthouse (and any screen-readers) of my intention—i.e. that they should be ignored?

Answer 1

Any errors in Lighthouse can be safely ignored. There's nothing you need to do here.

As per Success Criteria 1.4.3 Contrast (Minimum) in WGAC 2.1, you are not required to maintain color contrast ratios for text or images that are part of an "inactive user interface component", which includes disabled text.

Success Criterion 1.4.3 Contrast (Minimum)

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:

...

Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.

https://www.w3.org/TR/WCAG21/#contrast-minimum

This interpretation is supported by WebAIM, which states:

WCAG 2.0 defines four types of "incidental" text that are not required to meet the contrast requirements.

Inactive: An inactive element, like a disabled Submit button ( Submit ), is identified visually by its lower-contrast state...

https://webaim.org/articles/contrast/#incidental