1864052 - Increase color contrast of focus outline colors for web content

Status: RESOLVED FIXED

(Core :: Widget, enhancement, P3)

Description

[Anna Yeddi [:ayeddi]]

Attachment: Edge focus indication against purple and Fx indication on Windows and MacOS.png

We want to ensure the focus outline is visible against all backgrounds for in-content UI, i.e. data:text/html,<button>Tab to me</button>.

Currently Firefox provides double outline using moz blue colors and primary button colors and accent color: inner outline is opaque and the outer is partially transparent. This does not work well against blue backgrounds and backgrounds with low color contrast with the blue.

Using two different colors for the outline - i.e. black and white as Edge does - would provide the best experience against all backgrounds. Using neutral colors would also likely to fit into the most color schemes of websites and hopefully prevent authors from removing the focus outline or replacing it with the colors that would decrease the accessibility of the focused state.

Comment 1

[Emilio Cobos Álvarez [:emilio]]

I'm confused, the default outline uses three colors for widgets, and two for regular elements. Comment 0 is not linking to the right code, the right code is here

Comment 2

[Juliana Gaibler [:juliana]]

Attachment: compare.png

Anna, Morgan, and I have been chatting about how to make the focus rings in Firefox more accessible, so I'll try to summarize what came out of it :)

What we agreed on is that it would be good to remove the 2px translucent outermost focus ring and replace it with a 1px white ring that directly surrounds the inner focus ring without a gap (see attached image). Additionally, the focus ring for links should be the same as for buttons, text areas, etc.

I think we weren't quite as clear on whether to respect the accent color. A color contrast of 7:1 or greater would be best for the ring color. But, for instance, the accent blue of macOS we're using right now has a contract of 4:1. Accent colors like purple are better with 6.2:1, but if a user selects yellow, the contrast is only 1.5:1.

As a fallback, or if we didn't use accent colors at all, we said that our blue-60 (#0250BB) would be a good choice. Morgan also mentioned that we have the "use system colors" checkbox, and if we decide not to use accent colors by default, the focus ring color should maybe still respect that setting.

Comment 3

[Emilio Cobos Álvarez [:emilio]]

Attachment: Bug 1864052 - Make native widgets use the same auto style outline. r=spohl,mstange,#layout

As per the UX request. This actually cleans up a bit, so that's nice.

Make the themed outline code not pre-inflate the rect that's given to
widget, so as to handle offsets in one place only.

Invert the colors for checkbox/radio as per bug 1941755 comment 2.

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/ae8a45ec77e8
Make native widgets use the same auto style outline. r=mstange

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/d2cf74f7ddb3
Fix rendering of outline-style auto with no rounded corners and outline-offset.

Comment 6

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/mozilla-central/rev/ae8a45ec77e8
https://hg.mozilla.org/mozilla-central/rev/d2cf74f7ddb3