Devographics
Contrast too light to indicate focused field
Filling out State of CSS Survey 2023: https://survey.devographics.com/en-US/survey/state-of-css/2023/hfg5V70I2tPvW2i5wgy1V/13
To reproduce:
- navigate to any page of the survey with a form field
- using only the keyboard to navigate, identify the field that has focus
What should happen: I can clearly identify the focused field.
What actually happens: For checkboxes, select menus, and text fields I cannot immediately identify the currently focused field. This is particularly tricky with checkboxes since the :focus-within on the wrapper indicates (for users who can perceive the color change) that my focus is on a checkbox, but not which checkbox.
More detail: These styles remove the browser's default focus indicator and rely on a low contrast box shadow:
:focus:not(:focus-visible) {
outline: none;
}
.form-control:focus {
color: #212529;
background-color: #fff;
border-color: #86b7fe;
outline: 0;
box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
}
In practice, that makes the color combination #1C375A on #212424, which has a 1.3:1 contrast ratio.
Potential fix:
This block of CSS puts a yellow outline (#ffff00) on the fields (contrast ratio of 14.6:1):
.form-control:focus, .form-check-input:focus, .form-select:focus {
outline: .2em solid ffff00;
outline-offset: .1em;
}
Platform: Firefox 114 / Windows 11
WCAG failure: This constitutes a WCAG SC 1.4.11 Non-text Contrast (Level AA) failure.
Image demonstration: This image shows each of four different form field types with the site's own focus indicators (left side of image) and then shows the same field types with the CSS I proposed above (right column).
The most compelling difference is the "Visual impairments" checkbox, in my opinion.
