[SPIKE] Increase form control borders to 3:1 WCAG AA contrast ratios

[cee-chen]

Summary

closes #7509

Before

Light mode	Dark mode

After

Light mode	Dark mode

Note: Sass and Emotion outputs transparent colors in rgba() vs hex codes with alpha. You can convert the rgba colors to hex using https://rgbacolorpicker.com/rgba-to-hex before checking the contrast in https://webaim.org/resources/contrastchecker/

QA

• https://eui.elastic.co/pr_7930/#/forms/form-controls

General checklist

• Browser QA
  • Checked in both light and dark modes
  • Checked for accessibility including `keyboard-only and screenreader modes
  • Checked in Chrome, Safari, Edge, and Firefox
    - [ ] Checked in mobile
• Docs site QA - N/A
• Code quality checklist
  - [ ] Added or updated jest and cypress tests
  • Updated visual regression tests
• Release checklist
  • A changelog entry exists and is marked appropriately.
  • If applicable, added the breaking change issue label (and filled out the breaking change checklist)
• Designer checklist
  • If applicable, file an issue to update EUI's Figma library with any corresponding UI changes. (This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request)

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: a0f78b0

History

• 💔 Build #2464 failed 9b736c0
• 💔 Build #2457 failed 393304b
• 💚 Build #2455 succeeded d48e781
• 💔 Build #2445 failed 49b4877
• 💔 Build #2444 failed fb49f65

[cee-chen]

Going to go ahead and close this - this isn't something we plan on implementing in the default EUI theme in the near future, although it can certainly be reused for a future high contrast theme.