Mã màu và độ tương phản: kiểm tra WCAG, trích bảng màu
Kiểm tra độ tương phản WCAG giữa màu chữ và màu nền, và trích palette màu chủ đạo từ ảnh bạn tải lên qua Canvas API.
WCAG Contrast Checker
Palette Extractor
Tải ảnh lên để trích các màu phổ biến nhất, quantize 5-bit qua Canvas API.
Tương phản theo WCAG và bảng màu rút từ ảnh
Công cụ này gồm hai phần
Phần thứ nhất tính tỉ lệ tương phản giữa màu chữ và màu nền theo công thức độ sáng tương đối của WCAG, rồi hiển thị chữ mẫu ở cỡ thường và cỡ lớn kèm kết quả đạt hay trượt ở từng mức. Phần thứ hai rút bảng màu chủ đạo từ ảnh bạn tải lên: ảnh được vẽ vào một canvas thu nhỏ, màu được lượng tử hoá về năm bit mỗi kênh rồi đếm tần suất để lấy ra những màu chiếm nhiều điểm ảnh nhất.
Lúc chốt màu giao diện
Khi chốt màu nút bấm và màu nền trước lúc dựng giao diện, thay vì sửa sau khi đã lập trình xong. Khi một lượt kiểm định khả năng tiếp cận báo chữ xám trên nền trắng không đạt và bạn cần tìm sắc độ vừa đủ đậm. Khi dựng bảng màu cho một thương hiệu mà tất cả những gì bạn có chỉ là tệp ảnh logo hoặc vài ảnh sản phẩm.
Đọc tỉ lệ tương phản
Mức AA yêu cầu từ 4,5 trên 1 cho chữ thường và từ 3 trên 1 cho chữ lớn, trong đó chữ lớn nghĩa là từ 18 point trở lên hoặc từ 14 point nếu in đậm. Mức AAA nâng lên 7 trên 1 và 4,5 trên 1. Chữ trắng đặt trên màu thương hiệu tươi sáng gần như luôn trượt, đó là lý do nhiều bộ nhận diện phải chuẩn bị sẵn một sắc độ đậm hơn dành riêng cho nút bấm và cho chữ.
Giới hạn của phép đo này
Tỉ lệ tương phản chỉ tính cho một cặp màu đặc; nền chuyển sắc hoặc nền là ảnh phải thử ở điểm sáng nhất và điểm tối nhất mà chữ đi qua. Màu rút từ ảnh là màu chiếm diện tích lớn nhất, thường là màu nền hoặc màu bầu trời, chưa chắc là màu nhấn của thương hiệu. Ảnh có kênh trong suốt được bỏ qua những điểm ảnh gần như trong suốt, nên logo nền rỗng cho bảng màu sạch hơn ảnh chụp.
Ảnh của bạn không rời trình duyệt. Ảnh bạn chọn được đọc bằng canvas ngay trong trình duyệt và không hề được tải lên máy chủ nào, kể cả máy chủ ALODEV.
Câu hỏi thường gặp
Tỉ lệ tương phản WCAG mức AA và AAA khác nhau thế nào?
Mức AA là ngưỡng phổ biến nhất, yêu cầu tỉ lệ tương phản từ 4,5 trên 1 cho chữ thường và từ 3 trên 1 cho chữ lớn (từ 18 point trở lên, hoặc từ 14 point nếu in đậm). Mức AAA cao hơn hẳn, yêu cầu 7 trên 1 cho chữ thường và 4,5 trên 1 cho chữ lớn. Phần lớn website doanh nghiệp chỉ cần đạt AA; AAA thường dành cho nội dung phục vụ người khiếm thị nặng hoặc yêu cầu tuân thủ nghiêm ngặt hơn.
Vì sao màu sắc dễ tiếp cận lại quan trọng với một website doanh nghiệp?
Chữ tương phản kém không chỉ gây khó cho người khiếm thị hay người lớn tuổi, mà còn khó đọc với bất kỳ ai đứng dưới nắng, dùng màn hình cũ hoặc màn hình đặt độ sáng thấp. Nút bấm chữ mờ trên nền màu thương hiệu tươi sáng làm giảm tỉ lệ khách bấm vào, tức là ảnh hưởng trực tiếp đến chuyển đổi chứ không chỉ là chuyện thẩm mỹ. Một số thị trường còn có quy định pháp lý về khả năng tiếp cận web mà doanh nghiệp phải tuân thủ.
Palette rút ra từ ảnh hoạt động thế nào, ảnh có bị tải lên máy chủ nào không?
Không. Ảnh bạn chọn chỉ được đọc trực tiếp trong trình duyệt bằng canvas: ảnh được vẽ vào một canvas thu nhỏ, giá trị màu của từng điểm ảnh được lượng tử hoá về năm bit mỗi kênh rồi đếm tần suất xuất hiện để lấy ra những màu chiếm nhiều điểm ảnh nhất. Toàn bộ phép tính này chạy bằng JavaScript ngay trên máy bạn, ảnh không được gửi lên máy chủ ALODEV hay bất kỳ máy chủ nào khác, và không được lưu lại sau khi rời trang.
Chữ lớn và chữ thường có ngưỡng đạt khác nhau, phân biệt bằng gì?
WCAG xem chữ là lớn khi cỡ chữ từ 18 point (khoảng 24px) trở lên với chữ thường, hoặc từ 14 point (khoảng 18.5px) trở lên nếu chữ được in đậm. Chữ lớn được nới ngưỡng tương phản thấp hơn vì mắt người dễ nhận diện hình dạng nét chữ to hơn ngay cả khi độ tương phản kém hơn.
Kết quả kiểm tra không đạt AA thì nên xử lý thế nào?
Cách nhanh nhất là giữ nguyên tông màu nhưng đổi sắc độ: làm màu chữ đậm hơn hoặc màu nền nhạt hơn cho tới khi tỉ lệ tương phản vượt ngưỡng cần đạt. Nhiều bộ nhận diện thương hiệu chuẩn bị sẵn một sắc độ đậm hơn màu thương hiệu gốc dành riêng cho chữ và nút bấm, vì màu thương hiệu tươi sáng đặt chữ trắng lên trên gần như luôn trượt AA.
