The Mattermost interface has a too low color contrast for a few elements

rpkoller commented 2 years ago

Summary

The color contrast of the used theme has a too low color contrast for a few elements and components

Steps to reproduce

accessed a mattermost instance on the latest chrome browser on macos.
used accessibility insights and ran an assessement (alternatively it is also possible to run siteimprov accessibility checker)
checked the jira backlog but found no currently open tickets related to color contrasts but it showed that the goal is to satisfy against WCAG 2.1 AA (as one of the topics implied)

https://mattermost.atlassian.net/jira/software/c/projects/MM/issues/?jql=project%20%3D%20%22MM%22%20AND%20text%20~%20%22color%20contrast%22%20ORDER%20BY%20created%20DESC

Expected behavior

The color contrast should satisfy at least against WCAG 2.1 AA for regular and large text as well as non text contrasts

Observed behavior (that appears unintentional)

What did you see happen? Please include relevant error messages and/or screenshots.

the post_textbox_placeholder text box where you enter new messages has a too low contrast for non text contrast ( has 1,8:1 should have 3:1)
#channelMemberCountText (2,7:1 should have 4,5:1 for regular text - the icon probably passes)
.header-placeholder > span(add channel description placeholder (2,5:1 should have 4,5:1 for regular text)
time[datetime="\32 022-02-01T10\:41\:26\.730Z"](the timestamp of a message 1,9:1 should have 4,5:1 for regular text.
if someone is added to a teamnotification ( the blue username is ok but the greyishadded to the team byhas 2.4:1 but needs 4,5:1 for regular text) same foryou joined the team` notifications
the number of replies count to a thread (has 3,5:1 but needs 4,5:1)
the follow link next to the replies count for a thread (2,5:1 but needs 4,5:1)

just to name a few. best would be to go through the whole interface and test if the AA requirement is met for all interface elements

p.s. and sorry. am a bit in lack of time to go through all the pages at the moment for evaluation but at the same time don't wanted to delay the posting and notification about the issue any further.

amyblais commented 2 years ago

Created a ticket: https://mattermost.atlassian.net/browse/MM-41718.

andrewbrown00 commented 2 years ago

Thanks, @rpkoller, what theme were you using when running the accessibility checks?

rpkoller commented 2 years ago

@andrewbrown00 apologies. your answer slipped through. took a quick look now. looks like my report and the mentioned points were based on denim (version 5.0.3 on macos when reported): denim

andrewbrown00 commented 2 years ago

No worries @rpkoller, thanks for following up and flagging this 🙂

I added a comment in the Jira ticket. Here it is for quick reference:

The design team has been actively working on building accessibility into the updated color themes and will continue to do so. As a principle, we’re making sure we strike a balance between accessibility and carefully chosen visual design choices. We will have a fully accessible (MM-10077) theme in the future that we will be including in the theme selections to ensure we have a fully compliant WCAG theme.

mattermost / mattermost