DP-47635 - Resolve warning icon color contrast issue#2079
Merged
clairesunstudio merged 4 commits intoJun 17, 2026
Conversation
There was a problem hiding this comment.
Pull request overview
This PR fixes an accessibility color-contrast issue for the warning inline message icon by switching the SVG icon color to a darker, higher-contrast design token.
Changes:
- Update warning inline message icon
color/fillto use--mds-background-section-utility-warning-highest(fallback#7b5705) to meet WCAG contrast requirements.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
karthikbaikati
force-pushed
the
patternlab/DP-47635-fix-message-box-color-contrast
branch
from
de409c0 to
d7918a6
Compare
Contributor
|
Test failures are map visual regression test diffs, not related to this PR |
clairesunstudio
approved these changes
Jun 16, 2026
clairesunstudio
approved these changes
Jun 17, 2026
clairesunstudio
deleted the
patternlab/DP-47635-fix-message-box-color-contrast
branch
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
This PR addresses an accessibility color contrast issue in the warning inline message box component. The warning icon's previous yellow color (
#f6c51b) had a contrast ratio under 1.5:1 against the light-yellow background (#fef9e8).By switching to the standard design system token
var(--mds-background-section-utility-warning-highest, #7b5705), the contrast ratio is increased to ~7.07:1, successfully satisfying the WCAG 2.1 AA requirement of at least 3:1 for user interface and graphical components.Related Issue / Ticket
Steps to Test
http://localhost:3000/patterns/02-molecules-inline-message-warning/02-molecules-inline-message-warning.html--mds-background-section-utility-warning-highest(#7b5705).Screenshots
Additional Notes:
Impacted Areas in Application
packages/assets/scss/02-molecules/_inline-message.scss(Warning Inline Message Box component)