Actions
Task #92671
openEpic #89595: Improve accessibility of backend
Form elements have insufficient color contrast and insufficient focus style
Status:
New
Priority:
Should have
Assignee:
-
Category:
Backend User Interface
Target version:
-
Start date:
2020-10-22
Due date:
% Done:
0%
Estimated time:
TYPO3 Version:
11
PHP Version:
Tags:
accessibility, tas2020
Complexity:
easy
Sprint Focus:
Description
The form inputs and selects in the Edit section have an insufficient contrast ratio of 2.37:1 (border color: #6DAAE0, background color #FAFAFA), see WebAIM Color Contrast Checker
The elements get a subtle box-shadow and the border-color changes from #6DAAE0 to #4392D7, which is an insufficient contrast change from 1.33:1, see WebAIM Color Contrast Checker
.has-change .form-control {
border: 1px solid #6daae0;
}
.has-change .form-control:focus {
border-color: #4392d7;
}
Recommendation:
To fulfill the minimum contrast ratio for form elements, implement the following:
- Increase the contrast ratio of the border color for the form elements to a minimum value of 3:1.
- Increase the contrast ratio of the border color for the focussed form to a minimum value of 3:1.
Updated by Benni Mack over 1 year ago
- Related to Bug #92684: Form input fields in the search detail page have insufficient color contrast and focus style added
Actions