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

adjust brightness threshold #10796

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

LitoMore
Copy link
Contributor

@LitoMore LitoMore commented Jan 9, 2025

![](https://img.shields.io/badge/Construct%203-00FFDA?logo=construct3)
![](https://img.shields.io/badge/Construct%203-123-00FFDA?logo=construct3)


The current threshold does not look good for some colors. The brightness value of #00FFDA is 0.68. I adjusted the threshold value to 0.65 for better visuals.

I didn't change the threshold values in logos.js because they are different. We can consider refactoring more code for logos in a separate PR.

Copy link
Contributor

github-actions bot commented Jan 9, 2025

Messages
📖 ✨ Thanks for your contribution to Shields, @LitoMore!

Generated by 🚫 dangerJS against 30a3355

@chris48s chris48s added the npm-package Badge generation and badge templates label Jan 10, 2025
Copy link
Contributor

🚀 Updated review app: https://pr-10796-badges-shields.fly.dev

@chris48s
Copy link
Member

This isn't a yes or a no to this, but for context..

I think one of the reasons we picked the value 0.69 was that it left all of the standard palette named colours with white text.

Going to 0.65 pushes yellow over to black text, so all the named standard palette colours still get white text, except for yellow which goes to colour yellow

@LitoMore
Copy link
Contributor Author

LitoMore commented Jan 12, 2025

I just checked the brightness of yellow is 0.68. The yellow one is fine since it's not that dark for black (#333) text; it still has good visual accessibility. What do you think?


colour yellow

Here is a glance of some colors:

The Airbrake has a similar color to the yellow one, and their brightness is the same.

Copy link
Contributor

🚀 Updated review app: https://pr-10796-badges-shields.fly.dev

@chris48s
Copy link
Member

chris48s commented Jan 12, 2025

I think if we're going to change the brightness threshold down to 0.65, I'd prefer to also darken the standard yellow to #d2a816 so all the standard palette colours get the same text colour.

@LitoMore
Copy link
Contributor Author

LitoMore commented Jan 12, 2025

There are still some colors that do not look that good, for example the Alamy. We can consider implementing the WCAG relative luminance. The related npm package can be found at https://npmjs.com/get-relative-luminance in case you want to try it out.

The below is luminance < 0.4 ? '#fff' : '#333':

It looks more accurate for measuring brightness.

What do you think?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
npm-package Badge generation and badge templates
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants