Contrast Checker tính toán tỷ lệ tương phản WCAG 2.1 giữa hai màu và chấm điểm theo các ngưỡng AA/AAA cho cả văn bản thường và văn bản lớn. Bản xem trước trực tiếp hiển thị văn bản được render bằng các màu đã chọn, và nút "pick page background" lấy mẫu màu nền của trang hiện tại.
Khả năng tiếp cận (accessibility) ngày càng được yêu cầu chặt chẽ — tuân thủ WCAG là yêu cầu pháp lý tại nhiều khu vực pháp lý, và ngay cả khi không bắt buộc, độ tương phản kém vẫn khiến người dùng rời đi. Contrast Checker cho bạn biết ngay lập tức liệu hai màu bất kỳ có đạt chuẩn WCAG hay không. Chọn màu chữ (foreground) và màu nền (background) qua bảng chọn màu hoặc dán giá trị hex; công cụ tính tỷ lệ tương phản bằng công thức độ chói (luminance) chính thức của WCAG và chấm điểm theo bốn ngưỡng: AA normal (≥4.5:1), AA large (≥3:1), AAA normal (≥7:1), và AAA large (≥4.5:1). Mỗi ngưỡng hiển thị nhãn Pass/Fail rõ ràng. Bản xem trước trực tiếp render văn bản lớn và văn bản thường bằng các màu đã chọn để bạn thấy tác động thị giác thực tế. Một nút tiện lợi lấy mẫu màu nền body của trang hiện tại — hữu ích khi kiểm tra xem một tổ hợp màu trên trang web thật có đạt chuẩn hay không. Mọi thứ chạy hoàn toàn cục bộ trong trình duyệt của bạn, không có gì được tải lên.
Sử dụng công thức độ chói chính thức của WCAG để tính tỷ lệ tương phản. Kết quả chính xác và khớp với mọi công cụ kiểm tra a11y chuẩn.
Đạt/không đạt cho AA normal (≥4.5:1), AA large (≥3:1), AAA normal (≥7:1), AAA large (≥4.5:1) — tất cả hiển thị dưới dạng lưới.
Hiển thị văn bản lớn và văn bản thường thực tế bằng các màu bạn đã chọn để thấy tác động thị giác song song với tỷ lệ số.
Chỉ một cú nhấp để lấy mẫu màu nền body đã tính toán của trang hiện tại — hữu ích khi kiểm tra các tổ hợp màu thực tế.
Gõ giá trị hex hoặc dùng bảng chọn màu gốc của trình duyệt. Giá trị đồng bộ hai chiều khi bạn chỉnh sửa một trong hai.
Hoán đổi chỉ với một cú nhấp giữa màu chữ và màu nền — hữu ích khi kiểm tra theme đảo ngược hoặc trạng thái hover.
Trước khi hoàn thiện bảng màu, kiểm tra từng màu chữ trên nền của nó để đảm bảo tuân thủ WCAG AA — tránh phải làm lại sau này.
Dùng "pick page background" trên một trang web thực tế, sau đó dán màu chữ thực tế — tìm ra các vi phạm a11y trong vài phút mà không cần mở Lighthouse.
Khi một thương hiệu chọn màu có thể không đạt chuẩn a11y, dùng công cụ kiểm tra để tìm biến thể gần nhất đạt chuẩn (sắc thái tối/sáng hơn).
Xác minh rằng màu của trạng thái hover/active/disabled vẫn đạt yêu cầu tương phản, không chỉ trạng thái mặc định.
Giao diện tối thường không đạt tương phản với chữ xám trên nền xám. Hãy kiểm tra các sắc xám tối nhất trên nền tối nhất để phát hiện những trường hợp này.
Nhấp vào biểu tượng Contrast trên dock của DevSuite Pro. Một panel mở ra với các trường màu chữ và màu nền.
Dùng bảng chọn màu hoặc dán giá trị hex cho mỗi màu. Bản xem trước trực tiếp cập nhật ngay khi bạn thay đổi màu.
Con số lớn (ví dụ 4.8:1) là tỷ lệ tương phản. Càng cao càng tốt. 3 là mức tối thiểu; 4.5 là mục tiêu cho văn bản thường.
Nhãn Pass/Fail cho AA và AAA, cỡ chữ thường và lớn, cho biết ngay tổ hợp màu của bạn đạt chuẩn nào.
Nếu không đạt, hãy chỉnh sửa màu. Làm tối màu chữ hoặc làm sáng màu nền (hoặc ngược lại) cho đến khi mức mục tiêu hiển thị Pass.
Cài đặt DevSuite Pro miễn phí và mở khóa hơn 64 công cụ dành cho nhà phát triển cho trình duyệt của bạn.
