[🚧Design] - Accessibility of badges

[kohasummons]

🐛 The case: How do we encourage accessible badges?

(this is probably the 100th time I'm rephrasing this heading)

Recently, I suggested a contributor https://github.com/Ileriayo/markdown-badges/pull/350#issuecomment-1082166276 change the background color of the badge he was submitting. Why?

The contrast between the text color and the background color was low and it would be difficult for people with eye disabilities to parse the tiny info on the badge.

I was curious and did a lightning scan of the badges in our current stash and I noticed a trend of issues with contrast.

For example:

This might be easy for you to see but imagine someone with an eye disability staring at this. Not so easy, eh?

🧇 Why do I believe this is important?

• Badges are usually squished together on profiles. Folks out there do a lot of things, so you will see profiles using close to 20 different badges, all packed tightly together.
• Font size on badges is below 16px the base size for text.
• just too much work on the brain trying to read the text.

Hence the question, 🔥 How do we encourage badges which are accessible and inclusive?

[DalpatRathore]

For more inclusive and better accessibility:

• Contrast Colors should abide by Web Content Accessibility Guidelines (WCAG).
• Badge Size should be increased - as of now, it is difficult to distinguish when badges are packed tightly together.
• Font Size and Font Color should also follow the minimum WCAG norms & standards.