GSoC 2022 project idea: Contrast Themes

[thibaudcolas]

Discussion about the Google Summer of Code 2022 project idea “Windows High Contrast mode support”.

Roll out Windows High Contrast mode (also known as Contrast Themes) support to all of Wagtail. This is a continuation of existing work from Wagtail’s accessibility team.

For potential contributors interested in this, please review our Google Summer of Code guidance first, and keep introductions to the #gsoc channel on Slack, and only post here if you have specific questions or comments about this project. Feedback / questions / comments are also very welcome from everyone else.

[thibaudcolas]

For people interested in this project, I would recommend reading the following before asking questions:

• https://wagtail.org/blog/state-of-wagtail-accessibility/
• https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/
• https://wagtail.org/accessibility

[lb-]

Nice article on high contrast mode, CSS custom properties and theming.
https://www.smashingmagazine.com/2022/03/windows-high-contrast-colors-mode-css-custom-properties/

[anujaraj]

This article had been really helpful.Thank you for sharing

[Henokaa]

I made a brief introduction page for the accessibility concept mentioned in wagtail, and why they are useful.
https://github.com/Henokaa/opensource/blob/main/wagtail.txt
feel free to make contribution :)

[thibaudcolas]

Quick blog post by @janehughes to advertise the project idea :) https://wagtail.org/blog/help-us-improve-windows-high-contrast-mode-support-in-wagtail/

[anujaraj]

Hello everyone, I am looking forward to work my proposal over this project. However I am little confused about a few things:

1. I went through the state-of-wagtail-accessibility , I looked into the audits. My question is if we have to include the on going audits or such issues in the proposal or not
2. I also did went through the @media corrections for high contrast- My question is is the whole project about changing the css at different places like nav and buttons etc . or am I am lagging some information
   Thank you

[thibaudcolas]

Good questions :)

1. I’d say yes – it’s good for us to know you’ve been through this and how you see this being helpful, or not. Would also be good for proposals to reflect on what kind of further testing is needed, and how much time to dedicate to that.
2. That’s debatable – either yes, more of this in different places. Or we change how we do colors to start with, so we only change the colors in one place and it reflects everywhere.

See for example the concept of design tokens, and how the Spectrum design system uses this for colors.

@janehughes might have more to say about all of this!

[anujaraj]

Thank you. I had been going through the admin interface. I had seen the styleguide specifically.I shall be exploring it further

[anujaraj]

hello,
I was going through a few articles and was wondering if we can use -
CSS Custom properties while using the @ media (for high contrast active). This will allow using of variables in multiple places according to the requirement for different compenents. Creating a basic CSS Custom properties for a range of colors and widths and sizes, we can utilize the same at different places , making the code much organized and easily accesible.
Apart from this, I have noticed that a web browser plays a crucial role into deciding for a display mode, Are we using windows high contrast mode only or will we consider Forced color display mpde too as it is available on most browsers including chrome whereas high contrast is supported only on edge (little unsure about the availibilty though)

[thibaudcolas]

if we can use CSS Custom properties while using the @ media (for high contrast active)

It’s definitely possible. What you’re proposing seems like a very promising approach to me, definitely worth having on your proposal. Most likely we’d start the project by doing further research to validate this as an approach.

Are we using windows high contrast mode only or will we consider Forced color display mpde too

As far as I understand, "forced-colors" and Windows High Contrast Mode (WHCM) / Contrast themes are the same thing currently. "forced colors" is what it’s called in W3C specifications because it’s a concept that can be applied across lots of browsers / operating systems, but WHCM is currently the implementation.

Also as far as I understand, WHCM works in all browsers on Windows, although with differences (Firefox’s implementation is simpler). We’ll definitely want to consider supporting all variants of "forced colors" themes, though WHCM on Edge is the one that’s the most common.

[anujaraj]

I think I convyed the high contrast and forced color part in wrong way. I meant if we shall consider forced color display mode (i.e using forced-color) OR legacy high contrast (i.e -ms-high-contrast)
I am suggesting if we can use the display mode that works for most browsers( forced-color) and yet create one more css for other browsers like (-ms-high contrast) internet explorer or safari where forced color doesnt work properly. These Css files could be downloaded or put inside a package(this i am still debating on how to implement) and be used during the wagtail installation by user who have exceptional browsers.

[HerambLimaye]

Hello everyone, really looking to submitting my proposal for this idea

[AAC2001]

Hello everyone, I am looking forward to work my proposal over this project. However I am little confused about a few things:

• Good to be part in this work
• Actually , This is my 1st project . At Present, I was studying 2nd year CSE department .
• Can you please explain me breify about how the work was and etc.....
• Thanking you ,

[thibaudcolas]

Hi @AAC2001, welcome :) Please have a look at our Google Summer of Code 2022 wiki page, and for this project in particular, look at the links we shared above. If you have further questions let us know.

[AAC2001]

Hello, @thibaudcolas Nice to talk with you :) would please provide me in which process I have to prepare proposal pdf which was asking to submit.

• Reason
• I am FREASHER to this. so, actually I didn't have any projects and internships before . So,please help me in this.
• Just tell me how to prepare that's enough . After that , I will prepare .
• I think you will help to me in this.

THANKING YOU,

[thibaudcolas]

Sure, please see this post: https://wagtailcms.slack.com/archives/CTL4SFX29/p1649101509755349.

[thibaudcolas]

👋 for people interested in this project, here is an upcoming event I would recommend attending: https://www.youtube.com/watch?v=wLD5CYRhyZY. The speaker works on high contrast themes for the Drupal CMS, so they will likely go through very similar scenarios to what this project involved.