swagger-api / swagger-api/swagger-ui
a11y: Page title version ID does not have enough color contrast
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 29k
- Forks
- 9.3k
- Avg merge
- 2d 23h
- Merged PRs (30d)
- 25
Description
Q&A (please complete the following information)
- OS: [e.g. macOS] Windows 10
- Browser: [e.g. chrome, safari] Chrome
- Version: [e.g. 22] 121
- Method of installation: [e.g. npm, dist assets] npm
- Swagger-UI version: [e.g. 3.10.0] Swagger UI React 5.11.3
- Swagger/OpenAPI version: [e.g. Swagger 2.0, OpenAPI 3.0] OpenAPI 3.0
Content & configuration
Basic/default
Describe the bug you're encountering
We are using a tool called Sort site to evaluate our site for 508 accessibility. It is flagging that there is not enough color contrast in the version identifier at the top of the page. The Sort site error is below.
Violates WCAG 2.0 AA 1.4.3 https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html
This is on the "pre" with "class=version" inside a "small", and on the "pre" with "class=version" inside a "small class=version-stamp", which are both contained in the h2 with class "title".
To reproduce...
View any OpenAPI spec title
Expected behavior
Color contract should be corrected
Screenshots
Here's the element with the error (the 1.0.0 and the OAS 3.0)
Here's the Sort Site information:
Additional context or thoughts
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
The report identifies the affected elements as pre.version and pre.version inside small.version-stamp within h2.title; inspect the title and version styling and rendered page first. Verify revised colors against WCAG 2.0 AA 1.4.3 on an OpenAPI title, and confirm both version displays pass the contrast check.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100