Open Bug 1328586 Opened 8 years ago Updated 4 months ago

Non visible node attribute name fail contrast score

Categories

(DevTools :: Inspector, defect, P2)

Product:
DevTools
Component:
Inspector
Type:
defect

Tracking

(firefox53 affected)

Tracking Flags:
Tracking Status
firefox53 --- affected

People

(Reporter: alice0775, Unassigned)

References

(Blocks 1 open bug)

Details

(Keywords: ux-visual-hierarchy)

str 1. open Dom Inspector 2. Expand <head> Actual Results: low contrast Expected Results: Enough contrast
Keywords: ux-visual-hierarchy
Severity: normal → major
The low contrast in <head> comes from the fact that <head> (and its children) isn't rendered in the page. Any element that's not displayed is faded out a little bit in the inspector. This is a feature that was added in bug 911209. Question: do you find it harder to read with the light or dark theme, or both? I used Lea Verou's online contrast checker tool to verify this. Light theme: - tag names: 1.9, fails WCAG 2.0 http://leaverou.github.io/contrast-ratio/#%2395C3E7-on-white - attribute names: 2.3, fails WCAG 2.0 http://leaverou.github.io/contrast-ratio/#%23EE90A9-on-white - attribute values: 2.0, fails WCAG 2.0 http://leaverou.github.io/contrast-ratio/#%23AEAFFF-on-white - < > and = characters: 2.7, fails WCAG 2.0 http://leaverou.github.io/contrast-ratio/#%239B9EA4-on-white Dark theme: - tag names: 2.8, fails WCAG 2.0 http://leaverou.github.io/contrast-ratio/#%23369659-on-%233A3F4D - attribute names: 2.6, fails WCAG 2.0 http://leaverou.github.io/contrast-ratio/#%237B7B95-on-%233A3F4D - attribute values: 3.3, passes AA for large text http://leaverou.github.io/contrast-ratio/#%23919189-on-%233A3F4D - < > and = characters: 2.1, fails WCAG 2.0 http://leaverou.github.io/contrast-ratio/#%23657080-on-%233A3F4D Although a bit better with the dark theme, both themes lack contrast when displaying hidden elements in the inspector. The way elements are shown as faded out is by using a slightly lower opacity than normal element. We could increase the opacity but the risk is that we then would hardly notice the difference between shown and hidden elements. So maybe another visual cue is needed to tell users that elements are hidden.
Severity: major → normal
OS: Windows 10 → All
Priority: -- → P2
Hardware: x86 → All
(My opinion, all dev tools are low contrast... Eyes get tired)
Product: Firefox → DevTools
Severity: normal → S3

Colors were updated a bit:

Light Dark
tagname 4.7:1 AA 5.1:1 AA
attribute name 2.5:1 FAIL 3.5:1 FAIL
attribute value 6.7:1 AA 6.3:1 AA

We should look into attribute name at least

Blocks: dt-2025-h1-P2
Summary: low contrast of dom tree, especially under head tag → Non visible node attribute name fail contrast score
You need to log in before you can comment on or make changes to this bug.