Increase logo visibility in contrast themes / high-contrast mode

[thibaudcolas]

Follow-up to #454. The logos of Wagtail users visible on the site homepage don’t display too well in Windows high-contrast mode / contrast themes. This is particularly problematic for the Royal College of Arts logo, which is fully invisible when displayed in a high-contrast "dark" theme.

I think the ideal fix would be to apply similar styles to the ones used for the logos in the site’s dark theme:

wagtail.org/wagtailio/static/sass/components/_logos.scss

Lines 61 to 68 in e8d4514

	.theme-dark & {
	#{$root}__list-item {
	display: flex;
	align-items: center;
	padding: 10px 20px;
	background-color: $color--white;
	border-radius: 3px;
	}

By adding a forced-color-adjust: none alongside the background color, we’d ensure the logos are always displayed with the intended background color. It seems to me like all those styles could be present for all themes rather than forced-colors mode / the dark theme only, so the logos display as consistently as possible.

[GajulaSamatha]

Hello sir,

I have now cleared my doubts (as you suggested, the changes should be in logos.scss, not the Wagtail header logo) and attempted to solve the issue. To confirm, I am attaching screenshots of the output:

1. White-Contrast in system with Light Mode in website.

2. White-Contrast in system with Dark Mode in website.

3. Dark-Contrast in system with Dark Mode in website.

4. Dark-Contrast in system with Light Mode in website.

I tested this in Chrome, Microsoft Edge, and Firefox.

Before enabling contrast mode, the website’s current Light/Dark mode affects the visual changes. However, when switching between system Dark/White Contrast settings, the website does not reflect any changes and maintains its own Light/Dark mode.

Could you please confirm if this is the expected behavior?
I sincerely apologize for the long message.
If there are any mistakes, please excuse me and kindly guide me in the right direction.

Thank you, sir! 😊

[thibaudcolas]

@GajulaSamatha yup, that look like what I’d expect!

[GajulaSamatha]

Thank you so much, @thibaudcolas sir, for confirming that my output meets your expectations. I’m really happy to hear that! 😊

Also, sir, I noticed that our Wagtail logo is not visible in the 2nd and 4th pictures. Shall I try to handle those cases as well? I’ll definitely try my best sir.

[thibaudcolas]

@GajulaSamatha that’s up to you! That issue is logged separately here: #303.

[GajulaSamatha]

Oh ok sir, thank you for your time🙂👍.