Bảng màu từ ảnh và kiểm tra độ tương phản

Công cụ này làm gì

Ba việc nhỏ về màu sắc trong một chỗ. Màu từ ảnh đọc một bức ảnh và trả về các màu chính, mỗi màu kèm tỷ lệ diện tích, để bạn lấy bảng màu từ ảnh chụp, logo hay ảnh chụp màn hình. Kiểm tra tương phản cho biết chữ màu này có đọc được trên nền màu kia không, theo hướng dẫn trợ năng WCAG. Chuyển đổi đổi một màu giữa HEX, RGB và HSL khi bạn gõ. Ảnh được xử lý trong trình duyệt và không bao giờ bị tải lên.

Màu từ ảnh

1. Thả ảnh vào khung, chọn ảnh, hoặc dán ảnh chụp màn hình.
2. Chọn số màu từ 5 đến 8.
3. Nhấp vào ô màu để sao chép. Dùng "Sao chép dạng" để chọn HEX, RGB hay HSL trước, chữ trên ô màu cho thấy đúng thứ sẽ được sao chép.

Công cụ thu nhỏ ảnh còn tối đa 160 điểm ảnh ở cạnh dài, đếm từng điểm ảnh vào một lưới các màu gần nhau, rồi liên tục cắt đôi nhóm có độ trải màu rộng nhất. Đó là phương pháp median cut. Mỗi ô màu là trung bình chính xác của các điểm ảnh trong nhóm, và phần trăm là số điểm ảnh của nhóm đó. Điểm ảnh trong suốt bị bỏ qua. Phương pháp không có yếu tố ngẫu nhiên nên cùng một ảnh luôn cho cùng một bảng màu. Lưu ý "chính" tính theo diện tích: logo nhỏ rực rỡ trên nền xám lớn sẽ cho màu xám ở đầu.

Kiểm tra tương phản

Độ tương phản là tỷ lệ độ sáng giữa hai màu, từ 1:1 (giống nhau) đến 21:1 (đen trên trắng). WCAG 2 đặt mức tối thiểu cho chữ dễ đọc là 4,5:1 với chữ thường và 3:1 với chữ lớn, tức từ 24 px, hoặc từ 18,66 px nếu in đậm. Mức AAA nghiêm hơn yêu cầu 7:1 và 4,5:1. Nút bấm, biểu tượng và viền ô nhập cần 3:1 so với phần bên cạnh. Công cụ hiện từng mục là đạt hay không đạt, kèm bản xem trước chữ của bạn trên nền của bạn.

Khi chữ thường không đạt, công cụ gợi ý màu gần nhất cùng sắc độ và độ bão hòa mà đạt, và một nút để áp dụng.

Ví dụ

Chữ xám #777777 trên nền trắng có tỷ lệ tương phản 4,48:1. Mức đó không đạt AA cho chữ thường dù chỉ thiếu một chút, và đây là màu rất phổ biến trên web. Làm xám đậm hơn một chút thành #767676 thì tỷ lệ là 4,54:1 và đạt. Hầu hết mọi người không nhận ra sự khác biệt, nhưng nó quyết định trang có qua được kiểm tra trợ năng hay không.

Chuyển đổi

Gõ vào ô HEX, RGB hoặc HSL, hoặc dùng bộ chọn màu, hai ô còn lại đi theo. Công cụ nhận hex 3 hoặc 6 chữ số có hoặc không có dấu thăng, rgb(234, 88, 12) dùng dấu phẩy hoặc dấu cách, và hsl(21, 90%, 48%). HSL hiện bằng số nguyên như CSS thường viết, nên đổi từ HSL ngược về HEX có thể lệch gốc một bậc.

Lỗi thường gặp

• Đánh giá tương phản bằng mắt. Màn hình, ánh sáng và mắt mỗi người khác nhau. Con số thì không.
• Chỉ xem dòng chữ lớn. Nội dung bài viết là chữ thường, hãy nhìn các dòng đầu.
• Chữ đặt trên ảnh. Công cụ so sánh hai màu phẳng. Hãy đặt chữ trên một khối màu đặc hoặc kiểm tra vùng tệ nhất của ảnh.

Giới hạn

Ảnh đến 40 MB và khoảng 50 megapixel. Màu được đọc như trình duyệt hiển thị, trong sRGB.