colorable

Color combination contrast tester

  • 所有者: jxnblk/colorable
  • 平台:
  • 許可證:
  • 分類:
  • 主題:
  • 喜歡:
    0
      比較:

Github星跟蹤圖

Colorable

Take a set color palette and get contrast values for every possible combination –
useful for finding safe color combinations with predefined colors
and includes pass/fail scores for the
WCAG accessibility guidelines.

Getting Started

npm i --save colorable

Usage

Pass an array of color strings or an object with color strings as values.

var colorable = require('colorable')

var colors = {
  red: 'red',
  green: 'green',
  blue: 'blue'
}

var result = colorable(colors, { compact: true, threshold: 0 })

Returns an array of colors with combinations for all other colors and their
WCAG contrast
values.

[
  {
    "hex": "#FF0000",
    "name": "red",
    "combinations": [
      {
        "hex": "#008000",
        "name": "green",
        "contrast": 1.28483997166146,
        "accessibility": {
          "aa": false,
          "aaLarge": false,
          "aaa": false,
          "aaaLarge": false
        }
      },
      {
        "hex": "#0000FF",
        "name": "blue",
        "contrast": 2.148936170212766,
        "accessibility": {
          "aa": false,
          "aaLarge": false,
          "aaa": false,
          "aaaLarge": false
        }
      }
    ]
  },
  ...
]

Accessibility object

Each key is a boolean value indicating if the color contrast meets the following criteria:


Options

compact

Type: Boolean (default: false)

If set to true, the result will be a smaller object that only includes hex value color strings, a name for each color (if an object is passed to the function), contrast, and accessibility values.
When set to false, the result also includes the entire harthur/color object for each color, which includes other properties and methods for color manipulation.

threshold

Type: Number (default: 0)

When set, the colorable function only returns combinations that have a contrast above this value. This is useful for only seeing combinations that pass a minimum contrast level.

uniq

Type: Boolean (default: true)

When set to true, the array of colors is passed through lodash.uniq to remove duplicates.


MIT License

主要指標

概覽
名稱與所有者jxnblk/colorable
主編程語言HTML
編程語言JavaScript (語言數: 2)
平台
許可證
所有者活动
創建於2015-02-06 00:44:54
推送於2021-07-05 14:37:59
最后一次提交2016-04-13 08:27:11
發布數0
用户参与
星數2k
關注者數37
派生數130
提交數135
已啟用問題?
問題數21
打開的問題數16
拉請求數4
打開的拉請求數11
關閉的拉請求數3
项目设置
已啟用Wiki?
已存檔?
是復刻?
已鎖定?
是鏡像?
是私有?