:clipboard: Description
In terms of accessibility it would be great if there would be a threshold of lightness in color so we would get _dark_ text on light badge colors automatically.
They can be extremely hard to read otherwise, which means you need dark and saturated badge colors, which limits the users.
runxel
All 7 comments
Hi @runxel, thanks for opening this issue! Do you have an example of badge that reads poorly?
PyvesB
on 16 Feb 2020
refs #504 (but not an exact dupe)
Do you have an example of badge that reads poorly?
Slightly contrived example as you can only use white on a custom badge, but I guess we're trying to avoid stuff like:
We do have some existing code for the logos which tries to avoid light logo/light background and dark logo/dark background combinations e.g:
which could potentially be repurposed/generalised if someone is interested in looking at this.
chris48s
on 16 Feb 2020
Do you have an example of badge that reads poorly?
Slightly contrived example as you can only use white on a custom badge, but I guess we're trying to avoid stuff like:
- https://img.shields.io/badge/hard%20to-read-white
Exactly, of course I am speaking of badges with custom colors.
It's even worse with the flat style, since the text has no drop shadow there.
runxel
on 17 Feb 2020
Okay, good to hear that it only seems to be a problem when a user specifies a colour rather than with the default badges we provide.
Our specification does mention contrast and background colours, it would probably need some clarification if we decide to vary the text colour as well.
What would we do if the left handside of the badge is black and the right handside is white? Would we have two different text colours (white on the left, black on the right)?
Thanks for pointing to the existing logo functionality @chris48s, it will probably be useful to whoever picks this up (maybe @runxel would like to pick up the challenge? 馃槃)!
PyvesB
on 17 Feb 2020
Sorry if I was not clear enough in my initial statement, @PyvesB! My bad.
Well, I would have a look, but I think I definitely need to get at least some rough pointers where to look 馃槄
runxel
on 17 Feb 2020
Do you have an example of badge that reads poorly?
Yes, https://github.com/badges/shields/issues/504#issuecomment-560118266 has screenshots of readable GitHub labels (auto black on pale colour, auto white on dark colour) and the same colour badges (readable white on dark, hard to read white on pale).
hugovk
on 18 Feb 2020
Well, I would have a look, but I think I definitely need to get at least some rough pointers where to look 馃槄
If I'm not mistaken, some of the logo logic lives in this part of the code:
https://github.com/badges/shields/blob/a7b7cc00b52e51f8f74b39df1903cf5bf3bf31a9/lib/logos.js#L85
PyvesB
on 18 Feb 2020
Related issues
salaros
路
3Comments
techtonik
路
3Comments
calebcartwright
路
3Comments
PyvesB
路
3Comments
lukeeey
路
3Comments
Most helpful comment
refs #504 (but not an exact dupe)
Slightly contrived example as you can only use white on a custom badge, but I guess we're trying to avoid stuff like:
We do have some existing code for the logos which tries to avoid light logo/light background and dark logo/dark background combinations e.g:
which could potentially be repurposed/generalised if someone is interested in looking at this.