Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Slider - Ensure parts of graphical objects essential for understanding content have sufficient contrast - (2036570180) #7817

Closed
Tracked by #7851
dqateam opened this issue Sep 19, 2023 · 1 comment
Labels
0 - new New issues that need assignment. a11y Issues related to Accessibility fixes or improvements. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. needs triage Planning workflow - pending design/dev review.

Comments

@dqateam
Copy link
Collaborator

dqateam commented Sep 19, 2023

Violation:

Ensure parts of graphical objects essential for understanding content have sufficient contrast

image

WCAG Reference:

Severity:

5

Media Type:

Color and Contrast


Areas for Remediation:

  • Title: Slider - Ensure parts of graphical objects essential for understanding content have sufficient contrast - (2036570180)
  • Module: Slider
    Issue
    There are graphical objects with a color contrast ratio below 3.00:1.

Foreground: #7CB9DD
Background: #F8F8F8
Contrast ratio: 2.0:1

Examples include:

  • The light blue part of all the images, in "Test 8. Slider with Histogram" section.

User Impact
Users with low vision will have difficulty identifying this content.

Code Reference

<svg class="svg" height="48" preserveAspectRatio="none" viewBox="0 0 855 48" width="855">
(...)
</svg>

Suggestion
Ensure parts of graphical objects essential for understanding content have sufficient contrast. The required minimum contrast ratio is 3.00:1.

Common examples of qualifying objects include lines in a chart, meaningful icons, and annotations within an image.

Graphics that require particular presentation to preserve their meaning are exempt from this requirement.

To evaluate color contrast, see the Accessible Color Picker extension: https://www.accessibility.dev/


Additional Resources:

  • Report Source: Product accessibility evaluation conducted on the Calcite Design System in August, 2022.
@dqateam dqateam added 0 - new New issues that need assignment. a11y Issues related to Accessibility fixes or improvements. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. needs triage Planning workflow - pending design/dev review. labels Sep 19, 2023
@geospatialem
Copy link
Member

Closing in favor of #7822 for a more comprehensive audit across the design system.

@geospatialem geospatialem closed this as not planned Won't fix, can't repro, duplicate, stale Dec 27, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
0 - new New issues that need assignment. a11y Issues related to Accessibility fixes or improvements. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. needs triage Planning workflow - pending design/dev review.
Projects
None yet
Development

No branches or pull requests

2 participants