通常在选择网页的背景和前景色时会考虑到阅读上的舒适度,如果颜色太接近或是对比太大,有可能让阅听者在阅读上变得不那么舒服,也会使整体配色出现奇怪的感觉。除了从选色工具直接套用其他设计师选好的颜色(例如着色的可随机产生符合WCAG规范的文字和背景颜色组合),我也建议测试一下你选用颜色之间的「网页亲和力」指数,这个步骤并不会耗费太多时间。
本文要推荐的「Hex Naw」是一款免费在线工具,可协助设计师或开发人员测试整体颜色的对比度和可视性,如同之前介绍过的「Koa11y检测网页有无符合网页亲和力」A11y各项指标和最佳化建议,只不过Hex Naw不用下载或安装,通过浏览器就能轻松使用。
开启Hex Naw后直接填入要检测的颜色色码Hex值,最少两个,最多12个,随即就会跑出这些颜色的交叉测试结果,接下来我会实际操作示范一次,如果想知道你的网页配色有没有符合WCAG规范指数,会不会让使用者在阅读时产生问题都可以透过这个工具测试一下。
站点名称:Hex Naw
网站连接:HTTPS://hexnaw.com/
使用教学
步骤1
开启Hex Naw网站后,直接输入你要测试的Hex色码值,至少必须输入两个(不然检测没意义),然后按下「Test Colors」就会跑出结果。
正常情况下可能你只想测试背景色和文字颜色(前景色),不过如果你想测试的颜色很多,可点选「添加」加入其他字段,最多每次可交叉测试12种颜色组合。
STEP 2
我以免费资源网络社群的底色和文字颜色做为示例。测试结果可以得到相当高的对比值,无论是在大文字或小文字部分都获得AAA也就是最好的分数,因此这两个颜色放在一起是没问题的。
不过如果你测得的对比值较低,有些颜色在小文字方面效果可能不慎理想,这时候可能就会只有AA或A(最低级别),甚至直接给出「瑙」也就是不建议使用这样的组合,如果你的测试结果分数较差或出现不建议的组合可能就要考虑重新调整一下颜色啰!
67运营推荐值得一试的三个理由:
1、 测试网页整体配色的对比和可视性评级
2、 查看色彩组合是否符合WCAG规范
3、通过网页即可使用,无需下载安装软件
举报/反馈