Skip to content

Success/alert notification link text fails contrast check #1955

@chosak

Description

@chosak

Describe the bug
Our "success" and "error" notification link texts fail the Lighthouse accessibility check for foreground / background contrast.

To Reproduce
Steps to reproduce the behavior:

  1. Go to https://cfpb.github.io/design-system/components/alerts
  2. In Chrome developer tools, run a Lighthouse audit

Expected behavior
Link text contrast should pass accessibility checks.

Screenshots
image

Additional context
Discovered via automated GitHub Action here. See failing Lighthouse report here.

Success text is #0072ce (pacific) on #f0f8eb (green-10), which is 4.49:1.
Error text is #0072ce (pacific) on #fbefec (red-10), which is 4.34:1.

WCAG AA requirement is 4.5:1.

See previous related report at #1943; @anselmbradford tried to fix in #1944 but it seems this broke somewhere, maybe in #1919?

@sonnakim for awareness

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions