color-js / color-js/apps

Contrast checker: partial-pass percentage has no label or explanation

Open Beginner friendly
#50 1 comment 0 reactions 0 assignees View on GitHub
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.