contrast-ratio-checker
v1.1.7
Published
A package based on WCAG 2.0 to easily check contrast ratio.
Downloads
1,341
Maintainers
Readme
Contrast Ratio Checker
A package based on WCAG 2.0 to easily check contrast ratio.
The equations for luminance and contrast ratio are based on WCAG 2.0 as shown below:
https://www.w3.org/TR/WCAG20/#relativeluminancedef
http://www.w3.org/TR/WCAG20/#contrast-ratiodef
Installation:
npm install contrast-ratio-checker
Usage:
To calculate luminance
:
const crc = new ContrastRatioChecker()
const rgb = { red: 255, green: 129, blue: 0 }
crc.getLuminance(rgb) // result: 0.36960513804637335
To calculate contrast ratio by luminance
:
const crc = new ContrastRatioChecker()
const rgb1 = { red: 255, green: 129, blue: 0 }
const rgb2 = { red: 100, green: 0, blue: 58 }
const l1 = crc.getLuminance(rgb1)
const l2 = crc.getLuminance(rgb2)
//luminance order doesnt matter
crc.getContrastRatioByLuminance(l1, l2) // result: 5.235369975583679
To calculate contrast ratio by RGB Object
:
const crc = new ContrastRatioChecker()
const rgb1 = { red: 255, green: 129, blue: 0 }
const rgb2 = { red: 100, green: 0, blue: 58 }
crc.getContrastRatioByRgb(rgb1, rgb2) // result: 5.235369975583679
To calculate contrast ratio by HEX string
:
const crc = new ContrastRatioChecker()
const hex1 = "#e5e5e5"
const hex2 = "#ab0" //shorthands are accepted
crc.getContrastRatioByHex(hex1, hex2) // result: 1.698093107780376
Validation
WCAG 2.0 says that to a text be considered large, it needs 18pt or 14pt bold.
level AA (minimum)
says that if text is large, ratio needs to be>= 3, otherwise >= 4.5
.
level AAA (enhanced)
says that if text is large, ratio needs to be>= 4.5, otherwise >= 7
.Source:
https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html
https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast7.html
To get validation using contrast ratio
as input:
const crc = new ContrastRatioChecker()
const ratio = 4.7
crc.getWcagRatioValidation(ratio) // result: { WCAG_AA: true, WCAG_AAA: false }
//accepts as args: ratio, font size in px and bold (boolean)
crc.getWcagRatioValidation(ratio, 30) // result: { WCAG_AA: true, WCAG_AAA: true }
To get validation using hex string
as input:
const crc = new ContrastRatioChecker()
const hex1 = "#e5e5e5"
const hex2 = "#555" //shorthands are accepted
// ratio ~5.91
crc.getRatioValidationByHex(hex1, hex2) // result: { WCAG_AA: true, WCAG_AAA: false }
crc.getRatioValidationByHex(hex1, hex2, { fontSizePx: 19, bold: true }) // result: { WCAG_AA: true, WCAG_AAA: true }
// using custom ratios:
crc.getRatioValidationByHex(hex1, hex2, {
fontSizePx: 19,
bold: true,
custom: 6,
}) // result: { WCAG_AA: true, WCAG_AAA: true, CUSTOM: false }
To get validation using RGB Object
as input:
const crc = new ContrastRatioChecker()
const rgb1 = { red: 255, green: 184, blue: 202 }
const rgb2 = { red: 120, green: 0, blue: 122 }
// ratio ~6.23
crc.getRatioValidationByRgb(rgb1, rgb2) // result: { WCAG_AA: true, WCAG_AAA: false }
crc.getRatioValidationByRgb(rgb1, rgb2, { fontSizePx: 19, bold: true }) // result: { WCAG_AA: true, WCAG_AAA: true }
// using custom ratios:
crc.getRatioValidationByRgb(rgb1, rgb2, {
fontSizePx: 19,
bold: true,
custom: 6,
}) // result: { WCAG_AA: true, WCAG_AAA: true, CUSTOM: true }
License
Copyright © 2023, Vinícius R. Vieira. Released under the MIT License.