Font color issue with transparent backgrounds
- Dominant language
- JavaScript
- Stars
- 27.2k
- Forks
- 5.6k
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 46
Description
### Are you experiencing an issue with...
shields.io
### 🐞 Description
When the background color is set to transparent (to accommodate theme changes between light and dark modes), the font color is automatically set to white. While this works well on dark backgrounds, it causes visibility issues on light backgrounds, particularly white backgrounds. This issue specifically affects badges styled with `flat-square` and `for-the-badge`.
### 🔗 Link to the badge
- [flat-square](https://img.shields.io/badge/message-rgba(0,0,0,0)?style=flat-square)
- [for-the-badge](https://img.shields.io/badge/message-rgba(0,0,0,0)?style=for-the-badge)
### 💡 Possible Solution
One potential solution could be to introduce an option to customize the font color independently of the background color. This would ensure that text remains visible regardless of the background color chosen, including transparent backgrounds.
Contributor guide
Research direction
Start by reproducing the linked flat-square and for-the-badge examples with transparent backgrounds in both light and dark contexts. Trace how each style selects its font color and define done as text remaining legible on light and dark backgrounds while preserving the existing badge styles.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- design, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100