Contrast checker: partial-pass percentage has no label or explanation
- Dominant language
- JavaScript
- Stars
- 31
- Forks
- 5
- Avg merge
- 2h 5m
- Merged PRs (30d)
- 2
Description
### What happens
When the background is semi-transparent, the tool correctly shows a contrast *range* (best case over white, worst case over black). For levels that partially pass where the worst case fails but the best case passes a bare percentage is shown next to the badge, e.g.:
```
~ AA Normal text 71%
```
The `71%` has no label, no tooltip, and no surrounding explanation. A user cannot tell whether it means:
- 71% of possible backing colors pass this level
- the contrast is 71% of the way to the threshold
- something else
## Why it matters
The number is misleading in practice. The formula computes how far the best-case contrast sits above the threshold, as a fraction of the full contrast range a "headroom" metric, not a probability:
```js
pct = Math.round((max - level.min) / (max - min) * 100)
```
For **dark text on light backgrounds** this roughly approximates "fraction of backings that pass" because WCAG contrast is nearly linear in that regime so users who intuit it as a probability happen to get close to the right answer.
For **light text on dark backgrounds** (the hyperbolic WCAG regime) the approximation breaks down significantly. Concrete example:
| | |
|---|---|
| Colors | White text, 30% alpha black background, AAA threshold |
| Displayed | **71%** |
| Backings that actually pass | **~14%** |
| Error | 5× overestimate |
The contrast ratio range is already shown accurately in the ratio display (`X.XX – Y.YY : 1`), so the unlabelled `%` is a redundant, less-accurate encoding of information the user already has.
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by locating the contrast checker UI that renders the partial-pass badge, percentage, and ratio display, then trace the `pct` formula shown in the issue. Confirm the intended treatment of the percentage with the issue's concern in mind, and verify semi-transparent dark- and light-text examples so the result no longer presents an unlabeled, misleading value.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 68/100