Bài viết
Trích một bảng màu dễ tiếp cận từ một hình ảnh
Một bức ảnh hoặc tài sản thương hiệu thường chứa hạt giống của cả một hệ màu. Trích hạt giống đó, định hình nó thành bảng màu dùng được, rồi xác minh nó theo các chuẩn tiếp cận đòi hỏi ba bước riêng biệt. Bài viết này nói về từng bước theo thứ tự: cách trích bảng màu hoạt động bên dưới, cách chọn và điều chỉnh màu cho dùng thực tế, cách kiểm tra độ tương phản theo các ngưỡng WCAG, và cách bắt các cặp màu trùng lẫn đối với người dùng mù màu.
Cách trích một bảng màu: lấy mẫu điểm ảnh và lượng tử hóa màu
Mỗi ảnh số là một lưới điểm ảnh, mỗi điểm mang một giá trị màu trong một không gian như RGB. Bộ trích bảng màu không xét từng điểm ảnh riêng lẻ: một ảnh 2 megapixel chứa 2 triệu điểm dữ liệu, vốn sẽ xử lý chậm và sẽ trả về hàng nghìn sắc thái hơi khác nhau thay vì một tập hữu ích. Thay vào đó, công cụ lấy mẫu lưới điểm ảnh ở một khoảng đều, thu thập một tập con đại diện. Tập con đó sau đó được đưa vào một thuật toán lượng tử hóa màu. Cách phổ biến nhất nhóm các màu giống nhau lại bằng một phương pháp phân cụm, đôi khi gọi là phân vùng kiểu median-cut hoặc k-means. Thuật toán đặt mỗi điểm ảnh đã lấy mẫu vào một trong số cố định các nhóm dựa trên độ giống màu, rồi tính màu trung bình của mỗi nhóm. Kết quả là một danh sách nhỏ, thường 4 đến 16 màu, cùng nhau chiếm các tông màu chủ đạo trong ảnh. Các màu chỉ xuất hiện ở những vùng nhỏ tách biệt có thể bị bỏ sót, đó là hành vi mong đợi chứ không phải lỗi.
Từ màu chủ đạo thô đến bảng màu dùng được
Đầu ra thô của một bộ trích bảng màu là một danh sách màu xếp theo tần suất, nhưng riêng tần suất không tạo nên một bảng màu. Một bức ảnh rừng sẽ trả về vài sắc xanh lá quá giống nhau để dùng trong UI như những điểm nhấn riêng biệt. Công việc thực tế là chọn lọc và điều chỉnh. Bắt đầu bằng việc xác định một màu làm màu chính: màu đặc trưng nhất và ít trung tính nhất. Từ các màu còn lại, tìm tối đa hai màu tương phản với màu chính và với nhau. Chúng trở thành điểm nhấn của bạn. Mọi thứ khác, gồm các tông giảm bão hòa mà bộ trích thường trả về từ bóng tối và trung tông, có thể dùng làm màu trung tính cho nền và viền. Khi đã có cấu trúc thô này, bạn gần như chắc chắn sẽ cần điều chỉnh từng giá trị riêng. Công cụ color-converter cho bạn xem mỗi màu ở dạng hex, RGB và HSL. HSL đặc biệt hữu ích ở đây: bạn có thể giữ tông màu cố định và dịch chuyển độ sáng hoặc độ bão hòa để tạo một họ màu chặt hơn hoặc rộng hơn mà không rời khỏi cùng họ màu.
Kiểm tra tương phản: ngưỡng WCAG cho chữ dễ đọc
Một khi bạn có các màu ứng viên cho chữ và nền, bạn cần kiểm tra xem tổ hợp đó có dễ đọc không. Web Content Accessibility Guidelines (WCAG) định nghĩa một tỷ lệ tương phản cho mục đích này. Tỷ lệ so sánh độ chói tương đối của hai màu: giá trị 1:1 nghĩa là không có tương phản nào (cùng màu trên cùng màu), và 21:1 là tối đa (đen trên trắng). WCAG 2.1 Mức AA yêu cầu tỷ lệ ít nhất 4.5:1 cho chữ thân cỡ thường, và 3:1 cho chữ lớn (18pt hoặc 14pt đậm). Mức AAA đặt ngưỡng cao hơn lần lượt là 7:1 và 4.5:1. Bạn không cần tự tính độ chói. Điểm mấu chốt là một cặp màu trông ổn với bạn dưới ánh sáng tốt có thể tụt dưới 4.5:1 trên màn hình, và hướng dẫn tồn tại chính vì trường hợp đó. Sau khi trích và điều chỉnh màu, hãy kiểm tra mọi cặp chữ-trên-nền bạn định dùng. Một màu xám trung tông đọc tốt trên trắng có thể trượt hoàn toàn trên một nền be nhạt từ bảng màu bạn trích được.
Mù màu: mô phỏng cách các cặp màu hiện ra với người bị ảnh hưởng
Khoảng 1 trên 12 nam giới và 1 trên 200 nữ giới có một dạng thiếu hụt thị giác màu. Dạng phổ biến nhất là deuteranopia (giảm nhạy với xanh lá), tiếp theo là protanopia (giảm nhạy với đỏ). Tritanopia (giảm nhạy với xanh-vàng) hiếm hơn. Với mỗi dạng, hệ thị giác ánh xạ một số bước sóng nhất định về cùng một màu cảm nhận mà người không bị ảnh hưởng thấy là khác biệt. Vấn đề thực tế cho một bảng màu là hai màu trông khác biệt rõ ràng dưới thị giác bình thường có thể trùng về cùng một tông với người mù màu, khiến chúng vô dụng để truyền đạt sự phân biệt, ví dụ chỉ dùng đỏ và xanh lá để báo thành công và lỗi. Chạy một mô phỏng mù màu cho bạn thấy bảng màu trông ra sao khi các kênh bị ảnh hưởng bị nén lại. Các cặp trùng về một màu xám hoặc nâu gần giống nhau là những cặp cần xem lại: hoặc tăng chênh lệch độ sáng giữa chúng để tương phản vẫn còn ngay cả khi không có sự phân biệt tông màu, hoặc thêm một tín hiệu phụ (hình dạng, nhãn, họa tiết) để màu không phải là tín hiệu duy nhất.
Làm cục bộ: color-palette, color-blindness và color-converter
Cả ba bước được mô tả trong bài này đều có thể hoàn tất mà không gửi ảnh hay màu thương hiệu của bạn tới bất kỳ máy chủ nào. Công cụ color-palette chạy hoàn toàn trong trình duyệt: bạn thả một ảnh vào, nó lấy mẫu các điểm ảnh cục bộ và trả về các màu chủ đạo dưới dạng giá trị hex. Không có tệp nào được truyền đi. Công cụ color-converter nhận một mã hex và hiển thị cùng màu đó ở RGB và HSL để bạn điều chỉnh có mục tiêu độ sáng hoặc độ bão hòa mà vẫn ở trong cùng họ tông màu. Cả mã hex lẫn các giá trị đã chuyển đổi chỉ tồn tại trong trang. Công cụ color-blindness hoạt động theo chiều ngược lại: bạn thả một ảnh vào và nó hiển thị các mô phỏng deuteranopia, protanopia và tritanopia của ảnh đó, được tính trong trình duyệt. Để kiểm tra một bảng màu thay vì một bức ảnh, hãy xuất hoặc chụp màn hình các mẫu màu của bạn thành một ảnh trước, rồi thả ảnh đó vào bộ mô phỏng. Dùng ba công cụ theo trình tự, trích từ ảnh, điều chỉnh trong color-converter, rồi xuất một ảnh mẫu màu và xác minh nó trong color-blindness, bao trùm toàn bộ quy trình mô tả ở trên. Ảnh của bạn ở lại trên thiết bị suốt quá trình, điều này quan trọng nếu ảnh nguồn chứa thương hiệu chưa công bố hoặc một bộ nhận diện chưa phát hành của khách hàng.
Công cụ trong bài viết này
- Trình trích xuất bảng màuTrích xuất các màu chủ đạo từ một hình ảnh dưới dạng ô màu HEX. Sao chép bất kỳ màu nào. Không tải lên.
- Trình mô phỏng mù màuMô phỏng protanopia, deuteranopia, tritanopia và achromatopsia trên một hình ảnh. Không tải lên.
- Trình chuyển đổi màuChuyển đổi màu giữa HEX, RGB, HSL, HSV và CMYK. Bao gồm trình kiểm tra tương phản WCAG. Không tải lên.
- Trình tạo bảng phối màuTạo các bảng màu bổ sung, tương đồng, bộ ba, bộ bốn và đơn sắc từ một màu cơ sở. Không tải lên.
Câu hỏi thường gặp
Một bộ trích bảng màu thường trả về bao nhiêu màu?
Hầu hết công cụ trả về từ 5 đến 16 màu theo mặc định, dù nhiều công cụ cho bạn đặt số lượng. Trả về ít màu hơn nghĩa là thuật toán phải nhóm nhiều điểm ảnh hơn lại, điều này có thể gộp các tông khác biệt nhưng giống nhau. Trả về nhiều màu hơn có thể tạo ra các màu gần trùng khó dùng riêng biệt. Với một bảng màu UI, 6 đến 8 màu thường là một điểm khởi đầu thực tế.
Một bảng màu trích từ ảnh có tự động đạt tương phản WCAG không?
Không tự động. Các màu chủ đạo trong một bức ảnh thường là trung tông với độ chói vừa phải, vốn có xu hướng cho tỷ lệ trong khoảng 2:1 đến 3:1 với nhau. Đạt ngưỡng 4.5:1 cho chữ thân thường đòi hỏi làm sáng giá trị nền hoặc làm tối giá trị chữ vượt mức mà bản trích thô cung cấp. Việc trích cho bạn một điểm khởi đầu; phép kiểm tra tương phản cho bạn biết cần điều chỉnh bao nhiêu.
Tỷ lệ tương phản WCAG có tính đến mù màu không?
Một phần. Công thức độ chói của WCAG dựa trên độ sáng tương đối, không phải tông màu, nên một cặp tương phản cao đạt 4.5:1 nói chung vẫn phân biệt được ngay cả với người mù màu vì chênh lệch độ sáng được giữ lại. Tuy nhiên, hai màu có độ chói giống nhau nhưng khác tông, chẳng hạn đỏ và xanh lá ở cùng độ sáng, có thể vượt qua kiểm tra tương phản dựa trên độ chói mà vẫn không phân biệt được với người deuteranope. Chạy một mô phỏng mù màu là cách đúng để kiểm tra sự phân biệt ở mức tông màu tách biệt với tỷ lệ tương phản.