Change Details

## Background In {T337959} we detected that when there is a Red link within a message or within gray box, the `#d33` color used for default red link is less than the `4.5:1` contrast required for [[ https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum#:~:text=The%20visual%20presentation%20of%20text%20and%20images%20of%20text%20has%20a%20contrast%20ratio%20of%20at%20least%204.5%3A1%2C%20except%20for%20the%20following%3A | text elements ]]. Red link contrast should be checked with the following colors (background colors where red link could be placed): | {F37134871} | #FFF (white background) | The contrast is enough in all states except when `hover`. | | {F37134876} | #EAECF0 (notice message or gray boxes) | The contrast is not enough in `default` and `hover`. | | {F37134878} | #D5FDF4 (success message) | The contrast is not enough in `default` and `hover`. | | {F37134880} | #FEF6E7 (warning message) | The contrast is not enough in `default` and `hover`. | | {F37134882} | #FFE7E6 (error message) | The contrast is not enough in `default`, `hover` and `visited` states. | ### 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 // Add here the questions to be answered in order to design and implement the component // ### Acceptance criteria (or Done) **Design** [] Design the Figma spec sheet and add it in this task [] Update the component in the Figma [[ https://www.figma.com/file/KoDuJMadWBXtsOtzGS4134/❖-Codex-components?node-id=1891%3A4420&viewport=287%2C338%2C0.28 | library ]]. //This step will be done by a DST member.// **Code** [] Implement the component in Codex

## Background In {T337959} 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 [[ https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum#:~:text=The%20visual%20presentation%20of%20text%20and%20images%20of%20text%20has%20a%20contrast%20ratio%20of%20at%20least%204.5%3A1%2C%20except%20for%20the%20following%3A | 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). {F37144424} We need to find an alternative solution for red links when placed on non-white backgrounds. ### 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 // Add here the questions to be answered in order to design and implement the component // ### Acceptance criteria (or Done) **Design** [] Design the Figma spec sheet and add it in this task [] Update the component in the Figma [[ https://www.figma.com/file/KoDuJMadWBXtsOtzGS4134/❖-Codex-components?node-id=1891%3A4420&viewport=287%2C338%2C0.28 | library ]]. //This step will be done by a DST member.// **Code** [] Implement the component in Codex

## Background In {T337959} we detected that when there is a Red link within a message or within gray content box, the `#d33` colorcolor-link-red` used for default red link is less than the `4.5:1` contrast required for [[ https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum#:~:text=The%20visual%20presentation%20of%20text%20and%20images%20of%20text%20has%20a%20contrast%20ratio%20of%20at%20least%204.5%3A1%2C%20except%20for%20the%20following%3A | text elements ]]. Red link contrast should be checked with the following colors (background colors where red link could be placed):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). | {F37134871} | #FFF (white background) | The contrast is enough in all states except when `hover`. | | {F37134876} | #EAECF0 (notice message or gray boxes) | The contrast is not enough in `default` and `hover`. | | {F37134878} | #D5FDF4 (success message) | The contrast is not enough in `default` and `hover`. | | {F37134880} | #FEF6E7 (warning message) | The contrast is not enough in `default` and `hover`. | | {F37134882} | #FFE7E6 (error message) | The contrast is not enough in `default`, `hover` and `visited` states. |{F37144424} We need to find an alternative solution for red links when placed on non-white backgrounds. ### 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 // Add here the questions to be answered in order to design and implement the component // ### Acceptance criteria (or Done) **Design** [] Design the Figma spec sheet and add it in this task [] Update the component in the Figma [[ https://www.figma.com/file/KoDuJMadWBXtsOtzGS4134/❖-Codex-components?node-id=1891%3A4420&viewport=287%2C338%2C0.28 | library ]]. //This step will be done by a DST member.// **Code** [] Implement the component in Codex