我们在设计网页、设计App的时候会担心文字是否能在有色背景上清晰显示,其实WCAG向我们提供了非常好的检查方案。检查颜色是否有足够的对比度应加入到设计检查的流程中来。

为什么要做颜色对比度检查?

对比度为3:1是[[ISO-9241-3]]和[[ANSI-HFES-100-1988]]为标准文本和视觉推荐的最低水平。使用4.5:1的比例来说明由于中度视力低下、先天或后天颜色缺陷或通常伴随年龄增长的对比度敏感度丧失而造成的对比度损失。

其基本原理是基于在ANSI标准中采用3:1对比度作为正常观察者可接受的最低对比度,以及b)人群中,20/40的视力与大约1.5的对比度敏感度损失。因此,20/40的用户需要3*1.5=4.5比1的对比度。根据类似的经验发现和相同的逻辑,视力为20/80的用户需要大约7:1的对比度。

对比度为4.5:1被选为AA级,因为它补偿了视力损失大约相当于20/40视力的用户通常经历的对比度敏感度的损失。(20/40计算约为4.5:1。)20/40通常被报道为大约80岁的老年人的典型视力。

7:1的对比度被选为AAA级,因为它补偿了视力损失大约相当于20/80视力的用户通常经历的对比度敏感度的损失。视力丧失程度超过这个程度的人通常使用辅助技术来访问他们的内容(辅助技术通常具有对比度增强功能,以及内置的放大功能)。因此,7:1级别通常补偿不使用辅助技术的低视力用户所经历的对比度灵敏度的损失,并且还为颜色缺陷提供对比度增强。

那么要求是怎样的?

准则依据三个合规性级别进行分级:A 级(最低)、AA 级以及 AAA 级(最高)。以下是各个级别的简要定义:

级别 A:​您的站点满足基本的、最低级别的无障碍性。要达到此级别,需满足所有级别 A 成功标准。

级别 AA:​这是要努力实现的理想无障碍级别,在此级别,站点满足基本级别的无障碍性,因此多数情况下大部分人都可以使用大部分技术访问站点。要达到此级别,需满足所有级别 A 和级别 AA 成功标准。

级别 AAA:​您的站点在无障碍方面达到了非常高的级别。要达到此级别,需满足所有级别 A、级别 AA 和级别 AAA 成功标准。

对比度检测工具

这里提供在Mac上非常好用的色彩对比度查看工具Contraste,这款工具是我用过最方便的色彩对比度检测工具。后来因为换电脑找不到了,在一次偶然的情况下发现了这个应用,立刻写文推荐!

可以在官网下载,如果下载速度慢的话也可以点这里下载。

在这里为不是Mac的用户提供一个在线网站:webAIM颜色对比度检测

参考文档

测试对比度的软件,WCAG颜色对比度检测工具,网页及App文字背景配色检测软件...相关推荐

  1. coverity代码检测工具介绍_兴业证券:静态代码检测最佳实践

    一. 引言 谷歌发布的代码规范中指出,80% 的缺失是由 20% 的代码所引起的.规范的代码可以消除过于强烈的个人风格,有助于代码在项目间高效的流转:提升代码的正确性,降低低级问题产生的可能性:同时也 ...

  2. 网页301重定向检测工具(网页HTTP状态代码检测)

    301重定向是在搜索引擎优化中一个很常用的操作,可以帮助我们转移域名的权重.但是在做301重定向的时候由于服务器系统.网站程序语言.域名和链接地址的不同,使用的方法也不同.这个时候我们就要使用301重 ...

  3. android 摄像头检测工具,检摄app下载-检摄软件(检测摄像头)下载 v1.0.7安卓版_5577安卓网...

    检摄app推荐给大家,很多人担心在商场.酒店或是其他其他地方隐藏摄像头来偷窥自己的隐私,那怎么办?小编分享这款检摄软件给你们使用,进入房间之前开启,利用磁力传感器功能来感应周围的摄像头,一起来下载使用 ...

  4. linux下emmc检测工具,eMMC check(eMMC芯片是否新机检测工具)1.3.0 安卓版

    用EMMc这个软件检测你的手机芯片是否有BUG,其实更大的用处还是看字库的写入时间以此来鉴别是否新机.直接下载就是apk文件安卓手机直接安装. 最近越来越多的人反映三星I9300莫名其妙的开不了机,开 ...

  5. linux 系统硬件信息检测工具,9种在Linux系统上检测CPU信息的工具

    在Linux中,有许多命令行或基于GUI的工具就能来展示你的CPU硬件的相关具体信息.下面是学习啦小编收集整理的9 种在 Linux 系统上检测 CPU 信息的工具,希望对大家有帮助~~ 9 种在 L ...

  6. leakcanary内存泄露检测工具 Dumping memory, app will freeze. Brrr

    官网地址 https://github.com/square/leakcanary 官网继承步骤就2步,超简单,但是集成进项目后, 问题一:一直弹出("Dumping memory, app ...

  7. linux内存硬件检测工具,13种在 Linux 系统上检测 CPU 信息的工具

    1. /proc/cpuinfo 最简单的方法就是查看 /proc/cpuinfo ,这个虚拟文件展示的是可用CPU硬件的配置.$ more/proc/cpuinfo 通过查看这个文件,你能识别出物理 ...

  8. matlab软件推广海报,海报制作软件下载-posterlabs海报制作工具下载1.0 官方版-西西软件下载...

    posterlabs海报制作工具是一款专业制作各种海报的软件,内置了各种各样的现成模板,使用非常方便,要使用posterlabs首先要下载一个安卓模拟器,小编在这里推荐靠谱助手! 靠谱助手下载地址 安 ...

  9. 处理器tdp测试软件,CPU-Z(cpu检测工具)

    CPU-Z(cpu检测工具)支持64位系统下CPU检测软件,除了使用Intel或AMD自己的检测软件之外,我们平时使用最多的此类软件就数它了.CPU-Z 支持的CPU种类相当全面,软件的启动速度及检测 ...

  10. sd 芯片测试软件,sd卡芯片检测工具基础知识解析

    原标题:sd卡芯片检测工具基础知识解析 sd卡芯片检测工具是芯片行业常用的设备之一,那么用户在使用sd卡芯片检测工具的时候需要注意哪些问题呢? sd卡芯片检测工具主要测试内容有信道内测试用来测试接收器 ...

最新文章

  1. 对javscript中Object.defineProperty的理解
  2. 深入解析Java锁机制
  3. Google Brain与牛津大学主持最新《计算机视觉前沿》报告(146页PPT)
  4. python selenium 处理弹窗_python中能否使用selenium获取弹窗的文本内容?
  5. mavon-editor文本编辑器初体验(一)
  6. RED HAT 7 性能监控工具
  7. 明白了一个重要的道理
  8. C#常见委托のdelegate定义,Func,Action,Predicate总结
  9. 减小数据泄密负面影响的办法
  10. WCF 入门调用实例教程
  11. HDU 5234 Happy birthday 01背包
  12. 电饭锅鸿蒙系统,有了美的轻食电饭煲,人们更加确定了做饭工具的重要性
  13. Zeal--一款支持207个离线文档的浏览器
  14. Batch Normalization在CNN中的原理,nb与lrb的区别
  15. 【分享】 [教学]破解完全入门篇
  16. abaqus的python安装文件在哪_python - 在ABAQUS 6.14 python环境中安装熊猫 - 堆栈内存溢出...
  17. AD怎么输入坐标_如何把CAD图纸坐标转换成现场坐标?
  18. 2021年中国饲料添加剂行业发展现状分析(附产值、市场供需现状、进出口贸易)[图]
  19. 【有利可图网】PS实战系列:合成奇幻星空下的童话场景
  20. revi的插件【参数同步】一键多类别明细表

热门文章

  1. emoji 表情图片解决方法
  2. Win10在Dev-C++配置Npcap
  3. 桌面运维转网络要做什么准备,高级网工学习路线分享
  4. SpringCloud服务器服务注册在Euraka上,访问IP地址问题
  5. 完全干净卸载 iTunes 步骤
  6. 6678与FPGA PCIE调试
  7. IDEA 各版本下载地址
  8. MacBook远程控制工具VNC Viewer_亲测使用
  9. 图像批处理高斯滤波降噪+峰值信噪比计算
  10. c语言 整数符号,c语言有符号整数