Page MenuHomePhabricator

Red link: Improve contrast when placed on messages
Closed, ResolvedPublic

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, so any decision token using color-red600, like color-link-red was also updated to #d73333. This means that red links are 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).

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.

CCiufo-WMF renamed this task from Red link: check contrast when placed on messages to Red link: Improve contrast when placed on messages.Oct 1 2024, 3:50 PM
CCiufo-WMF updated the task description. (Show Details)