Epic: Ensure parts of graphical objects essential for understanding content have sufficient contrast - (2036570198)

[dqateam]

Violation:

Ensure parts of graphical objects essential for understanding content have sufficient contrast across the design system for the following components with the --calcite-color-border-input css prop and border-color-input tailwind util:

• Form components (input) from Form - Ensure active user interface components have sufficient contrast - (2036570491) #7847 (2036570491)
  • checkbox
  • combobox
  • input
  • input-date-picker
  • input-number
  • input-text
  • segmented-control
  • select
  • text-area
• radio-button (2036570149)
• rating (2036570023)
• slider uses --calcite-color-border-2 light mode ratio of 1.39:1
• switch (2036570198)
• stepper item (2036570233)

This looks to relate to the --calcite-color-background [More details]:

1. calcite-mode-light (#F8F8F8) with the outline of the input (#949494), where the contrast ratio is 2.85:1.
2. calcite-mode-dark (#353535) with the outline of the input (#757575), where the contrast ratio is 2.66:1

calcite-mode-light:

calcite-mode-dark:

Screenshots

WCAG Reference:

• 1.4.11 Non-test Contrast

Severity:

5

Media Type:

Color and Contrast

---

Areas for Remediation:

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

Foreground: #949494
Background: #F8F8F8
Contrast ratio: 2.86:1

Examples of text with this contrast ratio include:

• Switch images.

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

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.

[geospatialem]

While the light mode has sufficient contrast of 3.03:1, the dark mode contrast needs some improvement, currently at 2.66:1, which could be obtained with #808080 and a 3.1:1 ratio for the --calcite-color-border-input value, but adding design to this issue for their expertise.

Prototype: https://codepen.io/geospatialem/pen/abMOvmM

[geospatialem]

For the design consideration, please refer to #7822 (comment) cc @SkyeSeitz @ashetland

[SkyeSeitz]

This effort will be investigated in the dark mode color considerations of issue #3122 👍🏽