Đặt toàn bộ bảng màu của bạn thành một bảng kiểm tra N×N — tỷ lệ WCAG và APCA Lc cho mọi cặp tiền cảnh × nền, dễ dàng quyết định chỉ bằng một cái nhìn.
| fg ↓ / bg → | |||||||
|---|---|---|---|---|---|---|---|
Ag1.0Lc0 | Ag4.2Lc+35 | Ag3.8Lc+31 | Ag5.2Lc+42 | Ag8.4Lc+62 | Ag1.2Lc0 | Ag17.4Lc+104 | |
Ag4.2Lc-33 | Ag1.0Lc0 | Ag1.1Lc0 | Ag1.3Lc0 | Ag2.0Lc+25 | Ag5.0Lc-34 | Ag4.2Lc+67 | |
Ag3.8Lc-29 | Ag1.1Lc0 | Ag1.0Lc0 | Ag1.4Lc+10 | Ag2.2Lc+30 | Ag4.6Lc-30 | Ag4.6Lc+72 | |
Ag5.2Lc-40 | Ag1.3Lc0 | Ag1.4Lc-11 | Ag1.0Lc0 | Ag1.6Lc+18 | Ag6.3Lc-41 | Ag3.3Lc+60 | |
Ag8.4Lc-61 | Ag2.0Lc-27 | Ag2.2Lc-32 | Ag1.6Lc-20 | Ag1.0Lc0 | Ag10.2Lc-62 | Ag2.1Lc+40 |
Hàng = màu chữ (foreground), cột = nền. Mỗi ô hiển thị cặp foreground-on-background thực tế với hai chỉ số khả năng tiếp cận: tỷ lệ WCAG (AA văn bản ≥ 4.5, AA lớn ≥ 3.0) và APCA Lc (75+ cho văn bản thân, 60+ cho văn bản lớn).
Tất cả các màu ứng viên trong một ma trận N×N - khả năng truy cập cho mọi cặp tiền cảnh × nền cùng lúc.
Nhập màu thương hiệu, màu ngữ nghĩa và màu trung tính (lên đến 10). Hàng là tiền cảnh, cột là nền.
Mỗi ô hiển thị tỷ lệ WCAG và APCA Lc. Các dấu chấm sáng lên: văn bản thân cần Lc 75+, văn bản lớn cần 60+.
Ghi lại các cặp nút và cặp văn bản thân vào bản thiết kế của bạn; loại bỏ các tổ hợp không đạt trước khi phát hành.
Ba câu hỏi thường gặp trong kiểm tra toàn bộ ma trận.
Nhập các cặp đạt vào bảng màu ngữ nghĩa và bản thiết kế của bạn.
Xác thực độ tương phản WCAG 2.1 giữa bất kỳ màu tiền cảnh và màu nền nào.
Mô phỏng 8 loại khiếm khuyết thị giác màu để kiểm tra khả năng tiếp cận.
Các tiêu chuẩn thực tế của xuất bản học thuật — Okabe-Ito (được Nature Methods khuyến nghị), loạt Paul Tol, bảng màu tạp chí Nature NPG và viridis đồng nhất về mặt nhận thức. Mỗi mẫu màu đi kèm với điểm độ tương phản APCA, và trình mô phỏng thị giác màu 8 loại bên dưới xác minh trực tiếp từng bảng màu.
Nhập một màu thương hiệu, nhận được primary / secondary / success / warning / danger — xuất dưới dạng cấu hình Tailwind và biến CSS.