Kiểm tra độ tương phản và khả năng đọc màu sắc

Khả năng đọc là sự khác biệt độ sáng giữa màu văn bản và màu nền. Sự khác biệt càng lớn, văn bản càng dễ đọc. Độ tương phản quá thấp khiến nội dung khó đọc — đặc biệt với người khiếm thị, người cao tuổi hoặc trong điều kiện ánh sáng khó khăn (ví dụ: trên điện thoại dưới ánh nắng trực tiếp).

Theo Tổ chức Y tế Thế giới (WHO), khoảng 2,2 tỷ người trên toàn thế giới có một dạng khiếm thị nào đó. Ngoài ra, hàng triệu người bị mù màu (khoảng 8% nam giới và 0,5% nữ giới), và nhiều người khác gặp suy giảm thị lực liên quan đến tuổi tác.

Công cụ tính tỷ lệ tương phản bằng công thức được quy định trong WCAG 2.1 (Hướng dẫn Khả năng Tiếp cận Nội dung Web) — hướng dẫn khả năng tiếp cận kỹ thuật số quốc tế. Kết quả cho phép đánh giá khách quan liệu các màu có đủ dễ đọc không, bất kể cài đặt màn hình hay khả năng nhận biết màu cá nhân.

Công cụ hiển thị tỷ lệ tương phản trên thang từ 1:1 (không có tương phản) đến 21:1 (tương phản tối đa — đen trên trắng). Kết quả được so sánh với ngưỡng xác định trong tiêu chuẩn WCAG:

• Văn bản thường — yêu cầu ít nhất 4.5:1 cho Mức AA (tiêu chuẩn tối thiểu) hoặc 7:1 cho Mức AAA (tiêu chuẩn nâng cao). Áp dụng cho văn bản dưới 18pt (24px) hoặc dưới 14pt (18.5px) in đậm.
• Văn bản lớn / in đậm — yêu cầu ít nhất 3:1 cho Mức AA hoặc 4.5:1 cho Mức AAA. Áp dụng cho văn bản từ 18pt (24px) hoặc từ 14pt (18.5px) in đậm — tiêu đề, nút bấm, phần nổi bật.
• Biểu tượng và thành phần UI — yêu cầu ít nhất 3:1 cho Mức AA. Áp dụng cho biểu tượng, nút bấm, trường biểu mẫu và các thành phần giao diện khác truyền tải thông tin.

Mức AA là mức tối thiểu theo quy định khả năng tiếp cận kỹ thuật số ở nhiều quốc gia, bao gồm Chỉ thị Khả năng Tiếp cận Web của EU. Mức AAA cung cấp khả năng đọc tốt hơn nhưng không phải lúc nào cũng thực tế để đạt được cho mọi thành phần.

Nếu độ tương phản quá thấp, bạn không cần tìm màu phù hợp bằng cách thử và sai. Tính năng Khớp tự động tìm biến thể màu văn bản đáp ứng ngưỡng tương phản đã chọn.

Cách khớp hoạt động:

1. Chọn mục tiêu khớp từ danh sách — ví dụ: AA cho văn bản thường hoặc AAA cho văn bản lớn.
2. Nhấp nút Khớp.
3. Công cụ sẽ tìm kiếm các biến thể độ sáng của màu văn bản và đề xuất biến thể gần nhất đáp ứng yêu cầu.
4. Màu được đề xuất có thể sao chép vào clipboard hoặc ngay lập tức thiết lập làm màu văn bản mới.

Thuật toán giữ nguyên sắc độ và bão hòa của màu gốc, chỉ thay đổi độ sáng. Màu được đề xuất vẫn nhất quán với nhận diện thương hiệu trong khi đáp ứng tiêu chuẩn khả năng tiếp cận.

Tôi thấy thông báo lỗi định dạng màu

Kiểm tra định dạng màu. Mã HEX phải bắt đầu bằng # và chứa 3 hoặc 6 ký tự (ví dụ: #fff hoặc #ffffff). Với định dạng RGB, kiểm tra xem các giá trị có được phân cách bằng dấu phẩy và nằm trong khoảng 0-255 không.

Tính năng Khớp không tìm được màu phù hợp

Khi nền và văn bản có độ sáng gần nhau trong cùng sắc độ, thuật toán có thể không tìm được biến thể đáp ứng yêu cầu mà không thay đổi sắc độ. Trong trường hợp này, hãy cân nhắc thay đổi màu nền hoặc chọn màu văn bản hoàn toàn khác.

Màu trong bộ chọn không khớp với mã đã nhập

Bộ chọn màu trong trình duyệt chỉ hỗ trợ định dạng HEX không có độ trong suốt. Nếu bạn nhập màu ở định dạng RGBA hoặc HSLA có độ trong suốt, bộ chọn chỉ hiển thị phần màu (không có alpha). Tính toán tương phản vẫn xem xét độ trong suốt.

Mù màu ảnh hưởng khoảng 8% nam giới và 0,5% nữ giới. Người mù màu có thể gặp khó khăn trong việc phân biệt một số cặp màu nhất định, ngay cả khi độ tương phản độ sáng là đủ.

Các loại mù màu phổ biến nhất:

• Deuteranopia — khó phân biệt xanh lá và đỏ (dạng phổ biến nhất)
• Protanopia — khó nhìn thấy màu đỏ
• Tritanopia — khó nhìn thấy xanh dương và vàng (hiếm)

Công cụ này kiểm tra độ tương phản độ sáng, quan trọng cho tất cả người dùng. Tuy nhiên, khi thiết kế, cũng nên tránh các tổ hợp màu gây vấn đề (ví dụ: văn bản đỏ trên nền xanh lá) và không chỉ dựa vào màu sắc để truyền tải thông tin — sử dụng hình dạng, biểu tượng và văn bản nữa.