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

Overview

A11y Contrast

npm Build license

A CLI utility to calculate/verify accessible magic numbers for a color palette. Read my blog post for some more information.

Installation

This tool requires Node.js version 12+.

Install globally:

$ yarn add -g a11y-contrast     # Yarn
$ npm install -g a11y-contrast  # Npm

Or install as a local dependency:

$ yarn add a11y-contrast            # Yarn
$ npm install --save a11y-contrast  # Npm

Or use without installing:

$ npx a11y-contrast <file>

Usage

View program help:

$ a11y-contrast --help
Usage: a11y-contrast <file> [options]

Arguments:
  <file>  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:

$ a11y-contrast <file>

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

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

Color palette format

This tool handles flat or nested JSON files with color grades between 0 and 100.

  • Flat JSON:
{
  "blue-10": "#d9e8f6",
  "blue-20": "#aacdec",
  "blue-30": "#73b3e7",
  "green-10": "#dfeacd",
  "green-20": "#b8d293",
  "green-30": "#9bb672"
}
  • Nested JSON:
{
  "blue": {
    "blue-10": "#d9e8f6",
    "blue-20": "#aacdec",
    "blue-30": "#73b3e7"
  },
  "green": {
    "green-10": "#dfeacd",
    "green-20": "#b8d293",
    "green-30": "#9bb672"
  }
}

Check out some example color palettes under /examples.

License

This project and its contents are open source under the MIT license.

You might also like...

A dependency-free image color extraction library

A dependency-free image color extraction library

Color mage A dependency-free image color extraction library. The extraction consists of using K-Means algorithm. It has a few utility functions as wel

Mar 11, 2022

Create your own complete Web color system fast and easy!

Create your own complete Web color system fast and easy!

Simpler Color Create your own complete Web color system fast and easy, from as little as one base color! Color is at the heart of every UI design syst

Dec 20, 2022

A array with color name - decimal rgbs.

colors-named-decimal A array with color name - decimal rgbs. Based on https://www.w3.org/TR/css-color-4/#colors-named Installation This package is ES

Jul 20, 2022

A simple Discord bot that will listen for HEX, RGB(a), and HSL(a) colors in a message, and provide a small image of that color.

A simple Discord bot that will listen for HEX, RGB(a), and HSL(a) colors in a message, and provide a small image of that color.

Pigment For the teams of designers and developers out there - Pigment will listen for messages containing a HEX, RGB(a), or HSL(a) color, and provide

Dec 8, 2022

A little toy app to help you find the nearest match for a given color within a Figma Tokens color palette.

A little toy app to help you find the nearest match for a given color within a Figma Tokens color palette.

Hey Palette So you've got a color palette in Figma and you've used the Figma Tokens plugin to export that palette to JSON. Let's say you have a color

Nov 15, 2022

A TypeScript package to calculate WCAG 2.0/3.0 and APCA color contrasts

a11y-color-contrast A simple utility package for working with WCAG 2.2/3.0 color contrasts a11y: Built for checking how readable colors are together S

Oct 10, 2022

A TypeScript/JavaScript library for working with ASN, IPv4, and IPv6 numbers. It provides representations of these internet protocol numbers with the ability to perform various IP related operations like parsing, validating etc. on them

A TypeScript/JavaScript library for working with ASN, IPv4, and IPv6 numbers. It provides representations of these internet protocol numbers with the ability to perform various IP related operations like parsing, validating etc. on them

ip-num ip-num is a TypeScript library for working with IPv4, IPv6 and ASN numbers. It provides representations of these internet protocol numbers with

Dec 8, 2022

Grab the color palette from an image using just Javascript. Works in the browser and in Node.

Color Thief Grab the color palette from an image using just Javascript.Works in the browser and in Node. View the demo page for examples, API docs, an

Dec 30, 2022

a blue-ish gray with a purple accent color palette for Visual Studio Code.

a blue-ish gray with a purple accent color palette for Visual Studio Code.

Installation via VSCode Open Extensions sidebar panel in VS Code. View → Extensions Search for nightfall Click Install to install it Click Reload to r

Dec 21, 2021

Color palette text parser to a function, compatible with GMT, GDAL, GRASS, PostGIS, ArcGIS

cpt2js Color palette text parser to a function, input compatible with GMT, GDAL, GRASS, PostGIS, ArcGIS Demo From GDAL docs: The text-based color conf

Dec 4, 2022

Color palette generation function using hue cycling and simple easing functions.

Color palette generation function using hue cycling and simple easing functions.

Rampensau 🐷 Color palette generation function using hue cycling and easing functions. Check out a simple demo or see it in action over on farbvelo 10

Dec 28, 2022

Exposes theming options available in Joy UI by providing color palette and typography controls.

Joy Theme Creator Note: Joy UI is currently in alpha - some things may not be finished or working as expected. This project exposes the theming option

Dec 28, 2022

Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

May 18, 2022

Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

May 3, 2022

Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

Jan 3, 2023

Coloris - A lightweight and elegant JavaScript color picker. Written in vanilla ES6, no dependencies. Accessible.

Coloris - A lightweight and elegant JavaScript color picker. Written in vanilla ES6, no dependencies. Accessible.

Coloris A lightweight and elegant JavaScript color picker written in vanilla ES6. Convert any text input field into a color field. View demo Features

Dec 27, 2022

A tool for creating and maintaining cohesive, consistent, and accessible color palettes

A tool for creating and maintaining cohesive, consistent, and accessible color palettes

Primer Prism Primer Prism is a tool for creating and maintaining cohesive, consistent, and accessible color palettes. 🌈 primer.style/prism 📝 Read th

Jan 3, 2023

🦎 A jQuery plugin for extracting the dominant color from images and applying the color to their parent.

🦎 A jQuery plugin for extracting the dominant color from images and applying the color to their parent.

jquery.adaptive-backgrounds.js A simple jQuery plugin to extract the dominant color of an image and apply it to the background of its parent element.

Dec 21, 2022

Change the color of an image to a specific color you have in mind.

image-recolor Run it: https://image-recolor.vercel.app/ image.recolor.mov Acknowledgments Daniel Büchele for the algorithm: https://twitter.com/daniel

Oct 25, 2022
Comments
  • HSL Support? ✖ color2.luminance is not a function

    HSL Support? ✖ color2.luminance is not a function

    Does this support HSL? I created a .json file of our SASS variable and running npx a11y-contrast color-palette-3.3.json produces the following:

    npx: installed 13 in 1.755s
    ℹ Analyzing: color-palette-3.3.json
    ✖ color2.luminance is not a function
    

    Example of the file:

    {
    	"primary": {
    		"$primary-100": "hsl(186, 100%, 94%)",
    		"$primary-200": "hsl(190, 94%, 88%)",
    		"$primary-300": "hsl(196, 92%, 81%)",
    

    EDIT: Maybe this is because these color name don't conform to the grades 0 - 100?

    opened by frankstallone 8
  • Support APCA/WCAG 3

    Support APCA/WCAG 3

    WCAG 3 will change how contrast ratios are calculated. The specs are still under development, but a11y-contrast could already implement the current status.

    • https://cliambrown.com/contrast/
    • https://www.myndex.com/APCA/
    • https://yatil.net/blog/wcag-3-is-not-ready-yet

    Note that the spec is not stable yet, which is reflected in the license.

    Type: Enhancement 
    opened by darekkay 1
  • Output all valid color combinations

    Output all valid color combinations

    Currently, a11y-contrast focuses on the magic number principle. For color palettes with no or very high magic numbers, this principle might not be very usable. In such cases, it would be good to see all valid color combinations for a given contrast ratio. Colorable seems to be doing just that, but it would be great to have this functionality built into a11y-contrast.

    Type: Enhancement 
    opened by darekkay 0
  • Support custom grade intervals

    Support custom grade intervals

    Currently, the color grade format has to be between 0 and 100 (e.g. white-0, green-10, green-50, green-90, black-100). Some palettes use different grade intervals, e.g.:

    A custom grade interval structure should be supported within a11y-contrast to support those use cases. This should be either configurable or automatically detected and applied.

    Starting point: https://github.com/darekkay/a11y-contrast/blob/master/src/index.js#L47

    Type: Enhancement good first issue 
    opened by darekkay 1
Releases(1.2.0)
  • 1.2.0(Nov 23, 2020)

    • :rocket: Ignore invalid colors.
    • :rocket: Don't calculate unnecessary contrast ratios.
    • :rocket: Display the mean contrast ratio of a color palette.
    • :hammer: Replace TravisCI with GitHub Actions.
    Source code(tar.gz)
    Source code(zip)
Owner
Darek Kay
Front-end engineer @IBM ❖ Accessibility advocate ❖ Minimalist ❖ I love building awesome things and sharing what I know with others ❤️
Darek Kay
Coloris - A lightweight and elegant JavaScript color picker. Written in vanilla ES6, no dependencies. Accessible.

Coloris A lightweight and elegant JavaScript color picker written in vanilla ES6. Convert any text input field into a color field. View demo Features

Momo Bassit 126 Dec 27, 2022
A tool for creating and maintaining cohesive, consistent, and accessible color palettes

Primer Prism Primer Prism is a tool for creating and maintaining cohesive, consistent, and accessible color palettes. ?? primer.style/prism ?? Read th

Primer 517 Jan 3, 2023
Colormath.js - a color conversion and color manipulation library written in typescript for Node.js, Deno and Browser

Colormath.js - a color conversion and color manipulation library written in typescript for Node.js, Deno and Browser

TheSudarsanDev 8 Feb 8, 2022
Extract prominent colors from an image. JS port of Android's Palette.

Vibrant.js Extract prominent colors from an image. Vibrant.js is a javascript port of the awesome Palette class in the Android support library. ⚠️ THI

Jari Zwarts 4.6k Dec 25, 2022
JavaScript library for all kinds of color manipulations

Chroma.js Chroma.js is a tiny small-ish zero-dependency JavaScript library (13.5kB) for all kinds of color conversions and color scales. Usage Initiat

Gregor Aisch 9.2k Jan 4, 2023
:rainbow: Javascript color conversion and manipulation library

color JavaScript library for immutable color conversion and manipulation with support for CSS color strings. var color = Color('#7743CE').alpha(0.5).l

Qix 4.5k Jan 3, 2023
JavaScript Library for creating random pleasing colors and color schemes

#PleaseJS www.checkman.io/please Please.js is a polite companion that wants to help you make your projects beautiful. It uses HSV color space to creat

Jordan Checkman 2.3k Dec 22, 2022
Fast, small color manipulation and conversion for JavaScript

TinyColor JavaScript color tooling TinyColor is a small, fast library for color manipulation and conversion in JavaScript. It allows many forms of inp

Brian Grinstead 4.5k Jan 1, 2023
Color2k - a color parsing and manipulation lib served in roughly 2kB

color2k a color parsing and manipulation lib served in roughly 2kB or less (2.8kB to be more precise) color2k is a color parsing and manipulation libr

Rico Kahler 506 Dec 31, 2022
A simple color picker application written in pure JavaScript, for modern browsers.

Color Picker A simple color picker application written in pure JavaScript, for modern browsers. Has support for touch events. Touchy… touchy… Demo and

Taufik Nurrohman 207 Dec 14, 2022