Suggested edits - low contrast issue for .suggested-edits-difficulty-indicator
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	Etonkovidova
	May 26 2020, 11:21 PM

Description

On Special:Homepage the difficulty tag fails Web tool Accessibility audit for not having enough contrast ratio between the text and background color:

i. Hard tag

Screen Shot 2020-05-25 at 9.25.05 PM.png (784×530 px, 135 KB)

.suggested-edits-taskexplanation-additional-info .suggested-edits-difficulty-indicator-hard {
    background-color: rgba(179,36,36,0.2); 
    color: #b32424; 
}

ii. Medium tag

.suggested-edits-taskexplanation-additional-info .suggested-edits-difficulty-indicator-medium {
  background-color: rgba(172,102,0,0.2);
  color: #ac6600;
}

NOTE: The opacity 0.2 over the rgba(234,243,255,0.5) pale blue background causes a mixed "muddy" colour in both cases.

Proposed solution

Update all the difficulty tags (easy, medium, hard) to be at least WCAG AA compliant on any background color.

Utilize the same color tokens as in the message component. The border with a darker tone (e.g. border-color-success) and the text with color-base #202122 so the contrast between text and background is WCAG AA compliant.

Details

	Subject	Repo	Branch	Lines +/-
	Suggested edits: update task level indicator color contrast	mediawiki/extensions/GrowthExperiments	master	+42 -54

Customize query in gerrit

Related Objects
Search...

		Status	Subtype	Assigned	Task
		Open	Design	None	T311433 Poor contrast for archived questions on the Homepage
		Resolved		Sgs	T253706 Suggested edits - low contrast issue for .suggested-edits-difficulty-indicator

Event Timeline

Etonkovidova created this task.May 26 2020, 11:21 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMay 26 2020, 11:21 PM

RHo mentioned this in T247999: Newcomer tasks: animate transitions between panels.May 28 2020, 8:40 PM

This is because the background colour has an opacity rgba(179,36,36,0.2); over a non-white layer, so the #b32424 text ends up being over a darker color (#E7CED3) than the hex version of #F0D3D3 of Red30@20%. The same issue occurs on the medium tag as well as was originally captured on T250222.

I'll put some proposals to update the difficulty tags to be at least WCAG AA contrast compliant.

RHo updated the task description. (Show Details)Jun 11 2020, 9:29 AM

RHo added a project: Growth Design.

RHo moved this task from 📗Backlog (Current sprint) to 🔥To Do on the Growth Design board.

RHo moved this task from Inbox to Triaged but Future on the Growth-Team board.

RHo updated the task description. (Show Details)Jun 11 2020, 9:33 AM

RHo edited projects, added Growth-Team (Sprint 0 (Growth Team)); removed Growth-Team.Jun 11 2020, 11:24 AM

RHo moved this task from Incoming to Needs Design/Design Doing on the Growth-Team (Sprint 0 (Growth Team)) board.

RHo mentioned this in T268707: Add a link: task type info in suggested edits module.Feb 26 2021, 1:41 PM

RHo claimed this task.Feb 26 2021, 1:43 PM

RHo triaged this task as Medium priority.

RHo updated the task description. (Show Details)

RHo moved this task from 🔥To Do to 💪In Progress on the Growth Design board.

MBinder_WMF added a project: Growth-Team-Filtering.Apr 15 2021, 6:48 PM

• Rileych removed a project: Growth-Team-Filtering.Apr 20 2021, 4:26 PM

RHo mentioned this in T278577: Add a link: add robot icon to help panel header.Apr 26 2021, 10:13 AM

Additionally, the following labels (div.suggested-edits-difficulty-indicator.suggested-edits-difficulty-indicator-easy and div.suggested-edits-difficulty-level.suggested-edits-difficulty-level-easy has low contrast (the screenshots are from Chrome webdev Lighthouse report):

Screen Shot 2022-02-15 at 12.35.26 PM.png (592×1 px, 150 KB)

kostajh added a project: Accessibility.Apr 6 2022, 1:37 PM

Volker_E moved this task from Unsorted to Colors on the Accessibility board.May 18 2022, 2:51 PM

KStoller-WMF reassigned this task from RHo to • BKots-WMF.Jul 8 2022, 3:36 PM

Hi team, after consulting @bmartinezcalvo on our design system color styles and guidelines, we could work with the following;
Option 1
Same color tokens as in the message component. The border with a darker tone (e.g. border-color-success) and the text with color-base #202122 so the contrast between text and background is good.

Option 2
Dark color background for the tag to be highlighted.

What do you think?

Volker_E awarded a token.Aug 12 2022, 2:57 PM

@BKots-WMF Thank you for working on this! I'll update this task with the first design option you presented.

KStoller-WMF updated the task description. (Show Details)Aug 12 2022, 4:53 PM

KStoller-WMF moved this task from Needs Design/Design Doing to Ready for Development on the Growth-Team (Sprint 0 (Growth Team)) board.

KStoller-WMF removed • BKots-WMF as the assignee of this task.Aug 20 2022, 4:26 PM

KStoller-WMF added a subscriber: • BKots-WMF.

Iniquity added a parent task: T311433: Poor contrast for archived questions on the Homepage.Aug 20 2022, 6:21 PM

bmartinezcalvo mentioned this in T313357: Define core components.Aug 23 2022, 4:52 PM

I believe the colors used in the level indicators below the suggested edits card are in some pantone sync with the ones used in the "Select type of edits" dialog. Can you confirm it @RHo?

Screenshot 2022-10-24 at 12.16.54.png (1×2 px, 521 KB)

Would this change affect any other interfaces? Asking this because it looks like we would like to keep using the 3-level color association for more interfaces in the future in leveling up (figma) and using the message component color association maybe could create some confusion. What do you think @BKots-WMF
@RHo ?

In T253706#8338190, @Sgs wrote:

I believe the colors used in the level indicators below the suggested edits card are in some pantone sync with the ones used in the "Select type of edits" dialog. Can you confirm it @RHo?

Sorry @Sgs - the image above F35619894 is showing as a "Restricted file" - maybe some deprecation of a previous issue introduced with permissions changes on Phab (T310833) - could you please update permissions to view?

Would this change affect any other interfaces? Asking this because it looks like we would like to keep using the 3-level color association for more interfaces in the future in leveling up (figma) and using the message component color association maybe could create some confusion. What do you think @BKots-WMF
@RHo ?

RHo mentioned this in T310833: Uploaded files via the drag-and-drop are defaulting to private-access.Oct 24 2022, 5:35 PM

It should be visible now @RHo

In T253706#8338190, @Sgs wrote:

I believe the colors used in the level indicators below the suggested edits card are in some pantone sync with the ones used in the "Select type of edits" dialog. Can you confirm it @RHo?

Hi @Sgs - yes, but the darker tone Yellow700, Green700, and Red700 in for example the levels icons and text in the above screenshot will be used in the outline of the updated tags outline, so I don't think it is an issue.

Would this change affect any other interfaces? Asking this because it looks like we would like to keep using the 3-level color association for more interfaces in the future in leveling up (figma) and using the message component color association maybe could create some confusion. What do you think @BKots-WMF
@RHo ?

For the reason above (Easy/Med/Mard levels still using the same Green/Yellow/Red colours respectively), I don't see the changes being at odds with future levelling up work.

In T253706#8339431, @RHo wrote:

Hi @Sgs - yes, but the darker tone Yellow700, Green700, and Red700 in for example the levels icons and text in the above screenshot will be used in the outline of the updated tags outline, so I don't think it is an issue.

Thanks for clarifying. I tried to implement the new design with the darker outline but I don't know how to achieve the border with CSS in a concave polygon. I tried using :before and clip-path but I don't think creating layers works here. Ideas welcome. Can you share the link to the figma design, maybe I can look how they implement it :) Alternatively we could simplify the shape.

Hi @Sgs,
Yes, I agree with @RHo We have maintained the colors and just added the outline, hopefully this shouldn't be an issue.

In T253706#8340866, @Sgs wrote:

In T253706#8339431, @RHo wrote:

Hi @Sgs - yes, but the darker tone Yellow700, Green700, and Red700 in for example the levels icons and text in the above screenshot will be used in the outline of the updated tags outline, so I don't think it is an issue.

Thanks for clarifying. I tried to implement the new design with the darker outline but I don't know how to achieve the border with CSS in a concave polygon. I tried using :before and clip-path but I don't think creating layers works here. Ideas welcome. Can you share the link to the figma design, maybe I can look how they implement it :) Alternatively we could simplify the shape.

Hi @Sgs - I had a go by adding a :before and updating styling on :after to achieve this effect in Chrome and Safari (it is admitted a bit janky in Firefox):

Here's the link to the codepen which has the gory hack details in case it helps:
https://codepen.io/reets/pen/qBKByVo

In T253706#8343678, @RHo wrote:

Here's the link to the codepen which has the gory hack details in case it helps:
https://codepen.io/reets/pen/qBKByVo

Thank you for that, I had not think of using the :before/:after borders. Nice!

Change 849593 had a related patch set uploaded (by Sergio Gimeno; author: Sergio Gimeno):

[mediawiki/extensions/GrowthExperiments@master] Suggested edits: update task level indicator color contrast

https://gerrit.wikimedia.org/r/849593

gerritbot added a project: Patch-For-Review.Oct 26 2022, 2:51 PM

I have updated the styles for both the homepage and the help panel.

	Before	After
Homepage
Help panel

I can confirm lighthouse is not yielding this particular color contrast anymore. Credit on the solution goes to @RHo :) Thanks for working on this @BKots-WMF !

Sgs changed the task status from Open to In Progress.Oct 26 2022, 2:55 PM

Sgs moved this task from In Progress to Code Review on the Growth-Team (Sprint 0 (Growth Team)) board.

kostajh moved this task from Code Review to QA on the Growth-Team (Sprint 0 (Growth Team)) board.Oct 27 2022, 7:40 AM

Change 849593 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Suggested edits: update task level indicator color contrast

https://gerrit.wikimedia.org/r/849593

ReleaseTaggerBot added a project: MW-1.40-notes (1.40.0-wmf.8; 2022-10-31).Oct 27 2022, 8:00 AM

Maintenance_bot removed a project: Patch-For-Review.Oct 27 2022, 8:30 AM

@Sgs @RHo one issue with the solution (sorry I didn't notice in code review) is that the label doesn't look correct if the user scales the browser zoom.

90%:

110%:

120%:

130%:

150% (this one is OK):

In T253706#8362223, @kostajh wrote:

@Sgs @RHo one issue with the solution (sorry I didn't notice in code review) is that the label doesn't look correct if the user scales the browser zoom.

90%:

110%:

120%:

130%:

150% (this one is OK):

Oops, this is an issue with the previous version as well, so I'll make a new task for it: T322197: Suggested edits: Difficulty label does not display properly at various zoom levels

• Urbanecm_WMF changed the task status from In Progress to Open.Nov 7 2022, 8:45 AM

In T253706#8346142, @Sgs wrote:

I have updated the styles for both the homepage and the help panel.

Before After

Homepage

Help panel

I can confirm lighthouse is not yielding this particular color contrast anymore. Credit on the solution goes to @RHo :) Thanks for working on this @BKots-WMF !

Thx, @Sgs! I checked in wmf.8 - the fixes pass the accessibility check.

	F35631442: Screenshot 2022-10-26 at 16.38.02.png
	Oct 26 2022, 2:55 PM

	F35631444: Screenshot 2022-10-26 at 16.37.10.png
	Oct 26 2022, 2:55 PM

	F35631438: Screenshot 2022-10-26 at 16.44.02.png
	Oct 26 2022, 2:55 PM

	F35695919: image.png
	Nov 2 2022, 10:06 AM

	F35695916: image.png
	Nov 2 2022, 10:06 AM

	F35695914: image.png
	Nov 2 2022, 10:06 AM

	F35695912: image.png
	Nov 2 2022, 10:06 AM

Suggested edits - low contrast issue for .suggested-edits-difficulty-indicatorClosed, ResolvedPublicActions

Description

Proposed solution

Details

Related ObjectsSearch...

Event Timeline

Suggested edits - low contrast issue for .suggested-edits-difficulty-indicator
Closed, ResolvedPublic
Actions

Related Objects
Search...