本文要推荐的「Color.review」是用来计算两种颜色对比度、检查是否符合 WCAG 2.1 规范的在线工具,也能协助使用者找出看起来好看、又适合每个人的色彩组合, Color.review 无需下载软件或应用程序、直接以浏览器开启就能使用,产生对应的分享链接来将检测结果提供给其他人参考。
Color.review 使用 RGB、HSL、CMYK 和 CSS 格式置入颜色,还有一篇带有标题、内文加上图片的范例文章用来预览 配色 ,除了显示两个颜色计算后的对比度数值还能找出符合 WCAG 规范的颜色(后面内文详细说明)。
配色被说不好看?高手这160种配色方案直接拿去用! 颜色可以在很大程度上影响一件设计作品的调性和美观性,要想抓准一件设计作品的调性,选择一个合适的色彩搭配组合尤为关键,为此,葱爷花两天时间整理了 19 大设计调性,多达 160 种配色方案,赶紧收藏起来以备不时之需吧。
阅读文章 >
Color.review 网站链接: https://color.review/
使用教学
开启 Color.review 网站后会有预设颜色,主要是从右侧调整前景、背景色,检查上方显示的内文、标题是否有符合 WCAG 规范的对比度,最好是能设定到两个数值都绿色 AAA,不行的话也至少要让两个数值都显示为绿色(对比度 4.5 以上)。
右上角会有 RGB、HSL、CMYK 或 CSS 颜色格式,选择自己习惯的格式即可。
举例来说,我设定前景、背景色后左上角显示的对比度为 4.1,再从上方看到文字部分没有通过 WCAG 2.1 规范,显示为红色的 FAIL,在这样的配色情况可能会导致内文不容易阅读(不过标题因字体较大就没影响)。
往下卷动网页会看到前景、背景色实际套用在一篇文章或图案上的效果,左侧还会显示有无符合 WCAG 2.1 以及评分为 AA 或是 AAA,可以看到在这个配色时只有标题有通过,内文部分则是连 AA 评级都没有达到。
那么要怎么利用 Color.review 来调整到符合 WCAG 2.1 规范的对比度呢?
有看到调色盘里面有三条线吗?分别对应到不同的对比度,例如下图由上而下分别为 3、4.5 和 7,只要将颜色调整到 4.5 – 7 之间就能让内文及标题的评级达到绿色通过(如果需要两者都达到 AAA 评级,就要将颜色拉到最下方那条线才有足够的对比度)。
微调后对比度提高到 4.5,也就符合 WCAG 2.1 对比度(内文为 AA、标题 AAA),看起来也和原本颜色相去不远,如果你想要调整网页颜色,让它可以让一般使用者顺利阅读,其实花点时间微调配色相当重要喔!
值得一试的三个理由:
在线色彩对比度测试工具,检查是否符合 WCAG 2.1 规范 设定前景色、背景色后套用到范例文章查看标题和内文样式 显示对比 3、4.5 和 7 的颜色,协助使用者找出更适合的配色组合