UI设计无障碍阅读（WCAG）技巧-字体对比度

什么是WCAG

Web（Web Content Accessibility Guidelines）内容无障碍指南（WCAG）2.0涵盖范围广泛，涉及了一些建议，这些建议可使Web内容更容易访问。遵循这些原则，能够让内容更易为广大残障人士所接受，包括失明和低视力、失聪和重听、学习障碍、认知障碍、行动不便、言语残疾、光过敏患者和这些病症的复合患者。遵循这些原则也可让普通用户更容易访问您的Web内容。

WCAG 2.0指南结构

• 原则 - 首先是四大原则，它提供了Web无障碍的基础： 可感知性，可操作性，可理解性和鲁棒性。参见理解无障碍四项原则。

• 准则 - 原则之下是准则。提供的12项准则是为了达到这样一个基本目标：作者应努力使内容更容易让不同症状的残障用户能够访问。该准则是不可测试的，但提供了框架和总体目标，以帮助作者了解成功标准和更好地实现该技巧。

• 成功标准 - 对每一个准则，提供了可测试的成功标准，以允许WCAG 2.0被用在需要进行需求和一致性测试的地方，例如设计规范，采购，管理，合同协议。为了满足不同的群体和不同的情况，我们定义了一致性的三个级别：A（最低），AA，AAA级（最高）。关于WCAG级别的信息可在理解一致性级别里找到。

• 充分性技巧和建议性技巧 - 对于WCAG 2.0文件里每条 准则和 成功标准，工作组也说明了范围广泛的各种技巧。该技巧为告知性的，且分为两类： 充分达到成功标准的技巧和 建议性技巧。建议性技巧已超越了独立的成功标准的范围，让作者更好地理解准则。一些建议性技巧解决了一些障碍，这些障碍在可测试的成功标准里没有覆盖到。凡是已知的常见错误，都已记录在案。参见 WCAG2.0里充分性技巧和建议性技巧。
  指南的所有层次（原则、准则、成功标准、以及充分性技巧和建议性技巧）能够协调工作，以提供使内容更易于访问的指南。鼓励作者浏览和应用他们能用上的层次，包括建议性技巧，以尽可能更好地满足用户的广泛需求。

如何在UI设计中更好的做到内容的可辨别性

在UI设计过程中，我们一般情况下要做到WCAG要求达到的AA、AAA级标准？
1、AA级：

• 对比度（最小）: 文本**的视觉呈现以及文本图像至少要有4.5:1的对比度

• 大文本: 大号文本文本以及大文本图像至少有3:1的对比度;

2、AAA级：

• 对比度（加强）: 文本**的视觉呈现以及文本图像至少要有7:1的对比度

• 大文本: 大号文本文本以及大文本图像至少有4.5:1的对比度;

如何做到以上的对比度？

以下推荐的三个网站都能够轻松查看前景色和背景色的对比度

• Color review
  

  Corlor review.png

• WebAIM
  

  WebAIM.png

• CNTRAST CHECKER
  

  contrastchecker.png

参照以上三个网址来查看自己UI设计中的文本是否具有易读性还是很好的，个人觉得color review 在查看是否符合A、AA、AAA级别标准时比较方便，毕竟每一条线代表一个层级的范围；contrast checker在调节色相、饱和度、对比度单一数值上具有明显优势。

参考文章：
Acessibilidade Toolkit: Entendendo de uma vez por todas a WCAG

The new guidelines in WCAG 2.1 explained
Web内容无障碍指南 (WCAG) 2.1