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

iamssen / wcag-contrast-validation-example Public archive

Notifications You must be signed in to change notification settings
Fork 1
Star 4

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

4 stars 1 fork Branches Tags Activity

Notifications

Name		Name	Last commit message	Last commit date
Latest commit History 32 Commits
.github/workflows		.github/workflows
doc-assets		doc-assets
example		example
packages		packages
.eslintignore		.eslintignore
.eslintrc.js		.eslintrc.js
.gitignore		.gitignore
.huskyrc.js		.huskyrc.js
.prettierignore		.prettierignore
.prettierrc.js		.prettierrc.js
README.md		README.md
package.json		package.json
yarn.lock		yarn.lock

Repository files navigation

목표

예제로 주어진 Material-UI Color Palette의 WCAG Contrast Ratio 접근성을 계산합니다.
Git Pre-Commit Hook을 사용해서 Report를 작성합니다. (CI 상에서는 Report 파일들의 저장 문제 등 Back-End 비용이 발생하므로 Pre-Commit 상에서 진행합니다.)
CI의 master Branch Commit이 발생하면 Report Image를 Commit에 Comment로 보여줍니다.
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

wcag-contrast-ratio

Report repository

Releases

No releases published

Languages