难啃的高端干货：浅谈设计中色彩无障碍设计之对比度探索

正文

请到「今天看啥」查看全文

△ 完全满足大字对比度>3；小字对比度>4.5。

设计时，可以借助一些工具，比如用「灰度/色盲模拟器」测试设计。 （ Photoshop 在其“View> Proof Setup”菜单中内置了色盲滤镜。）

时刻记得问问你自己，页面上的 CTA ( call to action ) 是否「看上去」是页面中的主要元素。

三. 「对比度检测」工具推荐

一些实用在线工具可以用来测试对比度是否满足 WCAG 2.0 AA 的「色彩无障碍设计」标准。

WebAIM’s Color Contrast Checker

可以直接在线调颜色，实时看对比度是否满足要求。

❤️ Tanaguru Contrast-Finder

若测试的2个颜色对比度不达标，会自动推荐一系列达标的颜色可供选择。

Easily calculate color contrast ratios

方便地检测对比度是否达标。

Color Safe

在定色板之前，可以用它来事先选择符合标准的颜色。

Color tool

另外推荐一款 Google 的配色工具，可直接检测颜色的accessibility。

Color Oracle

检测不同类型色盲、色弱患者，看到屏幕的效果。

四. 大厂案例

看完了规范，仍有些困惑未能解决，比如 ：

disabled text 对比度未作要求，那对比度也不可能是1，究竟多少比较合适？

最低对比度有了要求，那么最高对比度呢？毕竟纯黑加纯白也很难受。

黄色橙色这种，无论如何在白背景也不可能满足对比度 ＞ 3的颜色，如何处理？

所以我选取了一些比较注重无障碍设计的大厂案例，以求能发现一些规律。

Google Chrome

「无障碍设计」已经是 Google Chrome DNA 的一部分。过去的两年中，这方面做了尤其多的努力。新的配色方案符合 WCAG 2.0 规范，有足够高的对比度。所有的 text、icongraphy，都尽量满足 WCAG 2.0 AAA 标准。

我用 EightShapes Contrast Grid 验证了一下 Google text 颜色的对比度：

经验证，发现 Google 果然在明暗两种背景下的配色，几乎都满足 WCAG 2.0 AAA 标准（color contrast ratio > 4.5）。

唯独白背景下的 warning 色对比度为3.3，仅满足 AA 标准 ( color contrast ratio > 3)。

另，disabled 的颜色对比度不属于限定范围，Google 对比度是1.8、2.2。

另外我发现，Google 在深浅背景上使用的颜色，都不是直接将 brand color 拿过来就用，而是根据不同背景调整后的颜色。

而即使是 brand color，Google 也尽量使之和白背景的对比度满足 AA 标准（黄色、橙色例外）。

Material Design

Material Dsign 官方说明：

Accessible color palette

Choose primary, secondary, and accent colors for your app that support usability. Ensure sufficient color contrast between elements so that users with low vision can see and use your app.

请到「今天看啥」查看全文