WCAG 2.0 fail – poor accessibility

[sheldrake]

Hi,

It appears that, perhaps regardless of theme colors, the sidebar text is set at 60% translucency, with the resulting contrast failing WCAG 2.0. For example.

Anyway I can fix this? Or does it need the Mattermost team to do its thing?

Thanks in advance.

[lindy65]

Hi @sheldrake,

Thanks for your feedback!

Chatting to our UX designer, he responded with:
Actually depends on the theme, if we don't have it reduced in opacity, then there will not be a lot of differentiation between inactive items, and unread items etc.

Perhaps you’d like to join our Contributors’ Team where you can join the UX Design Channel to discuss this issue further?

[sheldrake]

Thanks Lindy.

I remain confused. On one hand your UX designer says it depends on the theme, and on the other he intimates that the difference is set your end.

Here’s the theme I’ve applied:

{"sidebarBg":"#00B0A0","sidebarText":"#fff","sidebarUnreadText":"#fff","sidebarTextHoverBg":"#136197","sidebarTextActiveBorder":"#FEC019","sidebarTextActiveColor":"#FFFFFF","sidebarHeaderBg":"#404040","sidebarHeaderTextColor":"#FFFFFF","onlineIndicator":"#7DBE00","awayIndicator":"#DCBD4E","mentionBj":"#FBFBFB","mentionColor":"#2071A7","centerChannelBg":"#f2f4f8","centerChannelColor":"#333333","newMessageSeparator":"#FF8800","linkColor":"#2f81b7","buttonBg":"#1dacfc","buttonColor":"#FFFFFF","errorTextColor":"#a94442","mentionHighlightBg":"#f3e197","mentionHighlightLink":"#2f81b7","codeTheme":"github"}

As you can see, there is no opacity. The distinction between font color and background couldn’t be clearer. But as soon as Mattermost applies 60%, the contrast fails WCAG 2.0. I agree that themes must distinguish inactive and unread items, but this clearly is not then the way to do it.

This is unacceptable and we need to fix it. Our application of Mattermost in particular is aimed at a community that values digital inclusion, encompassing accessibility.

Thanks in advance for your consideration.

[lindy65]

Thanks for your detailed feedback @sheldrake!

I’ll chat to the UX designers again and attempt to get clearer feedback / a way forward for this issue.

I’ll post back here when I have some answers

[asaad]

Hey Sheldrake, okay so as you know, we need to differentiate between the active/inactive items. If we decide to do any such thing such as a reduced opacity, or a reduced color in terms of lightness for the inactive items, then this issue is sure to come again for specific themes.

The issue will appear with any theme that does not have a good enough contrast between the sidebar background, and the sidebar text.

The example here of Ian Tien shows what it would be like, if it didn’t have any opacity and just a white color. As you can see, that even without the opacity, the contrast between the sidebar background and the text isn’t really that much, so if we go with any other approach other than reduced opacity such as or lightness/darkness on the inactive items, it is going to give us a contrast issue, as the initial contrast isn’t good enough to begin with. The ideal case would actually be to use themes that have a distinct contrast between the sidebar background and the sidebar text.

[asaad]

I’m also posting an example of how it looks if we just remove the opacity from all items. As you can see, since I don’t have that distinction between inactive/active/unreads, it’s quite hard to see what’s going on in the sidebar (especially if your sidebar has a lot of items).

[asaad]

Here’s an example of Slack with the same bg, and white text.

[sheldrake]

Hi assad, pleased to meet you.

As a designer I know you’ll agree that accessibility is essential. Indeed, it’s widely recognized, as again I’m sure you know, to help everyone whether they have a disability or not. If I may pick out the most important sentence in your reply:

If we decide to do any such thing such as a reduced opacity, or a reduced color in terms of lightness for the inactive items, then this issue is sure to come again for specific themes.

Exactly. If you decide. And indeed, if you decide on this as do others, then you’ll all get a FAIL in terms of WCAG 2.0 just as they would / do. But that’s not a defence of the design, that’s a defence of poor design.

I’m not a designer and I’m not a web accessibility expert, just someone who cares for digital inclusivity. I can invite experts to this thread however if you think this would be useful.

[asaad]

Yeah definitely, that would be of great help. Would love to see and experiment with others alternatives, a simple alternative that I can see for now in cases where the initial contrast is not that much, would probably be to have 2 different theme settings for the sidebar color (one for active items, and one for inactive ones). Because as I’ve said above, if we just have the same color for active/inactive items, then the distinction between them would be severely affected.