-
Bug
-
Resolution: Won't Fix
-
Medium (View bug fix roadmap)
-
None
-
9.12.2
-
9.12
-
Severity 3 - Minor
-
Issue Summary
The border of the form fields fails the minimum color contrast requirements.
Steps to Reproduce
- Open the "Backlog" page.
- Navigate to the "Versions" and "Epics" button and activate the non-modal dialogs
- Navigate to the mentioned form fields.
- Use the CCA testing tool to check the color contrast of the border of those checkboxes.
- Observe that the color contrast between the checkbox border and the adjacent color is insufficient.
Screenshot 1
Screenshot 2
Actual Results
The border of the form fields such as “Name“, "Description", "Start date", and "Release date", present in the “Create version” modal dialog box fails the minimum color contrast requirements with its background color.
FG: #DFE1E5
BG: #FAFBFC
Contrast ratio: 1.3:1
The border of the form fields such as “Epic name“, and "Summary", present in the “Create epic” modal dialog box fails the minimum color contrast requirements with its background color.
FG: #DFE1E5
BG: #FAFBFC
Contrast ratio: 1.3:1
As a result, low-vision users will find it difficult to distinguish the form controls that have insufficient contrast.
Expected Result
The mentioned border of the input field should have a minimum contrast of 3:1 with the adjacent content. This helps low-vision users to easily identify the form field. The expected contrast ratio can be achieved by increasing the contrast of foreground color until it passes a contrast ratio of 3:1.
A color contrast analyzer can be downloaded from Color Contrast Checker - TPGi
Workaround
Currently, there is no known workaround for this behaviour. A workaround will be added here when available
Environment
MacBook Pro (16-inch, 2021)
macOs Sonoma 14.3
Chrome - Version 120.0.6099.109 (Official Build) (arm64)
Firefox- Version 92.0 (64-bit)
Safari- Version 17.3 (19617.2.4.11.8)
JAWS- Version 2023
NVDA- Version 2021.2
Voiceover - Version Latest
- is resolved by
-
A11Y-116 You do not have permission to view this issue
| Form Name | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
[JSWSERVER-26188] Backlog: Insufficient color contrast for the border of create version form fields
| Resolution | New: Won't Fix [ 2 ] | |
| Status | Original: Ready for Development [ 10049 ] | New: Closed [ 6 ] |
| Component/s | New: Versions [ 55620 ] |
| Component/s | Original: Accessibility [ 62490 ] | |
| Component/s | New: Backlog [ 46795 ] | |
| Component/s | New: Accessibility [ 62491 ] | |
| Key |
Original:
|
New:
|
| Affects Version/s | Original: 9.12.2 [ 106456 ] | |
| Affects Version/s | New: 9.12.2 [ 106455 ] | |
| Project | Original: Jira Data Center [ 10240 ] | New: Jira Software Data Center [ 12200 ] |
| Remote Link | Original: This issue links to "A11Y-116 (Bulldog)" [ 931188 ] | New: This issue links to "A11Y-116 (JIRA Server (Bulldog))" [ 931188 ] |
| Remote Link | New: This issue links to "A11Y-116 (Bulldog)" [ 931188 ] |
| Attachment | Original: Screenshot 2024-02-14 at 3.57.45 PM.png [ 452225 ] |
| Description |
Original:
h3. Issue Summary
The border of the form fields fails the minimum color contrast requirements. h3. Steps to Reproduce # Open the "Backlog" page. # Navigate to the "Versions" and "Epics" button and activate the non-modal dialogs # Navigate to the mentioned form fields. # Use the CCA testing tool to check the color contrast of the border of those checkboxes. # Observe that the color contrast between the checkbox border and the adjacent color is insufficient. h3. Screenshot 1 !Screenshot 2024-02-14 at 3.51.00 PM.png|width=543,height=328! h3. Screenshot 2 !Screenshot 2024-02-14 at 3.55.09 PM.png|width=546,height=309! h3. Screenshot 3 !Screenshot 2024-02-14 at 3.57.45 PM.png|width=543,height=307! h3. Actual Results The border of the form fields such as “Name“, "Description", "Start date", and "Release date", present in the “Create version” modal dialog box fails the minimum color contrast requirements with its background color. FG: #DFE1E5 BG: #FAFBFC Contrast ratio: 1.3:1 The border of the form fields such as “Epic name“, and "Summary", present in the “Create epic” modal dialog box fails the minimum color contrast requirements with its background color. FG: #DFE1E5 BG: #FAFBFC Contrast ratio: 1.3:1 The border of the checkboxes such as “Assignee“, "Attachments", "Labels" and so on, present in the “Create epic” modal dialog box fails the minimum color contrast requirements with its background color. FG: #BBBBBB BG: #FFFFFF Contrast ratio: 1.9:1 As a result, low-vision users will find it difficult to distinguish the form controls that have insufficient contrast. h2. Expected Result The mentioned border of the input field should have a minimum contrast of 3:1 with the adjacent content. This helps low-vision users to easily identify the form field. The expected contrast ratio can be achieved by increasing the contrast of foreground color until it passes a contrast ratio of 3:1. A color contrast analyzer can be downloaded from [Color Contrast Checker - TPGi|https://www.tpgi.com/color-contrast-checker/] h3. Workaround Currently, there is no known workaround for this behaviour. A workaround will be added here when available h3. Environment MacBook Pro (16-inch, 2021) macOs Sonoma 14.3 Chrome - Version 120.0.6099.109 (Official Build) (arm64) Firefox- Version 92.0 (64-bit) Safari- Version 17.3 (19617.2.4.11.8) JAWS- Version 2023 NVDA- Version 2021.2 Voiceover - Version Latest h4. |
New:
h3. Issue Summary
The border of the form fields fails the minimum color contrast requirements. h3. Steps to Reproduce # Open the "Backlog" page. # Navigate to the "Versions" and "Epics" button and activate the non-modal dialogs # Navigate to the mentioned form fields. # Use the CCA testing tool to check the color contrast of the border of those checkboxes. # Observe that the color contrast between the checkbox border and the adjacent color is insufficient. h3. Screenshot 1 !Screenshot 2024-02-14 at 3.51.00 PM.png|width=543,height=328! h3. Screenshot 2 !Screenshot 2024-02-14 at 3.55.09 PM.png|width=546,height=309! h3. Actual Results The border of the form fields such as “Name“, "Description", "Start date", and "Release date", present in the “Create version” modal dialog box fails the minimum color contrast requirements with its background color. FG: #DFE1E5 BG: #FAFBFC Contrast ratio: 1.3:1 The border of the form fields such as “Epic name“, and "Summary", present in the “Create epic” modal dialog box fails the minimum color contrast requirements with its background color. FG: #DFE1E5 BG: #FAFBFC Contrast ratio: 1.3:1 As a result, low-vision users will find it difficult to distinguish the form controls that have insufficient contrast. h2. Expected Result The mentioned border of the input field should have a minimum contrast of 3:1 with the adjacent content. This helps low-vision users to easily identify the form field. The expected contrast ratio can be achieved by increasing the contrast of foreground color until it passes a contrast ratio of 3:1. A color contrast analyzer can be downloaded from [Color Contrast Checker - TPGi|https://www.tpgi.com/color-contrast-checker/] h3. Workaround Currently, there is no known workaround for this behaviour. A workaround will be added here when available h3. Environment MacBook Pro (16-inch, 2021) macOs Sonoma 14.3 Chrome - Version 120.0.6099.109 (Official Build) (arm64) Firefox- Version 92.0 (64-bit) Safari- Version 17.3 (19617.2.4.11.8) JAWS- Version 2023 NVDA- Version 2021.2 Voiceover - Version Latest h4. |
| Labels | Original: 1.4.11 Level-AA WCAG21 a11y-triaged ax-bug ax-jiradc-vpat2024 ax-jiradc-vpat2024-backlog ax-jiradc-vpat2024-pg09 ax-lv-user ax-medium-priority ax-qa | New: 1.4.11 Level-AA WCAG21 a11y-triaged ax-bug ax-jiradc-vpat2024 ax-jiradc-vpat2024-backlog ax-jiradc-vpat2024-pg09 ax-lv-user ax-medium-priority ax-qa batman-frontend-triaged |
| Summary | Original: Backlog: Insufficient color contrast for the border of form fields | New: Backlog: Insufficient color contrast for the border of create version form fields |
Hi everyone,
As part of our accessibility and usability improvements, we’re now offering light and dark theme for Jira. Because of this we’ve decided to deprecate the Original theme. Upgrade to Jira 10.3 Long Term Support to enjoy the new themes.
Best regards
Bilal Cinarli
Principal Frontend Engineer