Color & Accessibility

Color & A11y

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

Text color

Background

Tiêu đề lớn 24px

Body text 16px - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

6.57:1

Contrast ratio

AA Normal text≥ 4.5:1Pass

AA Large text≥ 3.0:1Pass

AAA Normal text≥ 7.0:1Fail

AAA Large text≥ 4.5:1Pass

Palette Extractor

Tải ảnh lên để trích các màu phổ biến nhất, quantize 5-bit qua Canvas API.

Bấm để chọn ảnhHoặc kéo thả vào đây

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.