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

如何做到以上的对比度?

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

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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,098评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,213评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,960评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,519评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,512评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,533评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,914评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,574评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,804评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,563评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,644评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,350评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,933评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,908评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,146评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,847评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,361评论 2 342

推荐阅读更多精彩内容