Increase the color contrast for components like appearance switch, select elements, checkboxes, radio buttons, text fields, text areas, and date fields

Adding some more related links:

• https://yatil.net/blog/non-text-contrast-in-detail-ui-components
• https://knowbility.github.io/knowbility-website/blog/2018/WCAG21-1411Con...

With the image provided, I've updated the Steps to reproduce above.

There are some possible improvements from:

@media (prefers-contrast: more), (forced-colors: active) {

  /* Save button (primary) */
  #edit-submit.form-submit,
  input[type="submit"].button--primary {
    forced-color-adjust: none;
    background-color: ButtonFace !important;
    color: ButtonText !important;
    border: 2px solid ButtonText !important;
    font-weight: bold;
    box-shadow: 0 0 0 2px ButtonText !important;
  }

  #edit-submit.form-submit:hover,
  #edit-submit.form-submit:focus-visible {
    background-color: Highlight !important;
    color: HighlightText !important;
    border-color: HighlightText !important;
    outline: 2px solid Highlight !important;
    outline-offset: 2px;
  }

  /* Preview button (secondary) */
  #gin-sticky-edit-preview.form-submit {
    forced-color-adjust: none;
    background-color: Canvas !important;
    color: ButtonText !important;
    border: 2px dashed ButtonText !important;
    font-weight: normal;
    box-shadow: 0 0 0 1px ButtonText !important;
  }

  #gin-sticky-edit-preview.form-submit:hover,
  #gin-sticky-edit-preview.form-submit:focus-visible {
    background-color: Highlight !important;
    color: HighlightText !important;
    border-color: HighlightText !important;
    outline: 2px solid Highlight !important;
    outline-offset: 2px;
  }

  /* Hide Sidebar Panel button */
  .meta-sidebar__trigger.trigger {
    forced-color-adjust: none;
    background-color: ButtonFace !important;
    color: ButtonText !important;
    border: 1px solid ButtonText !important;
    border-radius: 50%;
    width: 2.25rem;
    height: 2.25rem;
  }

  .meta-sidebar__trigger.trigger:hover,
  .meta-sidebar__trigger.trigger:focus-visible {
    background-color: Highlight !important;
    color: HighlightText !important;
    outline: 2px solid Highlight !important;
    outline-offset: 2px;
  }

  .meta-sidebar__trigger.trigger svg {
    fill: ButtonText !important;
  }
}

But I got a different looking input with forced colors enabled.