Hub: Label contrast in "hub pr list" could use some improvement

[robbieaverill]

hub version 2.3.0

The labels shown in hub pr list output could use some improvement for readability. Here's an example from one of my repos:

And another screenshot where I've highlighted the second PR in my console (to show the text that's there):

FWIW here are the label configs for those shown in the screenshot:

{
  "affects/v4": "5319e7",
  "effort/medium": "fef2c0",
  "impact/high": "eb6420"
}

I understand that GitHub automatically determines the text colour for you based on the background colour you provide. I'm not sure how hub renders these hex codes into terminal colours, but I think there's some improvement to be made with the same kind of logic here - the affects/v4 label is kind of readable, but the other two aren't really (effort/medium is almost invisible).

I'm happy help with this if someone could point me at the part of the code to start looking at =)

[mislav]

Thank you for suggesting this!

My logic for determining contrasting text color is not all that great and I would welcome improvements 😄 https://github.com/github/hub/blob/f4252d55ecfa76aa4db50458faab4a269dada014/commands/issue.go#L569-L579

[robbieaverill]

Great, thank you. I'll figure out how to write Go and have a crack at it 😃

[mislav]

Here's how we do it on GitHub.com the website: for each label color (background color of the label) we pick the text color by collecting several _potential color candidates_:

1. 50% lighter (using HSL)
   
   
   
   • additional candidate: 25% brighter (RGB) on top of (1)
   
   
   • additional candidate: 25% desaturate (HSL) on top of (1)
   
   
2. repeat (1) but with 75% lighter
3. repeat (1) and (2) but going darker instead of lighter

When all the candidates (12 of them) are collected, find one that has a contrast ratio of at least 7. Failing that, find a candidate that has a contrast ratio of at least 4.5. Failing that, use the candidate that was 75% darker + 25% desaturated.

The contrast ratio is calculated using:

• implementation: https://github.com/mkdynamic/wcag_color_contrast/blob/f6e05ef0887edcbfab4b04ff7729b51213df8aa9/lib/wcag_color_contrast.rb#L16-L28
• specification: https://www.w3.org/TR/WCAG20-TECHS/G17.html

[apjanke]

@robbieaverill Which repo was this from? I'd like to reproduce this.

[apjanke]

Here's a PR to do this: #1980

[robbieaverill]

@apjanke Which repo was this from? I'd like to reproduce this

The repo I took the screenshot from doesn't have any open PRs any more, but we use the same label colours in all of our repositories, so you can use https://github.com/silverstripe/silverstripe-admin as an example with the same labels. Nice work on the PR!

[mislav]

Thank you @apjanke for handling this tricky feature! ❤️

[Hultner]

@mislav When can we expect a release with this fix included?
I suppose it will be included in 2.7.1? But I couldn't find any ETA or release-schedule.

[mislav]

There's no ETA, but it will be soon!

[Hultner]

@mislav Great! Then I’ll wait for that.
Keep the good work up!

Current colours are unreadable in my terminal, came here looking for configuration parameters and found this issue/PR so were at first confused why it didn’t work in my 2.7.0 version until I noticed that it was merged after that release.
:)

[mislav]

@Hultner The 2.7.0 version already includes the improvement to 256-color rendering; the rest of this work refers only to contrast ratios of label background color vs. label text. Can you tell us more about your terminal (e.g. relevant information in env | grep TERM) and provide a screenshot of labels that are unreadable?

On macOS with Homebrew, you can also try brew upgrade hub --HEAD to install the version from master

[robbieaverill]

Thank you @apjanke and @mislav for responding and fixing this issue. I've just tried out the latest head and it's working much better!

🎉

[Hultner]

@mislav Mine looks like the attached image on 2.7.0

Following term variables

 » env | grep TERM
COLORTERM=truecolor
ITERM_PROFILE=Default
TERM=xterm-256color
TERM_PROGRAM=iTerm.app
TERM_PROGRAM_VERSION=3.2.0beta3

As you can see the orange especially on some colours such as blue and purple is almost impossible to read.

Update

Just tried the HEAD version via homebrew and it looks great now, will stay on head until the next release :)
Once again thanks for your hard work everyone, keep it up! It's highly appreciated.