Skip to content

Contrast Check Action

Jump to bottom
Seth Cottle edited this page Mar 18, 2025 · 1 revision

Purpose

The Contrast Check GitHub Action automatically checks color contrast on any changes to brands.css to ensure that all buttons and text meet WCAG contrast standards. This will help maintain consistent accessibility across LittleLink and help prevent regressions that could affect readability or usability for users with visual impairments.

By running automatically on a pull request (PR), the action ensures that contrast issues are caught before the code is merged into the main branch, which prevents accessibility issues from reaching production.

Triggered on a PR

The action is configured to trigger automatically using the on.pull_request event in the GitHub Action YAML file:

on:
  pull_request:
    paths:
      - 'css/brands.css'

This setup ensures that the contrast check only runs when:

  • ✅ A new pull request is created
  • ✅ A change is made specifically to the brands.css file

What Triggers a Failure

The action will fail the PR if:

  • ❌ A button’s text or background contrast ratio falls below WCAG minimum standards (4.5:1)
  • ❌ A gradient is detected (automatically flags for manual review)
  • ❌ Missing or invalid color values are found

➡️ Check out the Contrast Check Action

Clone this wiki locally