Kiểm Tra Độ Tương Phản Màu Theo Chuẩn Tiếp Cận WCAG
Công cụ Kiểm Tra Độ Tương Phản Màu đo tỷ lệ tương phản giữa màu chữ và màu nền, rồi cho bạn biết ngay cặp màu đó có đạt chuẩn WCAG AA và AAA hay không. Công cụ được xây dựng cho nhà thiết kế và lập trình viên muốn tạo giao diện dễ đọc, dễ tiếp cận mà không phải đoán mò.
Nhập màu tiền cảnh (chữ) và màu nền bằng bảng chọn màu hoặc mã HEX, tỷ lệ sẽ cập nhật trực tiếp cùng các nhãn đạt/không đạt cho chữ thường, chữ lớn và thành phần giao diện. Khi một cặp màu chưa đạt, công cụ đề xuất các màu thay thế dễ đọc và mô phỏng cách màu hiển thị với người có khiếm khuyết về thị giác màu sắc.
Cách Kiểm Tra Độ Tương Phản Màu
Nhập màu của bạn
Đặt màu Tiền cảnh (chữ) và màu Nền. Nhấn vào ô màu để mở bảng chọn màu của hệ thống, hoặc gõ trực tiếp mã HEX như #1F2937 hay 1F2937.
Đọc kết quả
Xem tỷ lệ tương phản (từ 1:1 đến 21:1) cập nhật tức thì, kèm nhãn đạt/không đạt cho Chữ thường, Chữ lớn và Thành phần giao diện ở mức AA và AAA, cùng bản xem trước chữ thật trên nền của bạn.
Khắc phục tương phản thấp
Nếu một cặp màu không đạt AA cho chữ thường, mở Gợi ý thay thế và nhấn vào mẫu màu bất kỳ để áp dụng một màu dễ đọc. Dùng Đổi chỗ màu để hoán đổi tiền cảnh và nền rồi thử trường hợp ngược lại.
Kiểm tra cho người mù màu
Mở Công cụ khác để mô phỏng Protanopia, Deuteranopia và Tritanopia, hoặc chọn một Mẫu nhanh để so sánh các cặp màu phổ biến chỉ với một cú nhấn.
Tính Năng
Tính tỷ lệ tương phản theo thời gian thực
Tỷ lệ tương phản được tính lại ngay khi bạn đổi màu, nên bạn nhận phản hồi đạt hay không đạt tức thì trong lúc thiết kế.
Kiểm tra đầy đủ tiêu chuẩn WCAG
Kiểm tra cùng lúc Chữ thường (AA 4.5:1, AAA 7:1), Chữ lớn (AA 3:1, AAA 4.5:1) và Thành phần giao diện (AA 3:1).
Gợi ý màu thay thế thông minh
Khi một cặp màu không đạt AA, nhận tối đa bốn màu thay thế dễ đọc, hiển thị màu đã chỉnh, tỷ lệ của nó và cho biết đã đổi màu chữ hay màu nền. Nhấn vào một màu để áp dụng.
Xem trước trực tiếp
Xem màu của bạn trên tiêu đề mẫu, chữ nội dung, chữ chú thích nhỏ và một nút có viền trước khi quyết định dùng.
Mô phỏng mù màu
Xem trước cặp màu của bạn hiển thị thế nào với Protanopia, Deuteranopia hoặc Tritanopia để chắc chắn nó phù hợp với mọi người.
Mẫu nhanh
Nạp các cặp màu phổ biến như đen trên trắng hay trắng trên đen chỉ với một cú nhấn để bắt đầu từ một mốc quen thuộc.
Đổi chỗ màu
Hoán đổi tức thì tiền cảnh và nền để thử trường hợp tương phản ngược lại.
Sao chép vào bộ nhớ tạm
Sao chép giá trị màu bất kỳ chỉ với một cú nhấn để dán thẳng vào công cụ thiết kế hay mã nguồn của bạn.
Câu Hỏi Thường Gặp
Tỷ lệ tương phản màu bao nhiêu là tốt?
Với chữ thường, hãy nhắm tới ít nhất 4.5:1 (WCAG AA) hoặc 7:1 (AAA) để khả năng tiếp cận tốt hơn. Chữ lớn — từ 18px trở lên, hoặc 14px in đậm — chỉ cần 3:1 là đạt AA.
Tỷ lệ tương phản bao nhiêu thì đạt chuẩn WCAG AA?
WCAG AA yêu cầu 4.5:1 cho chữ thường và 3:1 cho chữ lớn. Mức tối thiểu 3:1 này cũng áp dụng cho thành phần giao diện như biểu tượng, đường viền và các phần tử tương tác.
Tỷ lệ tương phản được tính thế nào?
Công cụ dùng công thức chính thức của WCAG. Nó tính độ sáng tương đối của mỗi màu, rồi chia giá trị màu sáng hơn cộng 0.05 cho giá trị màu tối hơn cộng 0.05, cho ra tỷ lệ trong khoảng từ 1:1 đến 21:1. Kết quả trùng khớp với các công cụ tiếp cận khác và công cụ dành cho lập trình viên của trình duyệt.
AA và AAA khác nhau thế nào?
AA là mức tối thiểu mà hầu hết website hướng tới và được tham chiếu rộng rãi cho việc tuân thủ kiểu ADA. AAA là mức nghiêm ngặt hơn, cải thiện khả năng đọc thêm nữa nhưng có thể khó đạt với một số bảng màu. Phần lớn các nhóm nhắm tới AA và cố đạt AAA cho phần chữ nội dung khi có thể.
Vì sao chữ tối trên nền trắng vẫn không đạt?
Chữ xám nhạt (khoảng #999999 hoặc nhạt hơn) trên nền trắng thường tụt xuống dưới 4.5:1. Một màu có thể trông "đủ tối" với bạn nhưng vẫn không đạt tỷ lệ, và đó chính là lý do cần một phép kiểm tra bằng con số.
Làm sao khắc phục tương phản thấp?
Làm chữ tối hơn hoặc nền sáng hơn cho đến khi tỷ lệ vượt ngưỡng. Bảng Gợi ý thay thế làm việc này thay bạn, tính ra các màu dễ đọc đạt mức AA và cho phép áp dụng chỉ với một cú nhấn.
Công cụ chấp nhận định dạng màu nào?
Nhập màu dưới dạng mã HEX (có hoặc không có dấu # phía trước), hoặc dùng bảng chọn màu của hệ thống. Để kiểm tra một giá trị RGB hay HSL, hãy chuyển nó sang HEX trước bằng công cụ chuyển đổi màu bất kỳ.
Mô phỏng mù màu dùng để làm gì?
Khoảng 8% nam giới và 0.5% nữ giới có một dạng khiếm khuyết về thị giác màu sắc. Phần mô phỏng cho thấy màu của bạn hiển thị thế nào với Protanopia, Deuteranopia hoặc Tritanopia, giúp bạn xác nhận thiết kế vẫn đọc rõ với những người dùng đó.
Chưa có bình luận nào. Hãy là người đầu tiên!