badges
adjust brightness threshold
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.
| Messages | |
|---|---|
| :book: | :sparkles: Thanks for your contribution to Shields, @LitoMore! |
Generated by :no_entry_sign: dangerJS against 30a3355f665233ba72e2a9f50d85ac04a63d02cd
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
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
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?
Here is a glance of some colors:
The Airbrake has a similar color to the yellow one, and their brightness is the same.
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.
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?
@chris48s I've updated the site https://litomore.github.io/si-website/ so you can see the difference between get-relative-luminance and shields.io's colorForBackground. And here I used 0.65 for threshold.
You can switch to Actual to see the actual color and switch between Luminance and Brightness to see their differences.
Here is the source: https://github.com/LitoMore/si-website if you want to play it on your local.