Devographics / Devographics/Monorepo
Contrast too light to indicate focused field
- Dominant language
- TypeScript
- Stars
- 178
- Forks
- 55
- Avg merge
- 1m
- Merged PRs (30d)
- 2
Description
Filling out State of CSS Survey 2023:
https://survey.devographics.com/en-US/survey/state-of-css/2023/hfg5V70I2tPvW2i5wgy1V/13
**To reproduce:**
1. navigate to any page of the survey with a form field
2. 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:
```CSS
: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):
```CSS
.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](https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html) (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.

Contributor guide
No contributing guide indexed for this repository
Research direction
Open the State of CSS Survey 2023 form from the reproduction link and search the repository for the shown .form-control, .form-check-input, and .form-select focus styles. Test keyboard navigation across text fields, select menus, and checkboxes, then verify that every focused control has a clearly visible indicator meeting the stated contrast requirement.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 48/100