Skip to content
This repository has been archived by the owner on Aug 24, 2023. It is now read-only.

Automate WCAG Contrast Ratio Validation with Git Pre-Commit, Github Action

Notifications You must be signed in to change notification settings

iamssen/wcag-contrast-validation-example

Repository files navigation

목표

  1. 예제로 주어진 Material-UI Color PaletteWCAG Contrast Ratio 접근성을 계산합니다.
  2. Git Pre-Commit Hook을 사용해서 Report를 작성합니다. (CI 상에서는 Report 파일들의 저장 문제 등 Back-End 비용이 발생하므로 Pre-Commit 상에서 진행합니다.)
  3. CI의 master Branch Commit이 발생하면 Report Image를 Commit에 Comment로 보여줍니다.
  4. CI에 Pull Request가 발생하면 PR Base의 Report와 PR의 Report를 비교해서 Score 증감을 계산한 다음 Pull Request에 Comment로 보여줍니다.

Previews

그 외, WCAG Contrast Ratio 검증 방식들

Chrome Dev Tools

color에서 "Contrast ratio"를 눌러서 확인 할 수 있습니다.

두 개의 곡선을 기준으로 AA, AAA 레벨의 접근성을 안내합니다.

NPM Package

https://www.npmjs.com/package/wcag-contrast

데이터들을 직접 검증하고 싶다면 해당 Package를 사용할 수 있습니다.

TODOs

  • WCAG Contrast Ratio Report
  • Git Pre-Commit Hook
  • Github Sticky Comment Library
  • Github Action Bot

About

Automate WCAG Contrast Ratio Validation with Git Pre-Commit, Github Action

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published