实际使用如下：
{ color: color-contrast(#ffcc00 vs #bbccdd, #0c0c0c, #d2691e); // 或者 color: color-contrast(#ffcc00 vs #bbccdd, #0c0c0c, #d2691e to 4.5); // 或者 color: color-contrast(#ffcc00 vs #bbccdd, #0c0c0c, #d2691e to AA); } 基于可访问性，理解 color-contrast()想要了解这个属性的具体作用，得需要一些前置知识。
首先，得知道什么是颜色对比度。这个在我的这篇文章里，也有提到过 -- 前端优秀实践不完全指南
什么是色彩对比度是否曾关心过页面内容的展示，使用的颜色是否恰当？色弱、色盲用户能否正常看清内容？良好的色彩使用，在任何时候都是有益的，而且不仅仅局限于对于色弱、色盲用户。在户外用手机、阳光很强看不清，符合无障碍标准的高清晰度、高对比度文字就更容易阅读。
这里就有一个概念 -- 颜色对比度，简单地说，描述就是两种颜色在亮度（Brightness）上的差别。运用到我们的页面上，大多数的情况就是背景色（background-color）与内容颜色（color）的对比差异。
借用一张图 -- 知乎 -- 助你轻松做好无障碍的15个UI设计工具推荐：
很明显，上述最后一个例子，文字已经非常的不清晰了，正常用户都已经很难看得清了。
什么是 WCAG 规范另外一个前置知识，了解 WCAG 规范。
在可访问性（也叫无障碍设计，Accessbililty，A11y）中，有个最权威的互联网无障碍规范 —— WCAG，制定了互联网无障碍相关的方方面面规矩。
其中 AA 级别规范规定，所有重要内容的色彩对比度需要达到 4.5:1 或以上（字号大于18号时达到 3:1 或以上），才算拥有较好的可读性。
而 AAA 级别标准下，所有重要内容的色彩对比度需要达到 7:1 或以上（字号大于18号时达到 4.5:1 或以上），才算拥有较好的可读性。
这也是上述 AA、AA-large、AAA、AAA-large 关键字的由来。
使用 color-contrast()了解了上述前置知识之后，就很容易了解 color-contrast() 的作用了。
举个例子：
{ background-color: #fff; color: color-contrast(#fff vs #000, #666, #ddd); }这里，背景色是白色 #fff，需要设置文本颜色，通过 color-contrast(#fff vs #000, #666, #ddd)，将 #fff 依次与 #000、#666、#ddd 比较，这 3 种颜色与白色的对比度分别是 21、5.74、1.35，21 对比度最大，展示最为清晰，所以，最终 color 的颜色就是 #000。
示意图如下：
如果应用上 to 关键字：
{ background-color: #fff; color: color-contrast(#fff vs #000, #666, #ddd to 4.5); }则不需要对比度最大颜色值，只选取对比度超出 4.5 的第一个值即可，这里 color 的最终计算值就是 #666，因为 5.74 大于 4.5。
总结一下color-contrast() 的出现，很好的体现了如今 CSS 发展的一个大方向，更加关注用户体验，关注互联网的无障碍设计，这也是国内目前 FE 比较容易忽视的。
可访问性，在我们的网站中，属于非常重要的一环，但是大部分前端（其实应该是设计、前端、产品）同学都会忽视它。
其实不仅仅是残障人士才会需要无障碍设计，我们在很多时候，也会遇到无障碍场景：
记住，无障碍设计对所有人都更友善。关注无障碍，开始考虑无障碍设计。
最后本文介绍了 2 个在 2021 CSS 使用现状中最为冷门的特性，前者不好评估，但是后者在未来还是会有一定的作用，即便用不上，了解了解也不吃亏~