Text Contrast
Automatically adjust text color based on background color to improve readability. Also provides methods for determining if an rgb, rgba, or hex color code is light or dark.
Basic Example
Some TextSome TextSome TextSome TextSome TextSome TextSome Text
textContrast.fix(el[, light[, dark]])
This method will check the background-color of each element found and set it's color to light or dark as appropriate. el
parameter can be an element, array of elements, selector, or array of selectors. Does not look at background-color of parent elements.
textContrast.isLight(color)
Returns true
if color
is considered light, false
otherwise. Color format can be hex, rgb, or rgba (note that rgba alpha channels are not considered in determining lightness). Throws error if color
cannot be parsed and converted to an RGB value.
Examples
'use strict'; // Hex codes can be 3 or 6 characters // Hex should match pattern /^#?([0-9a-fA-F]{3}){1,2}$/ textContrast; // true textContrast; // true // Leading octothorpe not required textContrast; // true // Can also use rgb/rgba values textContrast; // true textContrast; // true // Note that transparency is not considered textContrast; // false
textContrast.isDark(color)
Returns true
if color
is considered dark, false
otherwise. Color format can be hex, rgb, or rgba (note that rgba alpha channels are not considered in determining lightness). Throws error if supplied color cannot be parsed and converted to an RGB value.
Examples
'use strict'; // Hex codes can be 3 or 6 characters textContrast; // true textContrast; // true // Leading octothorpe not required textContrast; // true // Can also use rgb/rgba values textContrast; // true textContrast; // true // Note that transparency is not considered textContrast; // true
textContrast.isLightOrDark(color)
Returns 'light'
if color is considered light, 'dark'
if the color is dark, undefined otherwise.
Examples
'use strict'; // Hex codes can be 3 or 6 characters textContrast; // 'dark' textContrast; // 'dark' // Leading octothorpe not required textContrast; // 'light' // Can also use rgb/rgba values textContrast; // 'dark' textContrast; // 'light' // Note that transparency is not considered textContrast; // 'dark'