!
也想出现在这里? 联系我们
提示
当前位置:首页>全部>检查网页配色是否符合WCAG规范的神器「Color review」

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

本文要推荐的「Color.review」是用来计算两种颜色对比度、检查是否符合 WCAG 2.1 规范的在线工具,也能协助使用者找出看起来好看、又适合每个人的色彩组合。

本文要推荐的「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 颜色格式,选择自己习惯的格式即可。

uisdc-kt-20220821-2

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

uisdc-bc-20220821-1

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

uisdc-kt-20220821-4

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

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

uisdc-kt-20220821-3

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

uisdc-bc-20220821-2

值得一试的三个理由:

  1. 在线色彩对比度测试工具,检查是否符合 WCAG 2.1 规范
  2. 设定前景色、背景色后套用到范例文章查看标题和内文样式
  3. 显示对比 3、4.5 和 7 的颜色,协助使用者找出更适合的配色组合
声明:本站所有文章,如无特殊说明或标注,均为本站内容发布人原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。邮箱:ts@suiruo.com。

给TA认同
共{{data.count}}人
人已认同
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索