Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve label contrast ratios #1980

Merged
merged 4 commits into from
Jan 8, 2019

Conversation

apjanke
Copy link
Contributor

@apjanke apjanke commented Dec 22, 2018

Fixes #1960.
Depends on and includes #1979.

This PR improves the contrast ratios of displayed label text by using a more sophisticated algorithm for picking foreground colors to go with the background issue colors.

I'm not sure I got the color candidate calculation right, because I'm not sure I understood the use of the terms "lightness" and "brightness" in this comment

mislav
mislav previously requested changes Dec 28, 2018
Copy link
Owner

@mislav mislav left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is great; thanks for taking this on!

Two blockers:

  • this breaks a test
  • from casual testing in Terminal.app, I'm seeing the contrast between bg and fg colors being worse (lower) than before 🤔

@apjanke apjanke force-pushed the improve-label-contrast-ratios branch from 6149253 to cd307c4 Compare January 2, 2019 21:46
@apjanke
Copy link
Contributor Author

apjanke commented Jan 2, 2019

I've modified this PR to fix the test, changing the expected formatting to use the new 3-component color codes instead of the old palettized color codes.

@apjanke
Copy link
Contributor Author

apjanke commented Jan 2, 2019

Hmm. The Travis build is failing with this:

1.01s$ make test-all
script/test --coverage 89.4
main.go:9:2: cannot find package "github.com/github/hub/commands" in any of:
	/home/travis/gopath/src/github.com/apjanke/hub/vendor/github.com/github/hub/commands (vendor tree)
	/home/travis/.gimme/versions/go1.10.7.linux.amd64/src/github.com/github/hub/commands (from $GOROOT)
	/home/travis/gopath/src/github.com/github/hub/commands (from $GOPATH)
main.go:4:14: cannot find package "github.com/github/hub/coverage" in any of:
	/home/travis/gopath/src/github.com/apjanke/hub/vendor/github.com/github/hub/coverage (vendor tree)
	/home/travis/.gimme/versions/go1.10.7.linux.amd64/src/github.com/github/hub/coverage (from $GOROOT)
	/home/travis/gopath/src/github.com/github/hub/coverage (from $GOPATH)
main.go:10:2: cannot find package "github.com/github/hub/github" in any of:
	/home/travis/gopath/src/github.com/apjanke/hub/vendor/github.com/github/hub/github (vendor tree)
	/home/travis/.gimme/versions/go1.10.7.linux.amd64/src/github.com/github/hub/github (from $GOROOT)
	/home/travis/gopath/src/github.com/github/hub/github (from $GOPATH)
main.go:11:2: cannot find package "github.com/github/hub/ui" in any of:
	/home/travis/gopath/src/github.com/apjanke/hub/vendor/github.com/github/hub/ui (vendor tree)
	/home/travis/.gimme/versions/go1.10.7.linux.amd64/src/github.com/github/hub/ui (from $GOROOT)
	/home/travis/gopath/src/github.com/github/hub/ui (from $GOPATH)
make: *** [test-all] Error 1
The command "make test-all" exited with 2.

https://travis-ci.com/apjanke/hub/builds/96120106?utm_medium=notification&utm_source=email

Is that my fault?

@apjanke
Copy link
Contributor Author

apjanke commented Jan 2, 2019

Can you give me an example of where the contrast looks worse in Terminal.app? I've been testing it against the silverstripe/silverstripe-admin repo that robbieaverill mentioned, and it looks better there. Here's hub 2.6.1 vs this PR for me:

hub-labels-before-after

Offhand, I guess the issue could be that the old version is considering pure black and pure white as its candidates, and they should be added to the candidate color list in this PR in addition to the colors derived from the lightening/darkening algorithm?

Pick between white and black depending on which one is the first to
satisfy the contrast ratio of 7.0 (or 4.5 as fallback).
@mislav
Copy link
Owner

mislav commented Jan 3, 2019

I've just pushed a simplified version. Please review.

I'm afraid I've sent you on a wild goose chase with my initial specification for this feature. Although my comment was a near-accurate reflection of our server-side logic when picking a contrasting color candidate, I have failed to pick up the fact that we also add black #000 and white #fff into the mix as potential candidates with priority, and because one of these always has a satisfying contrast, the result with always be either #fff or #000 (we can see this in effect on GitHub.com). Therefore, adding extra candidates using HSL transforms (which you've handled almost impeccably in your implementation; there were only slight bugs in the luminosity vs. brightness adjustments) would be a waste of CPU cycles. I have therefore removed the unnecessary parts of the implementation. Thank you for doing it, and I'm sorry it was a waste of your time.

The result in Terminal.app now matches how labels render in the web-interface (at least, in my observation):

screen shot 2019-01-03 at 4 26 26 am

@apjanke
Copy link
Contributor Author

apjanke commented Jan 7, 2019

Oh well, it was a fun exercise!

The new simplified version of the code looks good to me, and seems to work well when I've tested it against silverstripe-admin and a couple other repos, for both issues and prs. Looks good to me in both iTerm and Terminal.app. Colors do seem to match those displayed in the GitHub web interface in my testing too.

Looks good.

@mislav mislav merged commit ddf0d82 into mislav:master Jan 8, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants