1776592 - The new blue focus style is not contrasted enough according to the background

Status: VERIFIED FIXED

(Core :: Widget, defect, P3)

Description

[Julie]

Attachment: Focus style is a blue border but here, on a blue background, it is really difficult to see

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:101.0) Gecko/20100101 Firefox/101.0

Steps to reproduce:

1. Go on a website where there is a blue background for example (you can test it here: https://codepen.io/juliemoynat/pen/PoRYWoN ) ;
2. Navigate through the TAB key from focusable element to focusable element.

Actual results:

The focus style is not contrasted enough according to the background because it is blue and blue on blue is not visible, for example (but it could be other colours).

Expected results:

The focus style should either adapt to the background colour to make sure it is visible enough or, it should not be blue.

Webkit used to have a blue focus style and this was really a problem. Chromium has changed it to a white and black focus style (white outline outside and black outline inside).

In the Firefox 100 release notes, we can read this : "Firefox has a new focus indicator for links which replaces the old dotted outline with a solid blue outline. This change unifies the focus indicators across form fields and links, which makes it easier to identify the focused link, especially for users with low vision."
(Source: https://www.mozilla.org/en-US/firefox/100.0/releasenotes/)

I'm sorry to tell that, especially for users with low vision, the focus style is still not visible in some contexts…

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::CSS Parsing and Computation' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Emilio Cobos Álvarez (:emilio)]

It's not blue (always at least), it's the accent color, and authors can customize it e.g. by using accent-color: currentColor. Form controls have the same issue, right? If you put a blue background and a checked checkbox on top you have the same problem in all browsers.

We could, I guess, use the current text color for the auto outline, or do something more fancy like having two . Thoughts, asa?

Comment 3

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1776592 - Make auto outline draw two differently-colored strokes instead of one. r=mstange

Comment 4

[Julie]

Yes, there is the same issue for form controls but my ticket was not only about focus style for links even if this is how I've discovered the issue.

We know that most people unfortunately don't care about accessibility so I think it is really important for the default focus style to be contrasted enough no matter the background colour.

I think that using the text colour can be a problem for text fields because if this is the text field colour which is used, it can be insufficiently contrasted (dark blue background for the page, white background for the field and black text in the field = black outline and dark blue) and even if the website is using poor contrast for links, etc.

I think the Chromium style is a good idea.

Comment 5

[Asa Dotzler [:asa]]

(In reply to Emilio Cobos Álvarez (:emilio) from comment #2)

We could, I guess, use the current text color for the auto outline, or do something more fancy like having two . Thoughts, asa?

Let's try the two. Eventually we should probably work with UX to align with Chrome/Edge but I think that doesn't agree well with the current theme.

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/99d1caaa88e2
Make auto outline draw two differently-colored strokes instead of one. r=mstange

Comment 7

[Cristina Cozmuta (:CrissCozmuta)]

Backed out for causing reftest failures on outline-auto-002.html. CLOSED TREE
Backout link
Push with failures
Link to failure log
Failure line :
REFTEST TEST-UNEXPECTED-FAIL | layout/reftests/outline/outline-auto-002.html == layout/reftests/outline/outline-auto-002-ref.html | image comparison, max difference: 134, number of differing pixels: 1

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/8af2329af07a
Make auto outline draw two differently-colored strokes instead of one. r=mstange

Comment 9

[Sandor Molnar[:smolnar]]

https://hg.mozilla.org/mozilla-central/rev/8af2329af07a

Comment 10

[Bogdan Maris, Desktop Test Engineering]

Reproduced the initial issue using an old Nightly from 2022-06-26, verified that using latest Firefox 104.0b5 across platforms (MacOS 11.6, Windows 10 64bit and Ubuntu 18.04) the focus ring has now an extra white color for a better visual effect.

Comment 11

[Julie]

Hi,

If you test my CodePen on Firefox Nightly, you can see that the double-color focus style works only for links but not for form fields or button.

Moreover, I don't understand why the choice to keep the blue color has been made because there are cases where neither the blue nor the white would be contrasted enough. That's why Chromium has made the choice to use white and black. Why not make the same choice?

Comment 12

[Emilio Cobos Álvarez (:emilio)]

(In reply to Julie from comment #11)

If you test my CodePen on Firefox Nightly, you can see that the double-color focus style works only for links but not for form fields or button.

That's somewhat expected since those already used a triple-colored outline (though you're right that it has less contrast).

Moreover, I don't understand why the choice to keep the blue color has been made because there are cases where neither the blue nor the white would be contrasted enough. That's why Chromium has made the choice to use white and black. Why not make the same choice?

That's expected, we use the accent color to style checkboxes / form controls / etc, so changing it probably needs more UX feedback and so on, see comment 5.

Comment 13

[Julie]

Thank you for your answer.

So, has the problem been addressed to the UX team? Is there anything I can do to get these two issues to be considered?

Comment 14

[Emilio Cobos Álvarez (:emilio)]

Filing another bug would be the way to go. Btw, Chrome on macOS doesn't use black/white, it uses the OS accent color like we do.