1843335 - Color contrast is not sufficient for the highlight used for filtered properties on Light theme

Status: RESOLVED FIXED

(DevTools :: Inspector, defect, P2)

Description

[Nicolas Chevobbe [:nchevobbe]]

Attachment: CleanShot 2023-07-13 at 16.46.58.png

Color contrast is not sufficient for the highlight used for filtered properties on Light theme:
the color contrast ratio is 1.7:1 for the light yellow highlight backround against white page background while it’s expected to be 3:1 and higher for essential UI and color-only indication

besides changing the color of the highlight, it’s possible to add a visual icon, side border or any other filter indication to the highlighted properties to avoid relying on color alone

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The severity field for this bug is set to S3. However, the accessibility severity is higher, .
:jdescottes, could you consider increasing the severity?

For more information, please visit BugBot documentation.

Comment 2

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1843335 - [devtools] Add border to matching filter element in rules view. r=#devtools-reviewers,#accessibility-frontend-reviewers.

Since it would be tricky to get a color that would give us a good contrast,
we add a bottom border to matching elements to differentiate them from the
other ones.
This also matches the style that we have in Debugger search results.

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/6e0f177caa13
[devtools] Add border to matching filter element in rules view. r=devtools-reviewers,ochameau,accessibility-frontend-reviewers,ayeddi.

Comment 4

[Iulian Moraru]

https://hg.mozilla.org/mozilla-central/rev/6e0f177caa13