Issue Summary

On the "Components" page the instruction message text “The component name specified is invalid - cannot be an empty string" present in the "Edit component" modal dialog is failing the minimum colour contrast requirement of 4.5:1.

Steps to Reproduce

1. Navigate to the “Settings” menu pop-up link and activate it.
2. Activate the "Projects" link.
3. Activate any projects present in the data table.
4. Navigate to the side navigation and activate the "Components link.
5. Navigate to the data table and activate the "Edit" button from the action column.
6. A modal dialog "Edit component" will appear
7. Submit the form with empty fields and navigate to the “Component name” input field.
8. Check the colour contrast of the mentioned text using colour contrast analyser tool.

Screenshot

Actual Result

When checked with the colour contrast analyzer tool, the mentioned  text fails colour contrast with the following details →

Foreground : #DD360C, Background:#FFEBE6 and Ratio : 4:1

Expected Result

The mentioned instruction text should have a colour contrast ratio of 4.5:1 in the default state. This helps low-vision users to read the text.
The expected contrast ratio can be achieved by increasing the contrast of foreground colour until it passes a contrast ratio of 4.5:1

A colour contrast analyzer can be downloaded from Color Contrast Checker - TPGi
 

Workaround

Currently, there is no known workaround for this behaviour. A workaround will be added here when available.

Environment

MacBook Pro (14-inch, 2021)
macOs Ventura  13.3.1
Chrome - Version 110.0.5481.100 (Official Build) (64-bit)
Firefox- Version 92.0 (64-bit)
Safari- Version 16.2 (18614.3.7.1.5)
JAWS- Version 2021
NVDA- Version 2021.2
Voiceover - Version Latest