ui-testing

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

UI Verification Skill

UI验证技能

Load with: ui-web.md or ui-mobile.md

加载方式：ui-web.md 或 ui-mobile.md

Purpose

用途

Quick verification that generated UI meets accessibility standards. Run these checks after creating any new UI components.

快速验证生成的UI是否符合可访问性标准。在创建任何新UI组件后运行这些检查。

Pre-Flight Checklist

上线前检查清单

Before Shipping ANY UI:

发布任何UI前需检查：

markdown

undefined

markdown

undefined

Visibility Check

All buttons have visible background OR border
No text is same color as its background
All text meets 4.5:1 contrast ratio
Ghost/text buttons have visible borders

All buttons have visible background OR border
No text is same color as its background
All text meets 4.5:1 contrast ratio
Ghost/text buttons have visible borders

Touch/Click Targets

All buttons are minimum 44px height
Icon buttons are minimum 44x44px
Adequate spacing between clickable elements

All buttons are minimum 44px height
Icon buttons are minimum 44x44px
Adequate spacing between clickable elements

States

Dark Mode (if applicable)

Text readable on dark backgrounds
Borders visible in dark mode
No gray-400 text on dark backgrounds

Text readable on dark backgrounds
Borders visible in dark mode
No gray-400 text on dark backgrounds

Responsive (web)

No horizontal scroll on mobile (320px)
Content readable at all breakpoints
Touch targets adequate on mobile

---

No horizontal scroll on mobile (320px)
Content readable at all breakpoints
Touch targets adequate on mobile

---

Quick Contrast Check

快速对比度检查

Use Browser DevTools

使用浏览器开发者工具

1. Right-click element → Inspect
2. In Styles panel, click on color value
3. Look for contrast ratio display
4. Must show ✓ for AA compliance (4.5:1 for text)

1. 右键点击元素 → 检查
2. 在样式面板中，点击颜色值
3. 查看对比度比值显示
4. 必须显示✓以符合AA标准（文本对比度需达到4.5:1）

Online Tools

在线工具

Tailwind Safe Combinations

Tailwind安全配色组合

LIGHT MODE (on white bg):
✓ text-gray-900  (#111827) = 16:1
✓ text-gray-800  (#1F2937) = 12:1
✓ text-gray-700  (#374151) = 9:1
✓ text-gray-600  (#4B5563) = 6:1
✗ text-gray-500  (#6B7280) = 4.6:1 (barely)
✗ text-gray-400  (#9CA3AF) = 2.6:1 (FAILS)

DARK MODE (on gray-900 bg):
✓ text-white     (#FFFFFF) = 16:1
✓ text-gray-100  (#F3F4F6) = 13:1
✓ text-gray-200  (#E5E7EB) = 11:1
✓ text-gray-300  (#D1D5DB) = 8:1
✗ text-gray-400  (#9CA3AF) = 5:1 (barely)
✗ text-gray-500  (#6B7280) = 3:1 (FAILS)

LIGHT MODE (on white bg):
✓ text-gray-900  (#111827) = 16:1
✓ text-gray-800  (#1F2937) = 12:1
✓ text-gray-700  (#374151) = 9:1
✓ text-gray-600  (#4B5563) = 6:1
✗ text-gray-500  (#6B7280) = 4.6:1 (barely)
✗ text-gray-400  (#9CA3AF) = 2.6:1 (FAILS)

DARK MODE (on gray-900 bg):
✓ text-white     (#FFFFFF) = 16:1
✓ text-gray-100  (#F3F4F6) = 13:1
✓ text-gray-200  (#E5E7EB) = 11:1
✓ text-gray-300  (#D1D5DB) = 8:1
✗ text-gray-400  (#9CA3AF) = 5:1 (barely)
✗ text-gray-500  (#6B7280) = 3:1 (FAILS)

Common Fixes

常见问题修复

Invisible Button

不可见按钮

tsx

// PROBLEM: No visible boundary
<button className="text-gray-500">Click</button>

// FIX: Add background OR border
<button className="bg-gray-100 text-gray-900 px-4 py-3 rounded-lg">
  Click
</button>
// OR
<button className="border border-gray-300 text-gray-700 px-4 py-3 rounded-lg">
  Click
</button>

tsx

// 问题：无可见边界
<button className="text-gray-500">Click</button>

// 修复：添加背景或边框
<button className="bg-gray-100 text-gray-900 px-4 py-3 rounded-lg">
  Click
</button>
// 或者
<button className="border border-gray-300 text-gray-700 px-4 py-3 rounded-lg">
  Click
</button>

Low Contrast Text

低对比度文本

tsx

// PROBLEM: Light gray on white
<p className="text-gray-400">Secondary text</p>

// FIX: Use darker gray
<p className="text-gray-600">Secondary text</p>

tsx

// 问题：浅灰色在白色背景上
<p className="text-gray-400">Secondary text</p>

// 修复：使用深灰色
<p className="text-gray-600">Secondary text</p>

Missing Focus State

缺失焦点状态

tsx

// PROBLEM: Focus removed without replacement
<button className="outline-none">Submit</button>

// FIX: Add visible focus ring
<button className="outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2">
  Submit
</button>

tsx

// 问题：移除焦点但未替代
<button className="outline-none">Submit</button>

// 修复：添加可见焦点环
<button className="outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2">
  Submit
</button>

Small Touch Target

过小的触摸目标

tsx

// PROBLEM: Too small for fingers
<button className="p-1 text-sm">×</button>

// FIX: Minimum 44px
<button className="w-11 h-11 flex items-center justify-center">×</button>

tsx

// 问题：对于手指来说太小
<button className="p-1 text-sm">×</button>

// 修复：最小44px
<button className="w-11 h-11 flex items-center justify-center">×</button>

Dark Mode Broken

暗黑模式失效

tsx

// PROBLEM: Same colors in both modes
<p className="text-gray-400">Text</p>

// FIX: Adjust for dark mode
<p className="text-gray-600 dark:text-gray-300">Text</p>

tsx

// 问题：两种模式下颜色相同
<p className="text-gray-400">Text</p>

// 修复：针对暗黑模式调整
<p className="text-gray-600 dark:text-gray-300">Text</p>

Automated Checks (Optional)

自动化检查（可选）

ESLint Plugin

ESLint插件

bash

npm install -D eslint-plugin-jsx-a11y

json

// .eslintrc
{
  "extends": ["plugin:jsx-a11y/recommended"]
}

bash

npm install -D eslint-plugin-jsx-a11y

json

// .eslintrc
{
  "extends": ["plugin:jsx-a11y/recommended"]
}

Playwright Quick Test

Playwright快速测试

typescript

// e2e/accessibility.spec.ts
import { test, expect } from '@playwright/test';
import AxeBuilder from '@axe-core/playwright';

test('no accessibility violations', async ({ page }) => {
  await page.goto('/');
  const results = await new AxeBuilder({ page }).analyze();
  expect(results.violations).toEqual([]);
});

typescript

// e2e/accessibility.spec.ts
import { test, expect } from '@playwright/test';
import AxeBuilder from '@axe-core/playwright';

test('no accessibility violations', async ({ page }) => {
  await page.goto('/');
  const results = await new AxeBuilder({ page }).analyze();
  expect(results.violations).toEqual([]);
});

When to Use Full Testing

何时使用完整测试

Add comprehensive visual testing (Playwright screenshots, Storybook) when:

Building a component library
Multiple developers on UI
Frequent UI changes
Design system enforcement needed

For solo projects or MVPs, the checklist above is sufficient.

在以下场景中添加全面的视觉测试（Playwright截图、Storybook）：

构建组件库时
多名开发者协作开发UI时
UI频繁变更时
需要强制执行设计系统时

对于个人项目或MVP（最小可行产品），上述检查清单已足够。