badges / badges/shields

Font color issue with transparent backgrounds

Open
#10,250 0 comments 1 reaction 0 assignees View on GitHub
question
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.