Destructive normal and quiet buttons fail WCAG AA contrast
Closed, ResolvedPublic1 Estimated Story Points
Actions

Assigned To

Authored By

	Volker_E
	May 25 2023, 4:39 AM

Description

Background goal

While Red600 - #d33 (destructive) works with White - #fff, it doesn't work on any of our greys, failing contrast ratio requirements slightly (f.e. 4.33 (foreground color: #d33, background color: #f8f9fa).

Considerations

If we update the Red600 this would affect to:
- Destructive button (primary, normal and quiet)
- Red link
- Inline error messages (e.g. error form Field)
- Error messages and Error InfoChips (icon uses color-error)

Final proposal

We will update color-Red600 from #d33 to #d73333. This will affect any decision token using color-Red600.

Design spec

Color tokens - Spec sheet

Acceptance criteria (or Done)

Design

Find a design-first way to resolve this special case
Create the design spec for the new color's decision and link it in this task
Update the Red600 color and decision tokens in the Design Tokens library

Code

Update color-Red600 from #d33 to #d73333
Update the hex in the Style Guide

Details

	Subject	Repo	Branch	Lines +/-
	Update Codex from v0.15.0 to v0.16.1	mediawiki/core	master	+1 K -1 K
	tokens: Slightly darken color-red600 to improve contrast	design/codex	main	+4 -4

Customize query in gerrit

Related Objects
Search...

Status	Assigned	Task
Resolved	CCiufo-WMF	T308681 [EPIC] Ensure Codex components compliance with WCAG level AA
Resolved	bmartinezcalvo	T337959 Accessibility audit: check the contrast ratio in our Codex components
Resolved	lwatson	T343239 Amend Wikimedia Design System`#d33` to `#d73333`
Resolved	Catrope	T337444 Destructive normal and quiet buttons fail WCAG AA contrast

Event Timeline

Volker_E created this task.May 25 2023, 4:39 AM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMay 25 2023, 4:39 AM

Volker_E added a parent task: T308681: [EPIC] Ensure Codex components compliance with WCAG level AA.May 25 2023, 5:29 AM

bmartinezcalvo updated the task description. (Show Details)May 29 2023, 10:04 AM

Since the current #d33 is not working on #F8F9FA and #EAECF0, I've included some possible solutions in the task description. Sharing them also here:

We could update the Red600 from #d33 to one of the following:

	Option1: In OOUI we've swindled ourselves out by defining `#d73333`. This new red color works well on `#F8F9FA` but not on `#EAECF0`, so quiet-destructive buttons would not be enough contrasted on this gray.
	Option2: We could use `#cb2929` so this new gray is enough contrast on both `#F8F9FA` and `#EAECF0`.

Apart from updating the destructive buttons, we need to keep into account that if we update the Red600 color this would affect to the following components:

Destructive buttons
Red links
Error form items (e.g. text input, select...)
Error messages and Error InfoChips (icon uses color-error)

bmartinezcalvo updated the task description. (Show Details)May 29 2023, 10:10 AM

bmartinezcalvo updated the task description. (Show Details)May 29 2023, 10:14 AM

bmartinezcalvo updated the task description. (Show Details)

bmartinezcalvo added subscribers: Sarai-WMDE, RHo, CCiufo-WMF.

CCiufo-WMF moved this task from Inbox to Backlog on the Design-System-Team board.May 29 2023, 5:43 PM

CCiufo-WMF moved this task from Backlog to Needs Refinement on the Design-System-Team board.May 29 2023, 8:01 PM

Sarai-WMDE attached a referenced file: F37082264: Current destructive buttons - #d33.png. (Show Details)May 31 2023, 5:52 PM

bmartinezcalvo mentioned this in T337959: Accessibility audit: check the contrast ratio in our Codex components.Jun 1 2023, 5:06 PM

bmartinezcalvo added a parent task: T337959: Accessibility audit: check the contrast ratio in our Codex components.

According to the WCAG, large-scale text (with at least 18 point or 14 point bold) would not need the 4.5:1 but just the 3:1 contrast instead. So, since our buttons use 14px (desktop) and 16px (mobile) Bold text, we would not have any accessibility problem with the colors used there.

@RHo I think we can solve this task since it seems we don't need to finally update any of the colors used in buttons.

In T337444#8947227, @bmartinezcalvo wrote:

According to the WCAG, large-scale text (with at least 18 point or 14 point bold) would not need the 4.5:1 but just the 3:1 contrast instead. So, since our buttons use 14px (desktop) and 16px (mobile) Bold text, we would not have any accessibility problem with the colors used there.

@RHo I think we can solve this task since it seems we don't need to finally update any of the colors used in buttons.

Unfortunately "14 point" and "18 point" referenced in the guidelines are equivalent to 18.5px and 24px respectively, so this remains a valid a11y issue to solve.

There's a note on the W3C site [1] explaining the conversion:

Note 1: When evaluating this success criterion, the font size in points should be obtained from the user agent or calculated on font metrics in the way that user agents do. Point sizes are based on the CSS pt size as defined in CSS3 Values. The ratio between sizes in points and CSS pixels is 1pt = 1.333px, therefore 14pt and 18pt are equivalent to approximately 18.5px and 24px.

[1] http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html

CCiufo-WMF added a project: Codex 1.0.Jun 20 2023, 7:23 PM

CCiufo-WMF moved this task from Backlog to Accessibility on the Codex 1.0 board.

CCiufo-WMF moved this task from Needs Refinement to Backlog on the Design-System-Team board.Jun 22 2023, 1:39 PM

Closing this task in favor of creating a new task once T337959: Accessibility audit: check the contrast ratio in our Codex components is complete. The destructive buttons failing WCAG AA contrast requirements is already captured there.

@CCiufo-WMF reopening this task as commented in T337959#8998290. Also updating title and task description to reflect both destructive normal and quiet buttons.

bmartinezcalvo reopened this task as Open.Jul 10 2023, 2:59 PM

bmartinezcalvo renamed this task from Destructive normal buttons fail WCAG AA contrast to Destructive normal and quiet buttons fail WCAG AA contrast.Jul 10 2023, 3:03 PM

bmartinezcalvo updated the task description. (Show Details)

bmartinezcalvo moved this task from Backlog to In Design on the Design-System-Team board.Jul 10 2023, 5:17 PM

bmartinezcalvo claimed this task.Jul 11 2023, 9:58 AM

bmartinezcalvo updated the task description. (Show Details)Jul 19 2023, 6:32 PM

During the last Eng/Design sync, we decided the following to solve this task:

We will update color-Red600 from #d33 to #d73333. This will affect any decision token using color-Red600, so all main, normal and quiet destructive buttons will use this new color.

We will need to update the color tokens so sharing here the updated Figma spec.

NOTE: keep in mind that if we use a quiet destructive button on a #EAECF0 background, this would fail the contrast ratio required. So we should avoid to place quiet neutral buttons on these gray backgrounds.

@CCiufo-WMF this task is ready to be implemented, so moving to Needs Refinement in case we can include it in this or the following sprint. cc: @AnneT @egardner @Catrope