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

fix(a11y): Add support for Windows high contrast mode #3139

Merged
merged 1 commit into from
May 13, 2024

Conversation

DafyddLlyr
Copy link
Contributor

@DafyddLlyr DafyddLlyr commented May 13, 2024

What does this PR do?

  • Ignores the forced-colors media query on img elements to ensure we always have high enough contrast on our images

Context

We've been unable to recreate the issue DAC_Inverted_Colours_Usability_01 (page 89) from the accessability report. We asked for further feedback and got the following response -

Response from DAC -

I tested the inverted colours by using the windows settings and applying the ‘night sky’ preset. I was able to replicate the issue on Journey 1 step 14, however I could not replicate the issue again on Journey 1 step 34. It is frequent that elements do not contrast appropriately when these settings are applied, however if these images are implemented as elements, then the CSS property ‘forced-color-adjust: auto;’ can be applied. This CSS property is used to override the default colour adjustments made by the user agent (typically the web browser) for elements that have their colour adjusted automatically to improve readability or contrast, such as in high contrast mode.

To test

This can be tested in the browser via the Dev Tools > Rendering command panel in Chrome, where we can emulate the forced colors media query -

image

Questions

  • Does this work on Windows "night sky" mode? I'll message on Slack to see if we can manually test once the Pizza is up
  • Is applying this at the theme level too broad? Would it better to repeat this for multiple image elements throughout the codebase?

@DafyddLlyr
Copy link
Contributor Author

Copy link

github-actions bot commented May 13, 2024

Removed vultr server and associated DNS entries

@DafyddLlyr DafyddLlyr force-pushed the dp/windows-high-contrast-mode branch from 3909e04 to 554d2e3 Compare May 13, 2024 12:50
@DafyddLlyr DafyddLlyr requested a review from a team May 13, 2024 14:21
@DafyddLlyr DafyddLlyr marked this pull request as ready for review May 13, 2024 14:21
Copy link
Member

@jessicamcinchak jessicamcinchak left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good - theme-level implementation makes sense to me here ✅

@DafyddLlyr DafyddLlyr merged commit 14acc58 into main May 13, 2024
12 checks passed
@DafyddLlyr DafyddLlyr deleted the dp/windows-high-contrast-mode branch May 13, 2024 14:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants