swagger-api / swagger-api/swagger-ui

a11y: Not enough color contrast in display of input/output schema

Open
#9,594 1 comment 23 reactions 0 assignees View on GitHub

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 compliance. It is flagging there is not enough color contrast in the display of the input schema: "Ensure that text and background colors have a 7:1 contrast ratio."
Violates WCAG 2.0 AAA 1.4.6 https://www.w3.org/WAI/WCAG21/Understanding/contrast-enhanced.html
This is occurring on the

  • "td" (contained within the "tr class=property-row required")
  • "span class=prop-type"
  • "span class=prop-format"
  • "span class=property primitive"
  • "p" contained within the div with class "renderedMarkdown"
To reproduce...

Open a POST method, Expand Schemas, expand an input schema, then example data elements.

Expected behavior

enough color contrast.

Screenshots

Here's the screenshot of the display
image

Here are the errors from Sort Site and the html context:
image
image
image
image

Additional context or thoughts

I would think the red asterisk marking "required" does not have enough color contrast either, because that element did not have enough contrast elsewhere.

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

Reproduce the issue through POST → Expand Schemas → an input schema → example data elements, then inspect the listed td, prop-type, prop-format, property primitive, renderedMarkdown, and required-marker elements. Check their foreground and background colors against the WCAG 7:1 target; done means the flagged schema text and required marker meet the required contrast.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
accessibility, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.