A11y: Colour contrast and information conveyed exclusively via colour is not accessible

[daniellekirkwood]

Information conveyed exclusively via colors is not accessible to blind and color-blind users. Information should therefore also be made available through additional means.

A notice: The contrast ratios in the alternative displays "dark" and "high contrast" also do not
meet the minimum requirements. Selected menu elements (example marked in red) of the navigation areas are contrasted too little with a ratio of 1.2:1 and 1.4:1 compared to non-selected menu elements (example marked in blue). The minimum requirement of 3:1 is therefore not met.

[t3chguy]

Worth pointing out this does not affect screen reader users as we expose the information also via aria-selected

[t3chguy]

#14858 #14550

[daniellekirkwood]

@janogarcia I'm assigning this to you as while we're working on the colour contrast the actual underlying issue here is how and where we use colour to convey important information which should be addressed as part of the compound work.

[janogarcia]

This won't be relevant anymore once we implement the new designs @americanrefugee has been working on. I'm making sure we don't rely exclusively on color to convey information for the new UIs/components.

[daniellekirkwood]

Ok great -- we'll leave this open for now but know that it has a dependancy on that other work.

@janogarcia : Note that while the example shown is the header (soon to be updated) there are likely to be other places in the app that run into these sorts of issues

[daniellekirkwood]

@gaelledel & @nadonomy if we have confidence that we are moving away from relying on colour to convey information then this issue can be closed. I have not yet been given that confidence so it's still open. Is there a page in compound that talks about this as a best practice? What are the guardrails we've put in place to not do this in future?

[gaelledel]

@daniellekirkwood Yes, we're moving towards a more accessible language throughout. You can find guidance on this topic here https://compound.element.io/?path=/docs/foundations-accessibility--docs

[daniellekirkwood]

Great! Closing :D