工作经验分享检查网页配色是否符合WCAG规范的神器「Color review」

本文要推荐的「Color.review」是用来计算两种颜色对比度、检查是否符合 WCAG 2.1 规范的在线工具,也能协助使用者找出看起来好看、又适合每个人的色彩组合, Color.review 无需下载软件或应用程序、直接以浏览器开启就能使用,产生对应的分享链接来将检测结果提供给其他人参考。

Color.review 使用 RGB、HSL、CMYK 和 CSS 格式置入颜色,还有一篇带有标题、内文加上图片的范例文章用来预览配色,除了显示两个颜色计算后的对比度数值还能找出符合 WCAG 规范的颜色(后面内文详细说明)。

Color.review
网站链接:https://color.review/

使用教学

开启 Color.review 网站后会有预设颜色,主要是从右侧调整前景、背景色,检查上方显示的内文、标题是否有符合 WCAG 规范的对比度,最好是能设定到两个数值都绿色 AAA,不行的话也至少要让两个数值都显示为绿色(对比度 4.5 以上)。

右上角会有 RGB、HSL、CMYK 或 CSS 颜色格式,选择自己习惯的格式即可。

工作经验分享检查网页配色是否符合WCAG规范的神器「Color review」

检查网页配色是否符合WCAG规范的神器「Color review」

举例来说,我设定前景、背景色后左上角显示的对比度为 4.1,再从上方看到文字部分没有通过 WCAG 2.1 规范,显示为红色的 FAIL,在这样的配色情况可能会导致内文不容易阅读(不过标题因字体较大就没影响)。

检查网页配色是否符合WCAG规范的神器「Color review」

工作经验分享检查网页配色是否符合WCAG规范的神器「Color review」

往下卷动网页会看到前景、背景色实际套用在一篇文章或图案上的效果,左侧还会显示有无符合 WCAG 2.1 以及评分为 AA 或是 AAA,可以看到在这个配色时只有标题有通过,内文部分则是连 AA 评级都没有达到。

检查网页配色是否符合WCAG规范的神器「Color review」

那么要怎么利用 Color.review 来调整到符合 WCAG 2.1 规范的对比度呢?

有看到调色盘里面有三条线吗?分别对应到不同的对比度,例如下图由上而下分别为 3、4.5 和 7,只要将颜色调整到 4.5 – 7 之间就能让内文及标题的评级达到绿色通过(如果需要两者都达到 AAA 评级,就要将颜色拉到最下方那条线才有足够的对比度)。

检查网页配色是否符合WCAG规范的神器「Color review」工作经验分享检查网页配色是否符合WCAG规范的神器「Color review」

微调后对比度提高到 4.5,也就符合 WCAG 2.1 对比度(内文为 AA、标题 AAA),看起来也和原本颜色相去不远,如果你想要调整网页颜色,让它可以让一般使用者顺利阅读,其实花点时间微调配色相当重要喔!

检查网页配色是否符合WCAG规范的神器「Color review」

值得一试的三个理由:

在线色彩对比度测试工具,检查是否符合 WCAG 2.1 规范
设定前景色、背景色后套用到范例文章查看标题和内文样式
显示对比 3、4.5 和 7 的颜色,协助使用者找出更适合的配色组合

原创文章,作者:工作,如若转载,请注明出处:https://www.zhis.vip/21.html

(1)
上一篇 2021年10月18日 下午1:45
下一篇 2023年12月16日 下午5:51

相关推荐

  • 《洛神赋》曹植·魏晋

    黄初三年,余朝京师,还济洛川。古人有言,斯水之神,名曰宓妃。感宋玉对楚王神女之事,遂作斯赋。其辞曰: 余从京域,言归东藩。背伊阙,越轘辕,经通谷,陵景山。日既西倾,车殆马烦。尔乃税…

    最新 2024年3月7日
  • 《滕王阁序》唐·王勃

    豫章故郡,洪都新府。星分翼轸,地接衡庐。襟三江而带五湖,控蛮荆而引瓯越。物华天宝,龙光射牛斗之墟;人杰地灵,徐孺下陈蕃之榻。雄州雾列,俊采星驰。台隍枕夷夏之交,宾主尽东南之美。都督…

    最新 2024年5月10日
  • 人是万物的尺度

    人是万物的尺度,真正的工作应该是创造价值的工作,影响人的工作就是有价值的工作

    最新 2023年12月16日
  • 设计工作经验分享:不会3D软件?简单6步教你学会做立体字!

    人狠话不多,马上进入正题 第一步:确定主题及字体 作为一个有经验的设计师,是不会轻易就开始的,所以希望在开始设计前跟需求方确定好主题,当主题确认后,我们可以选择一款比较符合主题的字…

    最新 2021年10月18日

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注