https://github.com/darekkay/a11y-contrast

A CLI utility to calculate/verify accessible magic numbers for a color palette.
https://github.com/darekkay/a11y-contrast

accessibility color colors contrast-ratio wcag wcag-contrast

Last synced: 17 days ago
JSON representation

A CLI utility to calculate/verify accessible magic numbers for a color palette.

• Host: GitHub
• URL: https://github.com/darekkay/a11y-contrast
• Owner: darekkay
• License: mit
• Created: 2020-08-30T20:01:47.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2024-02-03T15:36:55.000Z (9 months ago)
• Last Synced: 2024-10-11T04:46:26.915Z (about 1 month ago)
• Topics: accessibility, color, colors, contrast-ratio, wcag, wcag-contrast
• Language: JavaScript
• Homepage:
• Size: 587 KB
• Stars: 36
• Watchers: 2
• Forks: 1
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# A11y Contrast

![npm](https://img.shields.io/npm/v/a11y-contrast?style=flat-square)

[![Build](https://img.shields.io/github/actions/workflow/status/darekkay/a11y-contrast/ci.yml?branch=master&style=flat-square)](https://github.com/darekkay/a11y-contrast/actions/workflows/ci.yml)

[![license](https://img.shields.io/badge/license-MIT-green?style=flat-square)](https://github.com/darekkay/a11y-contrast/blob/master/LICENSE)

A CLI utility to calculate/verify accessible [magic numbers](https://designsystem.digital.gov/design-tokens/color/overview/#magic-number) for a color palette. Read [my blog post](https://darekkay.com/blog/accessible-color-palette/) for some more information.

![](screenshot.png)

## Installation

This tool requires Node.js version 18+.

Install globally:

```bash

$ npm install -g a11y-contrast  # Npm

$ yarn add -g a11y-contrast     # Yarn

```

Or install as a local dependency:

```bash

$ npm install --save a11y-contrast  # Npm

$ yarn add a11y-contrast            # Yarn

```

Or use without installing:

```bash

$ npx a11y-contrast 

```

## Usage

View program help:

```

$ a11y-contrast --help

Usage: a11y-contrast  [options]

Arguments:

    Color palette file                              [required] [file]

Options:

  --min-ratio-3    Verify magic number for ratio 3                 [number]

  --min-ratio-4.5  Verify magic number for ratio 4.5               [number]

  --min-ratio-7    Verify magic number for ratio 7                 [number]

  -h, --help       Show help                     [commands: help] [boolean]

  -v, --version    Show version number        [commands: version] [boolean]

```

Run a full report for a color palette file:

```bash

$ a11y-contrast 

```

Verify that the color palette fulfills certain magic numbers per contrast ratio:

```bash

$ a11y-contrast  --min-ratio-3=40 --min-ratio-4.5=50 --min-ratio-7=70

```

## Color palette format

This tool handles flat or nested JSON files. Any consistent grading system is supported.

- Flat JSON:

```json

{

  "blue-10": "#d9e8f6",

  "blue-20": "#aacdec",

  "blue-30": "#73b3e7",

  "green-10": "#dfeacd",

  "green-20": "#b8d293",

  "green-30": "#9bb672"

}

```

- Nested JSON:

```json

{

  "blue": {

    "blue-100": "#d9e8f6",

    "blue-200": "#aacdec",

    "blue-300": "#73b3e7"

  },

  "green": {

    "green-100": "#dfeacd",

    "green-200": "#b8d293",

    "green-300": "#9bb672"

  }

}

```

Check out some example color palettes under `/examples`.

## License

This project and its contents are open source under the [MIT license](LICENSE).