Color of badge text

[runxel]

📋 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.

[PyvesB]

Hi @runxel, thanks for opening this issue! Do you have an example of badge that reads poorly?

[chris48s]

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:

- https://img.shields.io/badge/hard%20to-read-white

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:

- https://img.shields.io/badge/logo-logo-green?logo=javascript
- https://img.shields.io/badge/logo-logo-green?logo=javascript&style=social

which could potentially be repurposed/generalised if someone is interested in looking at this.

[runxel]

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.

[PyvesB]

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? 😄)!

[runxel]

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 😅

[hugovk]

Do you have an example of badge that reads poorly?

Yes, #504 (comment) 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).

[PyvesB]

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:

shields/lib/logos.js

Line 85 in a7b7cc0

function getSimpleIconStyle({ icon, style }) {