Page MenuHomePhabricator

"CR" and "V" columns are not colorblind-friendly
Open, LowPublic

Description

The font in the "CR" (code review) and "V" (verified) columns is too small, and its weight is too light, resulting in poor readability for color-blind people. In fact, I had to inspect the elements to confirm that they're red/green. The colors themselves are fine (I think), but the font should be bolded at the very least, and possibly its size should be increased, too.

I'm unsure whether this is worth reporting upstream, perhaps a local stylesheet would do it.

Event Timeline

The font in the "CR" (code review) and "V" (verified) columns is too small, and its weight is too light, resulting in poor readability for color-blind people.

My browser picks the font family Roboto with a size of 14 pixels and a default weight. The css selector is: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'. And that sounds fine to me.

In fact, I had to inspect the elements to confirm that they're red/green. The colors themselves are fine (I think), but the font should be bolded at the very least, and possibly its size should be increased, too.

Looks like the colors come from:

polygerrit-ui/app/styles/themes/app-theme.js
--vote-color-approved: #9fcc6b;
--vote-color-disliked: #f7c4cb;
--vote-color-neutral: #ebf5fb;
--vote-color-recommended: #c9dfaf;
--vote-color-rejected: #f7a1ad;

At least the contrast looks good, it should be at least 4.5.

I guess we can make it bold at least which apparently can be done via the voteChip CSS class which uses:

polygerrit-ui/app/styles/gr-voting-styles.js
:host {
  --vote-chip-styles: {
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 1em;
    box-shadow: none;
    box-sizing: border-box;
    min-width: 3em;
  }
}

My browser picks the font family Roboto with a size of 14 pixels and a default weight.

Same for me. However, IMHO it's too small. A font-size of 20px and weight bold is what I'd call acceptable. More similar to the old UI, and a good compromise in size.

At least the contrast looks good, it should be at least 4.5.

Yeah, and with the appropriate size it looks fine.

Change 671101 had a related patch set uploaded (by Hashar; owner: Hashar):
[operations/puppet@production] gerrit: make voting scores a bit more accessible

https://gerrit.wikimedia.org/r/671101

I have lost the dynamic on this task and forgot about it completely. Probably cause I was busy with other things immediately after the Gerrit upgrade happened.

I have send a patch that makes the voting chips font bold and with a 10% larger size. That seems to work for me.

We might want to change the default colors as well from red/green to yellow/blue. We did that for MediaWiki back in 2012 (T13374#158902 and around have some interesting discussing as to how yellow/blue got picked). The same effort has been done for Gerrit diff, which adjusted the themes Elegant and Eclipse themes T232893

elegent theme (before)elegent theme (after)
Screenshot 2019-09-14 at 17.42.21.png (1×2 px, 430 KB)
d.png (1×2 px, 400 KB)

I also forgot about this task. Since I created it, I was also able to hack-inject my own stylesheet into gerrit, which I'm copying below for reference. Things are very big, but it works like a charm for me:

.cell.label {
	font-weight: bold;
	font-size: 20px;
}
.chip {
	font-size: 110%;
	font-weight: bold;
}
:host(.merge-conflict) .chip {
	color: red;
}
:host(.merged) .chip {
	color: green;
}
:host(:not([flat])) .chip {
    color: white !important;
}

Change 671101 merged by Dzahn:
[operations/puppet@production] gerrit: make voting scores a bit more accessible

https://gerrit.wikimedia.org/r/671101

Change 671228 had a related patch set uploaded (by Hashar; owner: Hashar):
[operations/puppet@production] Revert "gerrit: make voting scores a bit more accessible"

https://gerrit.wikimedia.org/r/671228

Change 671228 merged by Dzahn:
[operations/puppet@production] Revert "gerrit: make voting scores a bit more accessible"

https://gerrit.wikimedia.org/r/671228

Turns out GerritSite.css is only used for the login page nowadays. It is a legacy stylesheet from Gerrit 2.15 and is no more included in Gerrit 3.2.

@Paladox and I tried to inject it in wm-common-style via things like P14821 or P14822 . The best case I had was that the --vote-chip-styles got applied as defined in Gerrit core under bodycustom-stylestyle. But that did not take in account the addition we have added for font weight / size. So it is an entirely mystery.

TLDR: we have to reach out to Gerrit mailing list to get guidance.