Hello, I’m trying to design a fully accessible course and it’s been audited in high contrast mode using Windows 11 (left alt + left shift + PrtScn). I notice that the buttons states are not differentiated so its not possible to tell what is active, disabled, etc. In this screenshot I have an open input where something has been submitted, so the save button is inactive and clear button active. As you can see both are the same.
The background colours of this button are: active: #1A73E8 hover: #174EA6 disabled: #DADCE0
Is this an issue with the colour choices? Can it be fixed?
I don’t have an answer to your question but I wanted to thank you for mentioning high contrast mode using Windows 11 (left alt + left shift + PrtScn) as I never knew this existed! It works pretty well on my Windows 11 machine.
I’m intrigued to know if the button state issue can be fixed, as it’s Windows doing all the work here (I assume), rather than Evolve.
Interestingly, the buttons in my dialog screens have a hover state (the outline changes), but other buttons do not.
@LaurynS we did do some QA on Evolve in Windows high contrast mode a couple of years ago, and fixed some issues to make sure it worked on a fundamental level, but we haven’t revisited it since. I will raise it with the dev team and see if it’s something we can factor in again in the future.
It may be worth considering creating your own high contrast article style within evolve that can be switched on via Logic.
Ahh that’s what I expected. I wasn’t very familiar with high contrast mode myself until this audit, but I’m impressed how well most of the features pull through! Have been able to fix most of my issues.
That’s an excellent point about the logic, i’d been thinking of creating something similar for an “enlarged text” option too.
It’s frustrating when accessibility audits only tell you what they believe to be wrong and don’t give you any evidence as to why or information as to how to resolve it…
That said, I’m sure there is some work we could do on Evolve to improve the experience for learners using visual accessibility settings like Windows High Contrast Mode - or the various settings available in macOS:
Thank you for your thoughtful response. You’re right in that its not a straightforward solution, as it stands it seems the best solution would be creating an article style for high contrast mode switched on by logic. Inevitably I think every high contrast mode differs from windows, mac, and the browser itself.