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.

A set of radio buttons, a select menu, a set of checkboxes, and a text field all with a light blue outline alongside the same fields with a vibrant yellow outline.

Devographics / Monorepo

Contrast too light to indicate focused field #238