Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Increase logo visibility in contrast themes / high-contrast mode #463

Open
Tracked by #454
thibaudcolas opened this issue Feb 26, 2024 · 0 comments
Open
Tracked by #454
Labels
accessibility bug Something isn't working

Comments

@thibaudcolas
Copy link
Member

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:

.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.

@thibaudcolas thibaudcolas added bug Something isn't working accessibility labels Feb 26, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
accessibility bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant