browser: a11y: fix contrast colors for input elements

[hcvcastro]

Change-Id: I04397dee8c1c259aa5ed2766e58cb0908431f3dd
Signed-off-by: Henry Castro hcastro@collabora.com

[caolanm]

These tests fail because the screenshots no longer match. e.g.

LOGGER [2026-02-06T16:24:07.935Z]
Error in visual regression found: 0.15
1) Combobox
cy:log ✱ Starting test: integration_tests/desktop/writer/jsdialog_widgets_spec.js / JSDialog widgets visual tests / Combobox

[hcvcastro]

hese tests fail because the screenshots no longer match. e.g.

LOGGER [2026-02-06T16:24:07.935Z] Error in visual regression found: 0.15 1) Combobox cy:log ✱ Starting test: integration_tests/desktop/writer/jsdialog_widgets_spec.js / JSDialog widgets visual tests / Combobox

Thanks. The base images have been updated.

[pedropintosilva]

thanks Henry, I appreciate the effort but I think we have few problems where using a dark color doesn't necessary gives us higher contrast see the multiple items that have now less contrast (between background and text and background and widget).

What we were trying to improve:

• Tab "Format" (Dialog "Paragraph")
  • Some input fields in the dialog have low contrast, as both the borders and the backgrounds of the input fields have a contrast ratio of less than 3:1. In specific the "Text:" input field in the Contents section.
• Tab "References" (Dialog "Table of Contents")
  • Some input fields in the dialog have low contrast, as both the borders and the backgrounds of the input fields have a contrast ratio of less than 3:1. The "Title" text input field (border + background barely visible against white dialog). "Structure and Formatting" fields (same issue).

I think we were too far with this change because we didn't need to increase the contrast for both border and background at least not so aggressively and we end up affecting many other widgets.

The border and background on input fields both fail against 3:1 contrast, yes but that just means that neither visual indicator provides sufficient contrast. So, we need at least one of them to meet 3:1 (for more info see WCAG 1.4.11):

• Let's please just fix the border --color-border-dark to something like #949494 (3:1 against white) would be sufficient on its own for input fields.
• Let's please postpone the additional change --color-background-dark to something like #d0d0d0.
• Do not use blue, it's normally a color reserved for focus status and it also doesn't grant us a higher contrast in some of the case.
  • Currently with this change it seems that every input, combobox, toolbar item, and button now has blue borders
  • Let's please avoid change CSS vars that do not pertain to the problem: --color-border, --color-background-darker, --color-border-darker.
    • Only --color-border-dark and maybe --color-background-dark needed changes.

Screenshots

Function Wizard

---

Chart Wizard

---

Sidebar

Styles Sidebar

---

Checkbox disable

---

radio disabled

---

treeview

---

Function Wizard

---

[hcvcastro]

• Let's please just fix the border --color-border-dark to something like #949494 (3:1 against white) would be sufficient on its own for input fields.

No problem, changes done.

[pedropintosilva]

Thanks @hcvcastro but don't you need to also update the cypress base screenshots?

[hcvcastro]

Thanks @hcvcastro but don't you need to also update the cypress base screenshots?

Yes, I'm waiting for the Cypress errors to download the actual images.

[pedropintosilva]

Thanks,

We have updated the cypress images here. Henry can you please write here what was the command you used.

I wonder why the checkbox differs so much : https://github.com/CollaboraOnline/online/pull/14296/changes#diff-6b8b2f35ea423d3aca0cff99eaae4375d25e511e8cf253052456db50ea29002b

cc: @mohit-marathe, just so you know, this PR updated multiple cypress screenshots

[hcvcastro]

We have updated the cypress images here. Henry can you please write here what was the command you used.

I have modified the script to include the actual screenshots for visual regression in the Cypress node: https://cpci.cbg.collabora.co.uk:8080/job/github_online_master_debug_vs_co-26.04_cypress_desktop.
So, when it fails, it will link to the images, allowing you to download and replace them in your code.