检查网页配色是否符合WCAG规范的神器「Color review」 | 您所在的位置:网站首页 › 色彩辨识测试软件下载 › 检查网页配色是否符合WCAG规范的神器「Color review」 |
本文要推荐的「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 的颜色,协助使用者找出更适合的配色组合 土拨鼠 文章 1859 人气 7299.9w优秀设计师 +关注作者 收藏 78 点赞 30复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。 继续阅读本文相关话题 Color.review WCAG 2.1 网页配色 配色 |
CopyRight 2018-2019 实验室设备网 版权所有 |