你的设计“看得见”吗？UI无障碍设计（A11y）入门与自查工作流

摘要

本文旨在解决广大UI/UX设计师在日常工作中，常常因忽视“无障碍设计（Accessibility）”原则，而导致产品对有视觉障碍（如色盲、弱视）、听觉或运动障碍的用户不够友好，甚至完全不可用的核心痛点。我们将系统性地介绍WCAG（Web内容无障碍指南）中与设计师最相关的核心概念，并提供一套结合了 Adobe Color、Adobe Illustrator/XD 以及 Figma 插件的、切实可行的设计自查与优化工作流。通过本指南，你将学会如何将“包容性”的理念，融入你的日常设计中，创造出不仅“好看”，更能被所有人“看懂”和“使用”的优秀产品。

一、问题背景

想象一下这个场景：你刚刚为公司的一款新App，设计了一套你自认为惊艳绝伦的界面。色彩搭配高级，交互动效流畅，视觉元素精致，你自己每天用着都觉得是一种享受。

但App上线后不久，你收到了一条来自用户反馈平台的一星差评：“你们那个红色的删除按钮，在我看来，和绿色的确认按钮几乎是同一个颜色，我因为点错，已经误删了好几条重要数据了！能不能改改？！”

这位用户，可能就是全球数亿色盲/色弱用户中的一员。

我们常常会不自觉地沉浸在自己“健全”的视觉和交互世界里，却忽略了，我们认为理所当然的“红绿灯”配色、我们觉得赏心悦目的“高级灰”文字，对世界上另外一部分人来说，可能根本“看不见”或“看不清”。

今天，我们不聊什么酷炫的动效或前沿的3D，就来聊聊设计中最基本、也最容易被我们忽视的“同理心”——无障碍设计（Accessibility，社区里常简称为 A11y，因为A和y之间有11个字母）。

二、核心技术与工具栈

• 色彩对比度检查: Adobe Color (color.adobe.com)