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

Daimona created this task.Jun 29 2020, 9:08 AM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJun 29 2020, 9:08 AM
hashar added a subscriber: hashar.Jun 29 2020, 10:32 AM

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;
  }
}
hashar triaged this task as Low priority.Jun 29 2020, 10:32 AM

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.