美文网首页
UI设计无障碍阅读(WCAG)技巧-字体对比度

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

作者: 一米阳光_02f4 | 来源:发表于2019-06-28 16:01 被阅读0次

    什么是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的对比度;

    如何做到以上的对比度?

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

    参照以上三个网址来查看自己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

    相关文章

      网友评论

          本文标题:UI设计无障碍阅读(WCAG)技巧-字体对比度

          本文链接:https://www.haomeiwen.com/subject/tboscctx.html