color contrast issues
Open
Nobody has claimed this yet.
bug
- Dominant language
- JavaScript
- Stars
- 806
- Forks
- 434
- Avg merge
- 1d 21h
- Merged PRs (30d)
- 32
Description
While working on https://github.com/w3c/aria/pull/2410 I found some contrast issues that can also be observed on https://respec.org/docs/.
- TOC
- light & dark mode: "Tables of Content" has insufficient contrast (due to
var(--tocsidebar-heading-text)) - dark mode:
.toc code {#005a9c}leads to insufficient contrast
- light & dark mode: "Tables of Content" has insufficient contrast (due to
- highlight.js: in dark mode, the color theme causes contrast issues in most code snippets, in particular html.
- WebIDL: in light mode, "WebIDL" has insufficient contrast (
.idlHeader { color: var(--defrow-border,#fff)})
I'll update this issue if I find more.
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 inspecting the TOC styles, the highlight.js color theme, and the WebIDL styles mentioned in the issue. Check the affected pages on respec.org/docs/ in light and dark modes, then verify that the listed text and code examples meet contrast requirements across each affected area.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, javascript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100