Phân tích WCAG
Phân tích toàn bộ bảng màu về mức độ tuân thủ khả năng tiếp cận WCAG cấp AA và AAA. Xem tỷ lệ tương phản của từng cặp HEX và sửa các cặp không đạt dễ dàng.
Bảng màu cần phân tích
Ma trận tương phản
Primary | Secondary | Background | Text | Muted | |
|---|---|---|---|---|---|
Primary | — | 1.15 Fail | 3.68 AA-L | 3.98 AA-L | 1.29 Fail |
Secondary | 1.15 Fail | — | 4.23 AA-L | 3.45 AA-L | 1.12 Fail |
Background | 3.68 AA-L | 4.23 AA-L | — | 14.63 AAA | 4.76 AA |
Text | 3.98 AA-L | 3.45 AA-L | 14.63 AAA | — | 3.07 AA-L |
Muted | 1.29 Fail | 1.12 Fail | 4.76 AA | 3.07 AA-L | — |
Chú giải WCAG 2.1
Mức AAA
Tỉ lệ ≥ 7:1 - Xuất sắc
Mức AA
Tỉ lệ ≥ 4,5:1 - Tiêu chuẩn
AA lớn
Tỉ lệ ≥ 3:1 - Chữ lớn
Không đạt
Tỉ lệ < 3:1 - Không đạt chuẩn
Phân tích toàn bộ bảng màu về mức độ tuân thủ khả năng tiếp cận WCAG cấp AA và AAA. Xem tỷ lệ tương phản của từng cặp HEX và sửa các cặp không đạt dễ dàng.
Phân tích WCAG chỉ hiển thị các điều khiển và kết quả phù hợp với chức năng của nó. Các tùy chọn có thể thay đổi theo công cụ và dữ liệu đầu vào.
Định dạng được hỗ trợ
Cách hoạt động
Bước 1
Mở Phân tích WCAG và chuẩn bị dữ liệu mà giao diện yêu cầu
Bước 2
Điều chỉnh các điều khiển đang hiển thị theo kết quả cần có
Bước 3
Kiểm tra kết quả trước khi sao chép, xuất hoặc sử dụng lại
Các lỗi thường gặp cần tránh
- Không giả định một định dạng hay tùy chọn được hỗ trợ nếu nó không xuất hiện trên giao diện.
- Kiểm tra giá trị trước khi dùng trong nhận diện thương hiệu, giao diện hoặc tệp sản xuất.
- Nếu dùng cho văn bản hoặc UI, hãy kiểm tra cả độ tương phản.
Mẹo chuyên gia
- Giữ giá trị nguồn cùng kết quả khi cần so sánh các biến thể.
- Dùng các định dạng thực sự được công cụ hiển thị thay vì tự ước lượng chuyển đổi.
- Trên điện thoại và máy tính bảng, cho phép văn bản và điều khiển xuống dòng.
Xử lý dữ liệu
Cách xử lý dữ liệu phụ thuộc vào chức năng được dùng. Phần đồng ý, phân tích và tài khoản của trang web tách biệt với thao tác màu.
Công cụ này làm gì
Phân tích toàn bộ bảng màu về mức độ tuân thủ khả năng tiếp cận WCAG cấp AA và AAA. Xem tỷ lệ tương phản của từng cặp HEX và sửa các cặp không đạt dễ dàng. Phân tích WCAG tập trung vào đúng nhiệm vụ này và không giả định những tính năng không có trên giao diện. Dùng các điều khiển đang hiển thị để có kết quả cần thiết, sau đó kiểm tra giá trị trước khi chuyển sang công cụ khác, stylesheet, tệp thiết kế hoặc tài liệu.
Chuẩn bị dữ liệu đầu vào phù hợp
Bắt đầu với dữ liệu mà Phân tích WCAG yêu cầu: màu, giá trị, hình ảnh hoặc thiết lập tùy theo màn hình. Các định dạng được nêu trên trang này là Palette, HEX, CSS Variables, JSON. Nếu một định dạng hay tùy chọn không xuất hiện trên giao diện, đừng coi nó là phần được hỗ trợ bởi chức năng cụ thể này.
Đọc và kiểm tra kết quả
Đọc kết quả trong bối cảnh thao tác bạn vừa thực hiện. So sánh với giá trị nguồn và xem lại các thiết lập ảnh hưởng đến phép tính. Với công việc hình ảnh quan trọng, hãy kiểm tra kết quả ngay trong giao diện thực tế nơi nó sẽ được sử dụng thay vì chỉ dựa vào mã.
Sử dụng trên điện thoại và máy tính bảng
Phân tích WCAG dùng bố cục responsive của trang. Tiêu đề, mô tả, breadcrumbs và điều khiển có thể xuống dòng trên màn hình hẹp để bản dịch dài không bị cắt. Tuy vậy, hãy kiểm tra kết quả cuối cùng trên thiết bị và trong bối cảnh mà bạn thực sự sẽ sử dụng.
Dùng lại kết quả trong dự án
Sau khi kiểm tra, chỉ sử dụng các thao tác mà Phân tích WCAG thực sự cung cấp, như sao chép hoặc xuất khi có. Giữ giá trị nguồn nếu bạn có thể cần tái tạo thiết lập và với màu UI, hãy ghi lại cả vai trò của màu cùng yêu cầu về độ tương phản.
Công cụ liên quan
Hướng dẫn và bài viết bổ trợ
Tìm hiểu cách sử dụng các công cụ của chúng tôi qua các hướng dẫn chi tiết.
wcag-analyzer: hướng dẫn thực hành accessibility
Hướng dẫn bản địa hóa để dùng wcag-analyzer, hiểu thực hành tốt cho accessibility và tránh lỗi phổ biến.
wcag-analyzer: hướng dẫn thực hành accessibility
Hướng dẫn bản địa hóa để dùng wcag-analyzer, hiểu thực hành tốt cho accessibility và tránh lỗi phổ biến.
wcag-analyzer: hướng dẫn thực hành export
Hướng dẫn bản địa hóa để dùng wcag-analyzer, hiểu thực hành tốt cho export và tránh lỗi phổ biến.
Câu hỏi thường gặp
Tìm hiểu cách sử dụng các công cụ của chúng tôi qua các hướng dẫn chi tiết.