├── .codeclimate.yml ├── .npmignore ├── .travis.yml ├── contrast.js ├── index.js ├── is-dark.js ├── is-light.js ├── level.js ├── luminance.js ├── package.json ├── readme.md └── test.js /.codeclimate.yml: -------------------------------------------------------------------------------- 1 | languages: 2 | Ruby: false 3 | JavaScript: true 4 | PHP: false 5 | Python: false 6 | exclude_paths: 7 | - "test.js" -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | test 2 | test.js 3 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "0.10" 4 | - "0.11" -------------------------------------------------------------------------------- /contrast.js: -------------------------------------------------------------------------------- 1 | /** 2 | * http://www.w3.org/TR/WCAG20/#contrast-ratiodef 3 | * 4 | * @module color-measure/contrast 5 | */ 6 | 7 | var luminance = require('./luminance'); 8 | 9 | module.exports = function (color1, color2) { 10 | var lum1 = luminance(color1); 11 | var lum2 = luminance(color2); 12 | if (lum1 > lum2) { 13 | return (lum1 + 0.05) / (lum2 + 0.05); 14 | } 15 | return (lum2 + 0.05) / (lum1 + 0.05); 16 | }; -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @module color-measure 3 | */ 4 | module.exports = { 5 | luminance: require('./luminance'), 6 | contrast: require('./contrast'), 7 | level: require('./level'), 8 | isDark: require('./is-dark'), 9 | isLight: require('./is-light'), 10 | 11 | // https://github.com/bgrins/TinyColor#readability 12 | // readable, 13 | // readability, 14 | // mostReadable, 15 | 16 | // https://www.npmjs.com/package/color-temperature 17 | // temperature, 18 | // nearest, 19 | }; -------------------------------------------------------------------------------- /is-dark.js: -------------------------------------------------------------------------------- 1 | /** 2 | * YIQ equasion from 3 | * http://24ways.org/2010/calculating-color-contrast 4 | * 5 | * @module color-measure/is-dark 6 | */ 7 | 8 | module.exports = function (color) { 9 | var yiq = (color.red() * 299 + color.green() * 587 + color.blue() * 114) / 1000; 10 | return yiq < 128; 11 | }; -------------------------------------------------------------------------------- /is-light.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @module color-measure/is-white 3 | */ 4 | 5 | var isDark = require('./is-dark'); 6 | 7 | module.exports = function (color) { 8 | return !isDark(color); 9 | }; -------------------------------------------------------------------------------- /level.js: -------------------------------------------------------------------------------- 1 | /** 2 | * http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html#visual-audio-contrast-contrast-73-head 3 | * 4 | * @module color-measure/level 5 | */ 6 | 7 | var contrast = require('./contrast'); 8 | 9 | module.exports = function (color1, color2) { 10 | var contrastRatio = contrast(color1, color2); 11 | 12 | return (contrastRatio >= 7.1) ? 'AAA' : (contrastRatio >= 4.5) ? 'AA' : ''; 13 | }; -------------------------------------------------------------------------------- /luminance.js: -------------------------------------------------------------------------------- 1 | /** 2 | * http://www.w3.org/TR/WCAG20/#relativeluminancedef 3 | * 4 | * @module color-metric/luminance 5 | */ 6 | 7 | module.exports = function (color) { 8 | var rgb = [color.red(), color.green(), color.blue()]; 9 | var lum = []; 10 | 11 | for (var i = 0; i < rgb.length; i++) { 12 | var chan = rgb[i] / 255; 13 | lum[i] = (chan <= 0.03928) ? chan / 12.92 : Math.pow(((chan + 0.055) / 1.055), 2.4); 14 | } 15 | 16 | return 0.2126 * lum[0] + 0.7152 * lum[1] + 0.0722 * lum[2]; 17 | }; -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "color-measure", 3 | "version": "1.0.1", 4 | "description": "Measure color characteristics", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "mocha" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "https://github.com/dfcreative/color-measure" 12 | }, 13 | "keywords": [ 14 | "color", 15 | "measure", 16 | "luma", 17 | "luminosity" 18 | ], 19 | "author": "Deema Ywanov ", 20 | "license": "MIT", 21 | "bugs": { 22 | "url": "https://github.com/dfcreative/color-measure/issues" 23 | }, 24 | "homepage": "https://github.com/dfcreative/color-measure", 25 | "devDependencies": { 26 | "chai": "^3.0.0", 27 | "color": "^0.8.0", 28 | "mocha": "^2.2.5" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # color-measure [![Build Status](https://travis-ci.org/dfcreative/color-measure.svg?branch=master)](https://travis-ci.org/dfcreative/color-measure) [![Code Climate](https://codeclimate.com/github/dfcreative/color-measure/badges/gpa.svg)](https://codeclimate.com/github/dfcreative/color-measure) 2 | 3 | A collection of color metric functions. 4 | 5 | 6 | `$ npm install color-measure` 7 | 8 | ```js 9 | var luma = require('color-measure/luminance'); 10 | luminance(color); //0.78 11 | ``` 12 | 13 | ## Metrics 14 | 15 | * **[luminance](http://www.w3.org/TR/WCAG20/#relativeluminancedef)** (aka _luminosity_) — get relative luminance. 16 | * **[contrast](http://www.w3.org/TR/WCAG20/#contrast-ratiodef)** — measure contrast ratio of two colors. 17 | * **[level](http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html#visual-audio-contrast-contrast-73-head)** — measure the readability level of two colors, based on contrast ratio. 18 | * **[is-dark](http://24ways.org/2010/calculating-color-contrast)** — check whether color is dark via YIQ transform. 19 | * **[is-light](http://24ways.org/2010/calculating-color-contrast)** — check whether color is dark via YIQ transform. 20 | * [sugest measure](http://github.com/dfcreative/color-manipulate/issues/new/) 21 | 22 | 32 | 33 | 34 | 35 | ## Related 36 | 37 | * **[color-manipulate](http://npmjs.org/package/color-manipulate)** — a collection of color manipulation functions. 38 | * **[color-blend](http://npmjs.org/package/color-blend)** — a collection of color blending functions. 39 | * **[color-space](http://npmjs.org/package/color-space)** — a collection of color spaces and conversions between them. 40 | * **[color](http://npmjs.org/package/color2)** — color class, exposing metrics as own API. 41 | 42 | [![NPM](https://nodei.co/npm/color-measure.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/color-measure/) -------------------------------------------------------------------------------- /test.js: -------------------------------------------------------------------------------- 1 | var assert = require("assert"); 2 | var m = require('./'); 3 | 4 | var Color = require("color"); 5 | 6 | 7 | describe('Metrics', function () { 8 | it('Color metrics', function () { 9 | assert.equal(m.luminance(Color("white")), 1); 10 | assert.equal(m.luminance(Color("black")), 0); 11 | assert.equal(m.luminance(Color("red")), 0.2126); 12 | assert.equal(m.contrast(Color("white"), Color("black")), 21); 13 | assert.equal(Math.round(m.contrast(Color("white"), Color("red"))), 4); 14 | assert.equal(Math.round(m.contrast(Color("red"), Color("white"))), 4); 15 | assert.equal(m.contrast(Color("blue"), Color("blue")), 1); 16 | assert.ok(m.isDark(Color("black"))); 17 | assert.ok(!m.isLight(Color("black"))); 18 | assert.ok(m.isLight(Color("white"))); 19 | assert.ok(!m.isDark(Color("white"))); 20 | assert.ok(m.isDark(Color("blue"))); 21 | assert.ok(m.isDark(Color("darkgreen"))); 22 | assert.ok(m.isLight(Color("pink"))); 23 | assert.ok(m.isLight(Color("goldenrod"))); 24 | assert.ok(m.isDark(Color("red"))); 25 | 26 | assert.equal(m.level(Color("white"), Color("black")), "AAA"); 27 | assert.equal(m.level(Color("grey"), Color("black")), "AA"); 28 | }); 29 | }); --------------------------------------------------------------------------------