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:

1const crc = new ContrastRatioChecker()
2
3const rgb = { red: 255, green: 129, blue: 0 }
4
5crc.getLuminance(rgb) // result: 0.36960513804637335

To calculate contrast ratio by luminance:

1const crc = new ContrastRatioChecker()
2
3const rgb1 = { red: 255, green: 129, blue: 0 }
4const rgb2 = { red: 100, green: 0, blue: 58 }
5
6const l1 = crc.getLuminance(rgb1)
7const l2 = crc.getLuminance(rgb2)
8
9//luminance order doesnt matter
10crc.getContrastRatioByLuminance(l1, l2) // result: 5.235369975583679

To calculate contrast ratio by RGB Object:

1const crc = new ContrastRatioChecker()
2
3const rgb1 = { red: 255, green: 129, blue: 0 }
4const rgb2 = { red: 100, green: 0, blue: 58 }
5
6crc.getContrastRatioByRgb(rgb1, rgb2) // result: 5.235369975583679

To calculate contrast ratio by HEX string:

1const crc = new ContrastRatioChecker()
2
3const hex1 = "#e5e5e5"
4const hex2 = "#ab0" //shorthands are accepted
5
6crc.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:

1const crc = new ContrastRatioChecker()
2
3const ratio = 4.7
4
5crc.getWcagRatioValidation(ratio) // result: { WCAG_AA: true, WCAG_AAA: false }
6
7//accepts as args: ratio, font size in px and bold (boolean)
8
9crc.getWcagRatioValidation(ratio, 30) // result: { WCAG_AA: true, WCAG_AAA: true }

To get validation using hex string as input:

1const crc = new ContrastRatioChecker()
2
3const hex1 = "#e5e5e5"
4const hex2 = "#555" //shorthands are accepted
5
6// ratio ~5.91
7
8crc.getRatioValidationByHex(hex1, hex2) // result: { WCAG_AA: true, WCAG_AAA: false }
9
10crc.getRatioValidationByHex(hex1, hex2, { fontSizePx: 19, bold: true }) // result: { WCAG_AA: true, WCAG_AAA: true }
11
12// using custom ratios:
13
14crc.getRatioValidationByHex(hex1, hex2, {
15    fontSizePx: 19,
16    bold: true,
17    custom: 6,
18}) // result: { WCAG_AA: true, WCAG_AAA: true, CUSTOM: false }

To get validation using RGB Object as input:

1const crc = new ContrastRatioChecker()
2
3const rgb1 = { red: 255, green: 184, blue: 202 }
4const rgb2 = { red: 120, green: 0, blue: 122 }
5
6// ratio ~6.23
7
8crc.getRatioValidationByRgb(rgb1, rgb2) // result: { WCAG_AA: true, WCAG_AAA: false }
9
10crc.getRatioValidationByRgb(rgb1, rgb2, { fontSizePx: 19, bold: true }) // result: { WCAG_AA: true, WCAG_AAA: true }
11
12// using custom ratios:
13
14crc.getRatioValidationByRgb(rgb1, rgb2, {
15    fontSizePx: 19,
16    bold: true,
17    custom: 6,
18}) // result: { WCAG_AA: true, WCAG_AAA: true, CUSTOM: true }

License

Copyright © 2023, Vinícius R. Vieira. Released under the MIT License.