1476590 - Improve color contrast for cached resource rows

Status: RESOLVED FIXED

(DevTools :: Netmonitor, enhancement, P3)

Description

[Florens Verschelde :fvsch]

Attachment: Network panel screenshot showing cached rows (light theme)

In the table view, cached resources are grayed out. This is achieved with `opacity: 0.6` on the cell content, as far as I can tell.

In the light theme, this results in text-to-background contrast that is below the WCAG 2 recommended ratio (4.5:1), often around 3.0:1.

Contrasted enough:
- cached response on a pure white background

Not contrasted enough:
- cached response on a gray background (every other row)
- cached response on a blue background (when selected)

In particular, the selection style is originally #FFFFFF on #0074E8. This is an exact 4.5:1 contrast:
https://webaim.org/resources/contrastchecker/?fcolor=FFFFFF&bcolor=0074E8

This means that any partial opacity for the text will end up below 4.5:1, and should be avoided.

Proposed fix:
1. Change the "cached response" opacity to 0.7 or 0.8 instead of 0.6, to keep enough contrast.
2. The selected row should keep 1.0 opacity.

Comment 1

[Florens Verschelde :fvsch]

Attachment: network-cached-opacity.png

Illustration of the proposed fixed (using the dark theme here):

1. Opacity at 0.7 instead of 0.6
2. Keep 1.0 opacity for the selected row

It's a CSS-only change in:

devtools/client/netmonitor/src/assets/styles/RequestList.css#588

.request-list-item.fromCache > .requests-list-column:not(.requests-list-waterfall) {
  opacity: 0.6;
}

to:

.request-list-item.fromCache:not(.selected) > .requests-list-column:not(.requests-list-waterfall) {
  opacity: 0.7;
}

Note that this is probably enough to have WCAG-compliant contrasts in the light mode, but not in the dark mode because the normal contrast is not compliant to begin with, event at 100% opacity and on the darker rows (#909090 on #2A2A2E = 4.48:1 contrast ratio). Still, it helps a bit.

Comment 2

[Florens Verschelde :fvsch]

Just tested contrast ratios for the light theme.

At 0.6 opacity:

- 3.58:1 for white rows
- 3.20:1 for light grey rows

At 0.7 opacity:

- 4.73:1 for white rows
- 4.22:1 for light grey rows

Both are close enough to the 4.50:1 ratio recommended by WCAG2.
I also tried higher opacity (0.9 and 0.8) but then it's hard to notice the difference with normal rows.

Comment 3

[Florens Verschelde :fvsch]

Attachment: bug-1476590-netmonitor-cached-row-contrast.patch

Changes:

- Keep full opacity for selected rows
- Bump opacity for cached rows from 0.6 to 0.7

Comment 4

[Florens Verschelde :fvsch]

Comment on attachment 8993792 [details]
network-cached-opacity.png

Hi Victoria, two questions about this proposal:

1. Do you think raising the opacity slightly here (0.7 instead of 0.6) still works for differentiating "cached" rows from normal rows?
2. My intuition was that if a cached rows is selected, it should be full opacity because the user is more likely to want to check out the detailed information in the row and in that case it’s even more important to have accessible contrast. But then we’re losing the visual hint for "cached" (but the word is still visible). So it’s a trade-off. What do you think?

Comment 5

[Victoria Wang [:victoria]]

Comment on attachment 8993792 [details]
network-cached-opacity.png

Hi Florens, 

Wow, all of the dark mode Network table seems hard to read -- I'm glad you're working on this! Yes, your idea of full opacity for selected rows sounds great. 

For light mode, I usually use --gray-50 for secondary info, but the idea of bumping up the opacity on cached rows seems fine too.

For dark mode I would suggest changing the base unselected table text from --theme-body-color to --gray-40, to lighten all of that up.

Comment 6

[Florens Verschelde :fvsch]

Attachment: bug-1476590-netmonitor-table-text-contrast.patch

Expanded the patch a bit per Victoria's feedback.

- Use grey-40 (#b1b1b3) for the dark theme table text, instead of the inherited #909090.
- Use 0.7 opacity instead of 0.6 for cached rows, to keep accessible contrasts in the light theme and not go too far from those in the dark theme.
- Keep full opacity for selected cached rows.

Comment 7

[Florens Verschelde :fvsch]

Attachment: netmonitor-table-contrast-fix.png

Results of the proposed patch (before/after composite screenshot).

Comment 8

[Gabriel Luong [:gl] (ΦωΦ)]

Comment on attachment 8996136 [details] [diff] [review]
bug-1476590-netmonitor-table-text-contrast.patch

Review of attachment 8996136 [details] [diff] [review]:
-----------------------------------------------------------------

::: devtools/client/netmonitor/src/assets/styles/variables.css
@@ +22,4 @@
>  :root.theme-light {
>    --theme-body-color: var(--grey-70);
>  
> +  --table-text-color: var(--grey-70);

I am wondering if this should be grey-50 since this is what Victoria said. Can you check if this is ok with Victoria?

Comment 9

[Florens Verschelde :fvsch]

I think Victoria suggested grey-50 for the cached rows.

I did not use that exact value because lightening the cached rows is implemented with partial opacity, and impacts things like the [200] status badges (which use different colors). Changing the text color instead of using opacity would be an option if we want to keep full opacity for status badges.

What we have currently for the light theme:

- grey-70 for table rows (obtained by overriding --theme-body-color, which is normally grey-60)
- grey-70 at 0.6 opacity for cached rows

In my patch I bumped the "cached" opacity to 0.7 so that we can still pass WCAG2 guidelines (or come close enough).

I also assigned the grey-70 color for the light theme, and another contrasting color for the dark theme, to a new --table-text-color variable. The rationale is that it allows setting the table text color in the same ways for both themes, and that it would ultimately allows us to remove the --theme-body-color override. (IMO variables defined in devtools/client/themes/variables.css should not be overridden in a specific tool's views, because it makes it harder to reason about this shared design language.)

Comment 10

[Gabriel Luong [:gl] (ΦωΦ)]

r+ assuming Victoria is also okay with the rationale from comment 9

Comment 11

[Victoria Wang [:victoria]]

Yep, sounds good! Thanks Florens!

Comment 12

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/mozilla-inbound/rev/add7c894216a
Increase netmonitor table text contrast in dark theme and for cached rows. r=gl

Comment 13

[Eliza Balazs [:ebalazs_]]

https://hg.mozilla.org/mozilla-central/rev/add7c894216a