npm 包 get-contrast-ratio 使用教程

在前端开发中，有时需要对文本颜色和背景颜色进行对比度分析。而 npm 包 get-contrast-ratio 则可以帮助我们计算出两种颜色之间的对比度，以便于我们更好地根据 WCAG 2.0 标准进行颜色搭配选择。

安装

在使用 get-contrast-ratio 之前，需要先安装它。可以在终端或命令行工具中使用以下命令进行安装：

npm install get-contrast-ratio --save

使用

在安装了 get-contrast-ratio 之后，可以在文件中引入它：

const getContrastRatio = require('get-contrast-ratio');

接着，就可以使用 getContrastRatio 函数计算两种颜色之间的对比度：

const contrastRatio = getContrastRatio('#ffffff', '#000000');
console.log(contrastRatio); // 输出 21

getContrastRatio 函数接收两个参数，分别是两种颜色的字符串表示。颜色的字符串表示可以是十六进制值（如 #ffffff），也可以是 RGB 值（如 rgb(255, 255, 255)）。

计算出的对比度值越大，说明两种颜色之间的对比度越好。根据 WCAG 2.0 标准，对于一般文本来说，对比度应该达到 4.5 或以上，对于加粗文本和大文本（大小大于等于 18pt 或者加粗且大小大于等于 14pt）来说，对比度应该达到 3 或以上。

示例

接下来，我们来看看如何使用 get-contrast-ratio 对多组颜色进行对比度分析。

示例 1

第一组颜色是红色和白色：

const red = '#ff0000';
const white = '#ffffff';

const contrastRatio1 = getContrastRatio(red, white);
console.log(contrastRatio1); // 输出 3.9981683328731635

可以看到，计算出的对比度值是 3.998，不满足一般文本的对比度要求。

示例 2

第二组颜色是白色和黑色：

const black = '#000000';

const contrastRatio2 = getContrastRatio(white, black);
console.log(contrastRatio2); // 输出 21

可以看到，计算出的对比度值是 21，满足一般文本的对比度要求。

示例 3

第三组颜色是蓝色和黄色：

const blue = '#0000ff';
const yellow = '#ffff00';

const contrastRatio3 = getContrastRatio(blue, yellow);
console.log(contrastRatio3); // 输出 1.074835129698693

可以看到，计算出的对比度值是 1.075，不满足一般文本的对比度要求。

总结

get-contrast-ratio 是一款非常实用的 npm 包，可以帮助我们计算出两种颜色之间的对比度。在进行前端开发时，可以使用它来分析文本颜色和背景颜色是否符合 WCAG 2.0 标准，以达到更好的可访问性和用户体验。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedad22b5cbfe1ea0610be6