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.
You’re welcome! I think the keyboard shortcut is a legacy feature from windows 10, as 11 has various contrast “themes” in the “ease of access” settings - useful for a range of accessibility needs.
Ah yes, I didn’t notice before but my buttons outline colour also changes when hovering. It’s just a shame that you can’t distinguish what’s active immediately without it.
@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.
From what I can tell the answer is that this is something that is defined in Windows’ High Contrast settings… certainly there is a setting specifically for disabled text/buttons:
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.
