Task #92671

Epic #89595: Improve accessibility of backend

Form elements have insufficient color contrast and insufficient focus style

Added by Mylene Kreiger about 1 month ago. Updated about 1 month ago.

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.
#1

Updated by Riccardo De Contardi about 1 month ago

  • Parent task set to #89595

Also available in: Atom PDF