swagger-api / swagger-api/swagger-ui

[Accessibility] WCAG 2.1 1.4.3 -- Insufficient Color Contrast

Open
#5,247 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

backlog cat: a11y needs: UX/design input
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: Windows
  • Browser: Chrome
  • Version: 73.0.3683.75
  • Method of installation: npm
  • Swagger-UI version: 3.17.6
  • Swagger/OpenAPI version: latest
Describe the bug you're encountering

The color of the text and the color of the background are not in sufficient contrast to each other. This can give problems for users with visual impairments & color blindness, but also can affect a lot of other users, leading to important text potentially being overlooked.

To reproduce...

Steps to reproduce the behavior:
Run Chrome Accessibility assessment or Siteimprove extension. See below screenshots for details.

Expected behavior

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:

  • Large-scale text and images of text have a contrast ratio of at least 3:1
  • Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement
  • Text that is part of a logo or brand name has no minimum contrast requirement
Screenshots

Authorize has insufficient color contrast of 2.03 (foreground color: #49cc90, background color: #ffffff, font size: 10.5pt, font weight: bold).
image
GET has insufficient color contrast of 2.31 (foreground color: #ffffff, background color: #61affe, font size: 10.5pt, font weight: bold).
image
(query) has insufficient color contrast of 3.65 (foreground color: #808080, background color: #eff7ff, font size: 9.0pt, font weight: bold).
image
DELETE has insufficient color contrast of 3.62 (foreground color: #ffffff, background color: #f93e3e, font size: 10.5pt, font weight: bold).
image
POST has insufficient color contrast of 2.03 (foreground color: #ffffff, background color: #49cc90, font size: 10.5pt, font weight: bold).
image
Example Value has insufficient color contrast of 4.21 (foreground color: #337ab7, background color: #eff7ff, font size: 9.0pt, font weight: bold).
image

Additional context or thoughts

Sufficient to provide control with sufficient contrast ratio that allows users to switch to a presentation that uses sufficient contrast or provide Style Switcher to switch to High Contrast.

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

Start by reproducing the reported contrast failures with Chrome's Accessibility assessment or the Siteimprove extension, focusing on Authorize, HTTP method labels, query, and Example Value. Review the affected UI styles and determine whether the listed elements meet the WCAG 2.1 contrast thresholds; done means the reported failures are resolved or an accessible high-contrast presentation is available.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.