swagger-api / swagger-api/swagger-ui

a11y: Page title version ID does not have enough color contrast

Open
#9,583 1 comment 24 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

backlog cat: a11y
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)
image

Here's the Sort Site information:
image

Additional context or thoughts

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.