Page MenuHomePhabricator

Suggested edits - low contrast issue for .suggested-edits-difficulty-indicator
Open, Needs TriagePublic

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

.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 colour.
Design updates TBD

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMay 26 2020, 11:21 PM
RHo added a comment.Jun 11 2020, 9:18 AM

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