-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Closed
Labels
Affects: Accessibility 🟡Relates to the accessibility of our componentsRelates to the accessibility of our componentsPackage: ButtonPackage: FormsRole: DevDevelopment/engineering skills neededDevelopment/engineering skills needed
Milestone
Description
Summary
When customizing the disabled state color settings, the system does not send a warning when the selected colors do not meet required contrast ratios.
For example, the following configuration results in text that does not meet color contrast requirements with its background :
@use "uswds-core" with (
$theme-show-notifications: false,
$theme-color-disabled-lighter: "gray-20",
$theme-color-disabled-light: "gray-20",
$theme-color-disabled: "gray-20",
$theme-color-disabled-dark: "gray-20",
$theme-color-disabled-darker: "gray-20",
);
Here is a screenshot of the resulting display (note that the text is not visible in the button and select components and that the outline button does not meet contrast requirements):
In contrast, here is what it looks like in the default configuration:
Expected behavior
The system should send a warning when settings values do not result in the required color contrast ratio.
Metadata
Metadata
Assignees
Labels
Affects: Accessibility 🟡Relates to the accessibility of our componentsRelates to the accessibility of our componentsPackage: ButtonPackage: FormsRole: DevDevelopment/engineering skills neededDevelopment/engineering skills needed
Type
Projects
Status
Done