WCAG色彩无障碍设计
haoteby 2024-11-18 12:48 24 浏览
WCAG（Web Content Accessibility Guidelines）作为无障碍网页内容的国际标准，确保了无论用户的视觉能力如何，都能清晰地阅读和理解网页内容。本文将详细介绍WCAG中关于色彩无障碍设计的要求，包括对比度的测算方法和不同字号下应达到的AA级与AAA级标准，帮助设计师和开发者提升网页内容的可访问性。
一、什么是WCAG？
WCAG （Web Content Accessibility Guideline）《无障碍网页内容指南》是万维网联盟(W3C)无障碍网页倡议组织(WAI)发布的一系列无障碍网页指南中的一部分。
在WCAG 2.0中定义了文本呈现的对比度，就是文字与背景色两个颜色之间的对比度数值。
比如上面??标签中：文字色色值为#FFFFFF，背景色色值为#2334FF，将这两个色值输入到对比度测算网站中，就可以获得一个对比度值。
对比度测算网站：https://webaim.org/resources/contrastchecker/
通过测算网站计算得出该文字和颜色的对比度为6.98
二、如何衡量对比度的好坏？
在WCAG中主要定义了2个标准：AA级和AAA级。AAA级比AA级的要求更苛刻，比如同样14px的小字号，想要达到AA级，对比度至少为4.5:1，如果想要达到AAA级，对比度至少为7:1。比如上面的案例中，对比度为6.98:1，14px字号的情况下，就达不到AAA级标准。
三、AA级标准及AAA级标准字号对照表
在WCAG中还专门定义了小字号和大字号下的两个标准分别应该达到哪些对比度：
界面设计中最常用的2个数值
通常来说：界面中字体是低于18pt的Normal状态，按照AA级标准，要达到4.5:1；大于18pt以上要达到3:1。这也是日常界面设计中最关注的两个数值。所以日常在做界面时，如果发现界面中文字太弱的情况，要及时进行对比度测算，然后调整颜色色值，让用户「看得清」，不然真的会极大地拉低产品的用户体验。
四、Figma插件推荐 —— 快速测算对比度
Stark Accessibility Tools
直接吸取页面中的颜色帮助计算，很方便！
作者：陈婉宁，公众号：婉宁交互设计
本文由@陈婉宁 原创发布于人人都是产品经理，未经作者许可，禁止转载。
题图来自Unsplash，基于CC0协议。
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。
相关推荐
- 统统都能轻松装下。_如何安装统赢
-
今天必须来好好聊聊迈腾甄选款的外观升级优势，简直是把经典与时尚玩明白了！迈腾甄选款巧妙地保留了迈腾的经典气场和造型，就像一位历经岁月沉淀却风采依旧的绅士。2871mm的超长轴距搭配超短前后悬设计，这就...
- 麒麟操作系统常见问题:打开火狐浏览器提示没有安装flash插件
-
关键词：火狐浏览器、flash、插件、安装问题类型：...
- VS Code 新手必装插件清单_vs code 安装插件
-
以下是针对VSCode新手的必装插件清单，覆盖代码编辑、效率提升、美化等核心需求，适用于大多数开发场景：一、基础必备插件Chinese(Simplified)(简体中文)功能：将VSC...
- 开源JSON可视神器，让阅读JSON变得简单!-JSONHero
-
众所周知，现在有不少代码编辑器以及在线工具，都支持JSON格式化，因此这一特性，已经不能称的上是亮点。调试工具已经成为每个开发者不可或缺的“利器”。但是，你见过能直接可视化JSON数据，把整个...
- 在NAS上部署Barcode服务_nas basic
-
部署基于BWIP-JS的条形码生成APIBWIP-JS是一个优秀的JavaScript条形码生成库，它支持多种条形码类型，并且可以运行在Node.js环境下，非常适合用来构建API服务。...
- 详细介绍一下Python如何对JSON格式数据进行处理?
-
在Python中对于JSON数据的处理是在日常开发中的常见需求之一。通常情况下，对JSON数据的处理主要涉及到如下的的几个步骤对于JSON数据的解析操作对于JSON数据的处理操作对于JSON数据的格式...
- golang2021数据格式(69)Go语言将结构体数据保存为JSON格式数据
-
JSON格式是一种对象文本格式，是当前互联网最常用的信息交换格式之一。在Go语言中，可以使用json.Marshal()函数将结构体格式的数据格式化为JSON格式。想要使用json...
- 一个vsCode格式化插件_vscode 格式化文档
-
ESlint...
- 自己抓取家中IPTV组播地址，不用交换机或多网卡，远程抓取更方便
-
通过IPTV播放应用在电视、电脑或者手机观看家中的IPTV电视直播，可以摆脱IPTV机顶盒的限制，方便在家中多台电视或者手机电脑上观看IPTV电视直播。运营商IPTV的电视直播信号稳定、高清，和互联网...
- 扣子免费系列教程， 如何使用扣子(coze)对接飞书多维表格?
-
一、说明大家都知道使用扣子(coze)把一些文本内容转为小红书风格很方便。但每次都是复制粘贴。很麻烦那能不能批量呢？今天我们就来学习下，使用扣子(coze)平台完成内容的批量转换。基本思路是读取飞书多...
- 1024程序员节 花了三个小时调试 集合近50种常用小工具 开源项目
-
开篇1024是程序员节了，本来我说看个开源项目花半个小时调试之前看的一个不错的开源项目，一个日常开发常常使用的工具集，结果花了我三个小时，开源作者的开源项目中缺少一些文件，我一个个在网上找的，好多坑...
- 办公人必看!3分钟搞定JSON/XML/Markdown，格式转换竟如此简单!
-
你是不是也遇到过这些情况：领导突然甩来一份密密麻麻的数据文件，要你半小时内整理成报表；想写技术文档，却被Markdown的语法搞得头大；或者同事发来的JSON文件，打开全是“{”“}”“,”，看得眼花...
- 开发者必备!zerotools.top全栈效率神器
-
强烈建议开发者们收藏https://zerotools.top，用它来提升日常效率。一、功能覆盖：从数据到图像的全栈支持Zerotools.top的最大亮点，是其功能维度的完整性。根据最新页面...
- 15 个非常好用的 JSON 工具_json tools
-
JSON（JavaScriptObjectNotation）是一种流行的数据交换格式，已经成为许多应用程序中常用的标准。无论您是开发Web应用程序，构建API，还是处理数据，使用JSON工具可以大...
- C#.NET Newtonsoft.Json 详解_c# jsonresult
-
简介Newtonsoft.Json（又称...