Error message in textarea has wrong contrast when used with Dialog component

[dawidzarzycki]

Current behaviour

axe devtools shows that the contrast is not good enough for the error message. Correct value should be 4.5 and for now we have 4.49

axe devtolols won't highlight the contrast for error message when it is used in codesandbox, but if you use "inspect element" you will see that the contrast is 4.49

Expected behaviour

Expecting to have passed the color contrast accessibility

CodeSandbox or Storybook URL

https://codesandbox.io/s/tender-chihiro-pubm6l?file=/src/index.js

JIRA Ticket (Sage Only)

SBS-38747

Suggested Solution

No response

Carbon Version

110.1.1

Design Tokens Version

2.40.0

What browsers are you seeing the problem on?

Chrome

What Operating System are you seeing the problem on?

MacOS

Anything else we should know?

No response

Confidentiality

• [X] I confirm there is no confidential or commercially sensitive information included.

[nicktitchmarsh]

@ljemmo it looks like there is a colour token contrast issue. Please could you direct us as to how we should fix this?

[ljemmo]

@nicktitchmarsh Claire and I have gone through our reds and tweaked accordingly. This PR should fix this: https://github.com/Sage/design-tokens/pull/214

Are you using the token 'colors.semantic.negative.500' for error text? If yes, then i think you can close this issue as you will get the latest colour once that token PR gets merged.

[mkrds]

FE-5304

[nicktitchmarsh]

This component does already use --colorsSemanticNegative500 so I don't think we need to make a change here

[nicktitchmarsh]

@dawidzarzycki you should be able to update the design tokens package on your project to fix this issue

[dawidzarzycki]

@nicktitchmarsh I think it is not working as expected with the latest carbon and design-tokens

[nicktitchmarsh]

This was fixed in design-tokens 2.41