Color combination contrast tester
Takes a set color palette and shows contrast values for every possible combination. This is useful for finding safe color combinations with predefined colors and includes pass/fail scores for the WCAG accessibility guidelines.
npm install --save colorable
Pass an array of color strings or an object with color strings as values.
var colorable = ;var colors =red: 'red'green: 'green'blue: 'blue';var options =compact: truethreshold: 0;var result = ;
Returns an array of colors with combinations for all other colors and their WCAG contrast values.
Each key is a boolean value indicating if the color contrast meets the following criteria:
aa- greater than 4.5 (for normal sized text)
aaLarge- greater than 3 (for bold text or text larger than 24px)
aaa- greater than 7
aaaLarge- greater than 4.5
Type: Boolean (default:
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.
Type: Number (default:
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.
Type: Boolean (default: true)
When set to
true, the array of colors is passed through lodash.uniq to remove duplicates.