Page MenuHomePhabricator

Red link: check contrast when placed on messages
Open, LowPublic

Assigned To
None
Authored By
bmartinezcalvo
Jul 10 2023, 2:39 PM
Referenced Files
F37144424: #d73333.png
Jul 20 2023, 10:01 AM
F37144422: #d73333.png
Jul 20 2023, 9:59 AM
F37144380: #d73333.png
Jul 20 2023, 9:46 AM
F37134882: Captura de pantalla 2023-07-10 a las 16.33.47.png
Jul 10 2023, 2:39 PM
F37134880: Captura de pantalla 2023-07-10 a las 16.33.37.png
Jul 10 2023, 2:39 PM
F37134878: Captura de pantalla 2023-07-10 a las 16.33.28.png
Jul 10 2023, 2:39 PM
F37134876: Captura de pantalla 2023-07-10 a las 16.33.18.png
Jul 10 2023, 2:39 PM
F37134871: Captura de pantalla 2023-07-10 a las 16.32.59.png
Jul 10 2023, 2:39 PM

Description

Background

In T337959: Accessibility audit: check the contrast ratio in our Codex components we detected that when there is a Red link within a message or within gray content box, the color-link-red used for default red link is less than the 4.5:1 contrast required for text elements.

In T337444 we decided to update color-Red600 from #d33 to #d73333. This will affect any decision token using color-Red600, so color-link-red will be also updated to #d73333. This means that Red link will be contrasted enough on #fff and #f8f9fa backgrounds, but it won't be contrasted enough on any of the message component's background or gray #eaecf0 content boxes (being less than 4.5:1 contrast in these cases).

#d73333.png (621×3 px, 165 KB)

We need to find an alternative solution for red links when placed on non-white backgrounds.

NOTE: Keep in mind that we have the same problem with Visited red link since it's using #A55858 and it's not contrasted enough on notice messages (#EAECF0 background) and error messages (#FFE7E6 background).

Design spec

Once a component spec sheet has been created in Figma, remove the note stating that the spec is missing and link to the spec below.

Component spec sheet

Open questions

  • Do we want to update the color used for visited red links (#A55858) to make it enough contrasted?

Acceptance criteria (or Done)

Design

  • Design the Figma spec sheet and add it in this task
  • Update the component in the Figma library. This step will be done by a DST member.

Code

  • Implement the component in Codex

Event Timeline

bmartinezcalvo renamed this task from Red link: to Red link: check contrast when placed on messages.Jul 10 2023, 2:40 PM
bmartinezcalvo updated the task description. (Show Details)
bmartinezcalvo added subscribers: CCiufo-WMF, RHo.

If we're happy with #d33 redlinks but want more contrast when the redlink appears on a non-white background, we could consider using a CSS style like mix-blend-mode: darken for redlinks to darken the color when it interacts with a background.

Here's the CSS property that enables this: https://css-tricks.com/almanac/properties/m/mix-blend-mode/
Support is pretty good these days but of course IE11 doesn't support it. https://caniuse.com/mdn-css_properties_mix-blend-mode

Here's an example of what you can achieve using this property: https://2015.xoxofest.com/

(In our case we would just be using this property to ensure text remains legible, so it won't be flashy.)

If this is something folks want to explore, we could put a static demo together and test it with a constrast tool and explore what contrast we can achieve with different values of mix-blend-mode.

In T337444 we decided to update color-Red600 from #d33 to #d73333. This will affect any decision token using color-Red600, so color-link-red will be also updated to #d73333. This means that Red link will be contrasted enough on #fff and #f8f9fa backgrounds, but it won't be contrasted enough on any of the message component's background or gray #eaecf0 content boxes (being less than 4.5:1 contrast in these cases).

#d73333.png (621×3 px, 165 KB)

If this is something folks want to explore, we could put a static demo together and test it with a constrast tool and explore what contrast we can achieve with different values of mix-blend-mode.

@egardner since #d73333 has a 3.38:1 contrast with the color-base used in body texts (Red links are usually within body text and it needs 3:1 contrast with the surrounding text) and the use cases where a red link is within a message component will be less common than a red link on a white background, I agree with looking for a different solution for these red links on darker backgrounds.@CCiufo-WMF should we move this task to Needs Refinement so developers can investigate how to solve this?

NOTE: Keep in mind that we have the same problem with Visited red link since it's using #A55858 and it's not contrasted enough on notice messages (#EAECF0 background) and error messages (#FFE7E6 background).
bmartinezcalvo moved this task from In Design to Needs Refinement on the Design-System-Team board.

@CCiufo-WMF moving this task to Needs Refinement since during the last Engineering/Design sync we decided to explore from code how we can make the Red link darker when it’s placed on non-white backgrounds.

Is enabling red links on messages really a Product requirement?
Could we go with a simple exit, like only blue links on Messages? As in not allowing Red Link type (or override if placed) there?

Is enabling red links on messages really a Product requirement?
Could we go with a simple exit, like only blue links on Messages? As in not allowing Red Link type (or override if placed) there?

I agree with guidelines being a better approach here. If we recommend against using red links on these backgrounds, we would not expect to come up with a technical solution to support increasing the contrast ratio.