Trình kiểm tra độ tương phản màu

Trình kiểm tra độ tương phản màu là gì?

Trình kiểm tra độ tương phản màu là công cụ trực tuyến miễn phí kiểm tra tương phản WCAG và APCA dành cho nhà thiết kế, lập trình viên và người kiểm thử khả năng tiếp cận. Nó nhận màu ở dạng HEX (#rgb, #rrggbb và #rrggbbaa 8 chữ số có alpha), rgb()/rgba() và hsl()/hsla(), chồng tiền cảnh mờ lên nền trước khi đo, và báo cả tỷ lệ WCAG 2.1 (1:1 đến 21:1) lẫn điểm tương phản độ sáng APCA Lc. Nó đánh dấu WCAG 2.1 Cấp AA (thường 4.5:1, lớn 3:1) và AAA (thường 7:1, lớn 4.5:1), thêm nhãn 3:1 cho thành phần giao diện và đồ họa phi văn bản, và có thể gợi ý màu tiền cảnh đạt gần nhất — chỉ điều chỉnh độ sáng của nó cho đến khi đạt AA hoặc AAA — mà bạn áp dụng bằng một cú nhấp.

Cách sử dụng Trình kiểm tra độ tương phản màu

1. Nhập màu tiền cảnh (văn bản) ở dạng HEX, rgb() hoặc hsl() — chấp nhận HEX 8 chữ số hoặc rgba có alpha — hoặc nhấp vào bộ chọn màu để chọn trực quan.
2. Nhập màu nền theo cách tương tự; tiền cảnh bán trong suốt được chồng lên nền (và nền được chồng lên trắng) trước khi đo tương phản.
3. Dùng nút Hoán đổi để đảo tiền cảnh và nền bất cứ lúc nào.
4. Đọc tỷ lệ tương phản WCAG 2.1 và điểm APCA Lc hiển thị ngay bên cạnh.
5. Kiểm tra các nhãn AA và AAA cho văn bản thường và lớn, cùng nhãn 3:1 cho thành phần giao diện và đồ họa.
6. Nếu một cặp không đạt, xem màu AA hoặc AAA đạt gần nhất và nhấp Áp dụng để cập nhật tiền cảnh.

Ví dụ

Tiền cảnh #595959, Nền #ffffff

Tỷ lệ 7.00:1 với APCA Lc cao — đạt AA và AAA cho văn bản thường và lớn

Tiền cảnh #00000080 (đen 50%) trên #ffffff

Chồng thành màu xám đặc trước, sau đó tính tỷ lệ WCAG và APCA Lc

Tiền cảnh #999999 trên #ffffff — 2.85:1, không đạt AA

Mở màu AA gần nhất và nhấp Áp dụng để đạt 4.5:1 mà vẫn giữ nguyên sắc màu

Câu hỏi thường gặp

WCAG yêu cầu tỷ lệ tương phản bao nhiêu?

WCAG 2.1 Cấp AA cần tối thiểu 4.5:1 cho văn bản thường và 3:1 cho văn bản lớn; Cấp AAA cần 7:1 và 4.5:1. Thành phần giao diện và đối tượng đồ họa phi văn bản (SC 1.4.11) cần 3:1. Trình kiểm tra này hiển thị nhãn đạt/không đạt cho từng ngưỡng đó.

Điểm APCA Lc là gì?

APCA (Thuật toán Tương phản Cảm nhận Dễ tiếp cận) là phương pháp tương phản được đề xuất cho WCAG 3. Nó cho một giá trị tương phản độ sáng (Lc) khoảng 0 đến 108, cao hơn nghĩa là tương phản mạnh hơn, và có tính đến cực tính (tối trên sáng so với sáng trên tối). Nó hiển thị bên cạnh tỷ lệ WCAG 2.1 và dùng các mức hướng dẫn riêng thay vì một đạt/không đạt duy nhất.

Gợi ý màu đạt gần nhất hoạt động thế nào?

Nó giữ nguyên sắc màu và độ bão hòa của tiền cảnh, chỉ điều chỉnh độ sáng sáng hơn hoặc tối hơn cho đến khi tương phản với nền đạt AA (4.5:1) hoặc AAA (7:1), rồi bạn có thể áp dụng bằng một cú nhấp. Nếu nền có tông trung tính và không thể đạt mục tiêu, nó hiển thị màu khả dĩ gần nhất.

Tôi có thể nhập những định dạng màu nào?

HEX (#rgb, #rrggbb, cùng #rgba và #rrggbbaa 8 chữ số có alpha), rgb()/rgba() và hsl()/hsla(), với bộ chọn màu gốc cho mỗi trường. Tiền cảnh bán trong suốt được chồng lên nền — vốn được làm phẳng lên trắng trước — trước khi tính tỷ lệ. Không hỗ trợ màu có tên.

Màu của tôi có được gửi đến máy chủ không?

Không. Toàn bộ việc phân tích, chồng màu và tính độ chói, tỷ lệ cùng APCA đều chạy hoàn toàn trong trình duyệt của bạn bằng JavaScript — không màu nào được tải lên và không gì được gửi đến máy chủ, nên nó hoạt động riêng tư và thậm chí ngoại tuyến sau khi trang đã tải.