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

Foreground Background

The quick brown fox jumps over the lazy dog.Large text and UI components use the lower 3:1 AA threshold.

Chạy hoàn toàn trong trình duyệt của bạn — nội dung bạn dán không được tải lên hay lưu trữ. Số đếm kết quả ẩn danh theo từng lần chạy có thể được dùng cho nghiên cứu tổng hợp; URL, tên miền, IP và mã định danh không bao giờ được bao gồm, và không công bố số liệu thống kê khi có dưới 100 lần chạy.

Phản hồi

Palette audit

Paste CSS variables, token declarations, or a hex list. The matrix checks every color as text against every other color as a background.

Check

Giới thiệu công cụ

Tính tỷ lệ tương phản giữa các cặp màu hoặc kiểm tra màu đã kết xuất trên một trang công khai theo ngưỡng WCAG.

Tính năng

Kiểm tra AA và AAA cho văn bản thường và văn bản lớn.
Tạo ma trận mọi cặp màu trong bảng màu đã dán.
Đọc biến CSS, mã thiết kế và danh sách màu.
Chế độ URL dùng màu đã tính sau khi kết xuất trang.

Cách hoạt động

Công cụ chuyển màu sang độ chói tương đối, tính tỷ lệ giữa màu sáng và tối, rồi áp dụng ngưỡng WCAG; chế độ URL dùng trình duyệt không giao diện để đọc màu chữ và nền đã tính.

Giới hạn

Đạt tương phản không chứng minh toàn bộ giao diện có khả năng tiếp cận.
Chế độ dán không quan sát nền hoặc trạng thái thực tế của phần tử.
Chế độ URL phụ thuộc ngân sách kết xuất và bề mặt công khai.

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

Tôi cần tỷ lệ tương phản bao nhiêu?

WCAG AA yêu cầu 4.5:1 cho văn bản thường và 3:1 cho văn bản lớn cùng các thành phần giao diện không phải văn bản. AAA yêu cầu 7:1 cho văn bản thường và 4.5:1 cho văn bản lớn.

Điều này có chứng minh trang của tôi có khả năng tiếp cận không?

Không. Công cụ kiểm tra các cặp màu, không kiểm tra kiểu chữ, trạng thái lấy nét, hình ảnh chứa văn bản hoặc nền được kết xuất thật trong chế độ dán. Hãy xem đây là lượt kiểm tra trong lúc thiết kế và cũng kiểm thử giao diện hoàn thiện.

Bảng màu của tôi được gửi đi đâu?

Ở chế độ dán, bảng màu ở lại trong trình duyệt; bạn có thể dán thuộc tính tùy chỉnh CSS, token tên/giá trị kiểu Tailwind hoặc danh sách mã màu thập lục phân đơn giản. Chỉ chế độ URL gửi dữ liệu đến máy chủ, và dữ liệu đó là địa chỉ trang công khai bạn nhập chứ không phải bảng màu.

Chế độ URL khác việc dán màu như thế nào?

Màu được dán cho kết quả tính toán chính xác trên cặp bạn nhập. Chế độ URL tải trang thật trong trình duyệt không giao diện có định mức và đọc màu cùng nền thực tế đã tính của từng phần tử sau khi giải quyết thứ tự ưu tiên CSS, kế thừa, độ mờ và giá trị mặc định của trình duyệt; đây là cách duy nhất để đưa ra kết luận tương phản thật cho trang đang hoạt động vì phép đoán màu từ HTML tĩnh có thể sai.

Các vấn đề thường gặp và cách khắc phục

Lỗi Cặp màu không đạt WCAG AA cho văn bản thông thường Cách khắc phục: Thay đổi màu tiền cảnh hoặc nền cho đến khi văn bản thông thường đạt độ tương phản ít nhất 4.5:1, rồi kiểm tra lại các trạng thái di chuột, lấy nét, vô hiệu hóa và đã truy cập.
Lỗi Cặp màu không đạt WCAG AA cho văn bản lớn Cách khắc phục: Thay đổi cặp màu cho đến khi văn bản thường ít nhất 24px hoặc văn bản đậm 18.66px đạt độ tương phản 3:1.
Cảnh báo Cặp màu không đạt WCAG AAA cho văn bản thông thường Cách khắc phục: Điều chỉnh cặp màu cho đến khi văn bản thông thường đạt độ tương phản 7:1 khi AAA là yêu cầu của dự án.
Cảnh báo Cặp màu không đạt WCAG AAA cho văn bản lớn Cách khắc phục: Điều chỉnh cặp màu cho đến khi văn bản lớn đủ điều kiện đạt độ tương phản 4.5:1 khi AAA là bắt buộc.
Cảnh báo Cặp màu không đạt hướng dẫn tương phản phi văn bản Cách khắc phục: Tăng độ tương phản của biểu tượng thiết yếu, chỉ báo lấy nét, đường biên điều khiển và đối tượng đồ họa lên ít nhất 3:1 so với các màu liền kề.