Trình Tạo Bảng Màu Tiếp Cận
Tạo bảng màu tuân thủ chuẩn WCAG với tỷ lệ tương phản đảm bảo, phù hợp cho thiết kế giao diện dễ tiếp cận ở cả chế độ sáng và tối.
Ví dụ sử dụng
Tạo bảng màu tuân thủ WCAG 2.1 AA cho dashboard SaaS của tôi với màu xanh chính, màu ngữ nghĩa và hỗ trợ dark mode.
You are an expert accessibility-focused color palette generator. Your task is to create WCAG-compliant color palettes that guarantee proper contrast ratios for accessible UI design.
## Core Capabilities
1. **Semantic Color Roles Generation:**
- Primary (brand color)
- Secondary (complementary accent)
- Success/Positive (green family)
- Warning/Caution (amber/orange family)
- Error/Danger (red family)
- Info (blue family)
- Neutral/Gray scale (50-950 in 9 steps)
2. **Dual Theme Support:**
- Generate light mode values
- Generate dark mode values
- Ensure proper contrast in both themes
- Provide semantic role-based tokens
3. **Accessibility Compliance:**
- WCAG 2.1 AA: 4.5:1 for normal text, 3:1 for large text (18pt+)
- WCAG 2.1 AAA: 7:1 for normal text, 4.5:1 for large text
- APCA contrast scores for modern accessibility
- Colorblind-safe palette verification (protanopia, deuteranopia, tritanopia)
Always prioritize accessibility over aesthetic preferences. If the user's input color cannot meet WCAG standards in certain contexts, clearly explain the issue and provide accessible alternatives.
Nâng cấp kỹ năng của bạn
Những Pro skill này cực hợp với cái bạn vừa copy
Chuyên gia ReactJS, NextJS và TypeScript với tối ưu hiệu suất, phân tích bundle và best practice frontend hiện đại.
Xây dựng component UI dễ tiếp cận với shadcn/ui. Component đẹp được xây trên Radix UI và style bằng Tailwind CSS.
Tạo hướng dẫn giọng điệu thương hiệu toàn diện theo khung chuẩn, bao gồm đặc tính tính cách, biến thể tone, từ vựng tiêu chuẩn và hướng dẫn áp dụng …
Cách sử dụng Skill này
Sao chép skill bằng nút ở trên
Dán vào trợ lý AI của bạn (Claude, ChatGPT, v.v.)
Điền thông tin bên dưới (tùy chọn) và sao chép để thêm vào prompt
Gửi và bắt đầu trò chuyện với AI của bạn
Tùy chỉnh gợi ý
| Mô tả | Mặc định | Giá trị của bạn |
|---|---|---|
| Màu chính của tôi | #3B82F6 | |
| Cấp độ WCAG | AA | |
| Phong cách ưa thích | sống động | |
| An toàn cho mù màu | true |
Tổng Quan
Trình Tạo Bảng Màu Tiếp Cận tạo ra các hệ thống màu sẵn sàng production, tuân thủ WCAG cho các ứng dụng web hiện đại. Nó đảm bảo màu UI của bạn đáp ứng tiêu chuẩn tiếp cận trong cả theme sáng và tối đồng thời duy trì chất lượng thẩm mỹ.
Bạn Sẽ Nhận Được
Skill này tạo ra:
- Thang màu hoàn chỉnh (50-950) cho tất cả vai trò ngữ nghĩa
- Hỗ trợ dual theme với biến thể dark mode tự động
- Tính toán tỷ lệ tương phản đối với nhiều nền
- Đề xuất màu chữ cho mỗi giá trị màu
- Nhiều định dạng xuất (CSS, Tailwind, SCSS, JSON)
- Báo cáo tiếp cận với chi tiết tuân thủ WCAG 2.1
- Xác minh an toàn mù màu cho thiết kế bao trùm
Trường Hợp Sử Dụng
- Tạo hệ thống thiết kế mới từ đầu
- Kiểm tra bảng màu hiện có về tiếp cận
- Chuyển đổi màu thương hiệu thành bảng màu UI tiếp cận
- Tạo bảng màu tương thích dark mode
- Xây dựng thư viện component với tương phản đảm bảo
- Đáp ứng yêu cầu tuân thủ WCAG 2.1 AA/AAA
Tính Năng Chính
1. Tạo Màu Thông Minh
Nhập một màu thương hiệu duy nhất và nhận hệ thống màu ngữ nghĩa hoàn chỉnh với thang primary, secondary, success, warning, error, info và neutral.
2. Tiếp Cận Đảm Bảo
Mỗi màu bao gồm tỷ lệ tương phản được tính toán và trạng thái tuân thủ WCAG. Các kết hợp thất bại được đánh dấu với các lựa chọn thay thế tiếp cận.
3. Bảng Màu An Toàn Mù Màu
Xác minh tùy chọn đảm bảo màu ngữ nghĩa của bạn vẫn phân biệt được cho người dùng bị mù đỏ, mù xanh lá và mù xanh dương.
4. Xuất Sẵn Sàng Production
Tạo code ở định dạng ưa thích của bạn: CSS custom properties, Tailwind config, biến SCSS, hoặc JSON design tokens.
Tiêu Chuẩn Tiếp Cận
Skill này triển khai:
- WCAG 2.1 Cấp AA: văn bản thường 4.5:1, văn bản lớn/UI component 3:1
- WCAG 2.1 Cấp AAA: văn bản thường 7:1, văn bản lớn 4.5:1
- APCA: Thuật toán tương phản tri giác hiện đại
- Mô phỏng mù màu: Test mù đỏ, mù xanh lá, mù xanh dương
Bắt đầu tạo hệ thống màu tiếp cận, đẹp mắt hoạt động cho tất cả mọi người.