CODEWITHSUNDEEP
htmlgoogle-chrome-devtoolsaccessibilitywai-arialighthouse
ᴇʟᴇvᴀтᴇ
ᴇʟᴇvᴀтᴇ

Reputation: 12751

Grayed out links: Lighthouse complains about insufficient contrast

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

enter image description here

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?

Upvotes: 4

Views: 1696

Answers (2)

Jonathan Pool
Jonathan Pool

Reputation: 399

You can tell assistive technologies that the inactive strings are to be ignored, but that will not help users who have trouble reading those strings, either because their vision is less powerful than average or because they are viewing the UI in poor light. Don’t you want them to understand those strings? If you don’t, why are those strings displayed at all? In fact, what good do they do for any user? Wouldn’t the UI be easier to understand and navigate if they simply were not displayed?

Upvotes: 0

Josh
Josh

Reputation: 4322

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

Upvotes: 3

Related Questions