paritytech / paritytech/dotli-community
Fix WCAG AA contrast failures on dark theme text
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 4
- Forks
- 3
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 40
Description
Computed against actual token values (dark theme):
| Element | Colors | Ratio | WCAG AA (4.5:1) |
|---|---|---|---|
| Landing subtitle | #888 on #0a0a0a | 5.6:1 | Pass |
| Landing hint/footer text | #666 on #0a0a0a | 3.5:1 | Fail |
| Landing tags | #555 on #0a0a0a | 2.7:1 | Fail |
| .dot TLD in URL pill (12px) | rgba(255,255,255,.35) on #1e1e1e | 3.2:1 | Fail |
| Progress % counter | white @ 30% opacity | ~2.4:1 | Fail |
| Recent pill label | #999 on #151515 | 6.4:1 | Pass |
| Topbar icons | white @ 65% on #1e1e1e | 7.7:1 | Pass |
The failing elements are also set at 0.72–0.78 rem (~11.5–12.5 px), compounding the problem. De-emphasis is fine; illegibility isn't — #8a8a8a on this background clears AA while still reading as secondary. (Light theme needs the same sweep; several light-theme grays looked borderline.)
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by locating the dark- and light-theme style definitions for the listed landing-page text, tags, URL pill, and progress counter elements. Update the failing or borderline colors while preserving their secondary emphasis, then verify that the listed text meets WCAG AA contrast ratios in both themes.
Written by the indexing model from the issue text.
Assessment
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100