Try: Make the modal overlay scrim darker

[kjellr]

Over in #7602 (comment), I noticed @afercia bring up the point that the scrim (also known as the color overlay) behind the modal is inconsistent with the color used throughout WP-Admin. This is true — you'll notice that the Media modal brings up a dark background, whereas other modals use the white background.

I know this has been discussed in the past, but now that some time has passed I'm wondering if we'd be open to reconsidering?

The purpose of the scrim is to de-emphasise distracting elements of the screen and focus attention on an important area (in this case, the modal). Darkening the scrim helps fulfill this purpose more effectively by increasing the contrast between the important area and the rest of the page. This seems like a simple change that'd benefit everyone.

For the PR here, I've swapped out the white with black, and adjusted the opacity to match the color used in the media modal's scrim.

Before:

After:

[afercia]

Note: the overlay color was discussed a few times in the past and there was no great consensus (I'm for the darker option for consistency) 🙂 See for example #6261 (comment)

[sarahmonster]

This looks great! With the background and foreground both in white, this change helps provide contrast so that users can better focus on the import information in the foreground, which is the intention of the modal.

Also, it's more in line with almost every scrim pattern I've seen elsewhere on the internet and it's on my personal wishlist for #7602, so I'm biased. 😉

[afercia]

Quickly discussed during today's accessibility bug-scrub.

Anything that makes a dialog work like a real modal interaction, helping users to focus on the specific requested task, is very welcome. Thanks for working on this. Consistency is also important, to avoid users can potentially be confused by different styling in different parts of core.

[mapk]

I just tested it. Looks great! So much more focused.

I've been partial to the white scrim in the past, but that's because I've regularly tested on somewhat blank pages, and it looks/works good in that context. But on pages that are filled with content, the darker scrim works way better at narrowing focus on the modal.

[jasmussen]

👍 👍

At some point, and I keep saying that I hope we can reach that day soon, I would love for all the improvements we've made to components (button/input focus styles) that are exclusive to Gutenberg, to apply to the rest of the UI, so we can bring consistency across the board.

When that day comes, I would love for us to make this scrim not quite as dark — 40% opacity seems way sufficient — and make that consisten across all scrims. But we'll cross that bridge when we get there!