Page MenuHomePhabricator

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


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

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 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 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.