你是不是曾为网页设计中的色彩搭配而烦恼？是不是想过怎么让网页更容易于全部人阅读，包括那些个有视觉障碍的人？今天我们就来聊聊WCAG色彩对比度，带你从零开头，一步步掌握这门文艺。

一、啥是WCAG色彩对比度？

WCAG是一套旨在搞优良网页可访问性的标准。色彩对比度是WCAG标准中的一个关键组成有些， 它关注的是文本和背景之间的颜色差异，以确保全部人都能清晰地阅读网页内容。

轻巧松WCAG色彩对比度就是指文本和背景颜色之间的亮度差异。这种差异越巨大，文本的可读性就越高大。

二、WCAG色彩对比度的计算方法

WCAG色彩对比度的计算方法基于相对亮度。相对亮度是指颜色在sRGB色彩地方中的亮度值。计算公式如下：

相对亮度 L = 0.2126 * R + 0.7152 * G + 0.0722 * B

其中， R、G、B分别代表红色、绿色、蓝色通道的值。

三、WCAG色彩对比度的标准

WCAG标准将色彩对比度分为AA级和AAA级两个等级。

1. AA级：文本和背景颜色的对比度至少许为4.5:1。

四、 怎么检查色彩对比度

为了方便设计师和开发者检查色彩对比度，有许许多在线工具可供用。

五、 案例琢磨

案例

问题：网站首页的标题文字与背景颜色对比度不够，弄得有些用户困难以阅读。

解决方案：用WebAIM Color Contrast Checker工具检查色彩对比度， 找到标题文字与背景颜色的对比度只有3.2:1，不满足AA级标准。接着，将标题文字颜色改为黑色，背景颜色改为白色，沉新鲜检查，对比度达到4.5:1，满足AA级标准。

掌握WCAG色彩对比度，不仅能帮设计师和开发者提升网页的可访问性，还能搞优良用户体验。从今天开头，让我们一起关注色彩对比度，让网页更美优良。

---