Color Contrast - Kiểm Tra Độ Tương Phản Online

Tính năng nổi bật

• Tính tỷ lệ tương phản theo công thức độ chói tương đối, kết quả nằm trong khoảng từ 1 đến 21
• Chọn màu chữ và màu nền bằng bảng chọn màu hoặc gõ thẳng mã màu sáu chữ số
• Đối chiếu với bốn ngưỡng: mức AA cho chữ thường, mức AA cho chữ lớn, mức AAA cho chữ thường và mức AAA cho chữ lớn
• Ghi rõ ngưỡng yêu cầu ngay trên từng thẻ để bạn biết mình còn thiếu bao nhiêu
• Khối chữ mẫu tô đúng cặp màu đang chọn, cập nhật ngay khi bạn đổi màu
• Nút hoán đổi nhanh màu chữ với màu nền để thử cả hai chiều
• Tô nền xanh khi đạt và nền đỏ khi chưa đạt, nhìn là biết ngay trạng thái
• Tính toán chạy trong trình duyệt, không gửi bảng màu của bạn đi đâu

Vì sao độ tương phản không phải chuyện thẩm mỹ mà là chuyện đọc được

Chữ xám nhạt trên nền trắng trông thanh thoát trên màn hình của người thiết kế, trong phòng có rèm che, với đôi mắt hai mươi lăm tuổi. Cùng đoạn chữ đó trên điện thoại ngoài nắng, trên màn hình văn phòng đã dùng năm năm, hoặc với người trên bốn mươi lăm tuổi bắt đầu giảm khả năng phân biệt sắc độ, thì gần như biến mất. Tỷ lệ tương phản là cách đưa chuyện này về một con số kiểm tra được thay vì tranh cãi bằng cảm nhận. Nó cũng không phải chuyện của một nhóm nhỏ: suy giảm thị lực do tuổi tác ảnh hưởng tới phần lớn dân số ở một thời điểm nào đó, chưa kể tình huống tạm thời như dùng máy ngoài trời hay màn hình bị chói. Thêm nữa, nhiều tổ chức và cơ quan nhà nước đã đưa yêu cầu tiếp cận vào điều kiện đấu thầu, nên một giao diện không đạt ngưỡng có thể trở thành vấn đề hợp đồng chứ không chỉ là góp ý thiết kế.

Lợi ích khi sử dụng

• •Biến một tranh luận cảm tính về màu thành con số ai cũng kiểm chứng được
• •Thấy đồng thời bốn ngưỡng nên chọn được mức cam kết phù hợp cho từng nhóm chữ
• •Có khối chữ mẫu bên cạnh con số, tránh trường hợp đạt ngưỡng nhưng nhìn vẫn khó chịu
• •Phát hiện sớm ngay khi dựng bảng màu, rẻ hơn nhiều so với sửa lại toàn bộ giao diện sau kiểm định
• •Không cần cài phần mềm, mở trang và gõ hai mã màu là có kết quả

Cách kiểm tra một cặp màu

1. 1Nhập mã màu chữ vào ô bên trái, viết đủ sáu chữ số sau dấu thăng chứ đừng viết tắt ba chữ số.
2. 2Nhập mã màu nền vào ô bên phải, lấy đúng màu nền thật sự nằm ngay dưới đoạn chữ chứ không lấy màu nền của cả trang.
3. 3Đọc con số tỷ lệ ở giữa và bốn thẻ kết quả bên dưới, chú ý xem đoạn chữ bạn đang xét thuộc nhóm chữ thường hay chữ lớn.
4. 4Nếu chưa đạt, chỉnh dần độ sáng của một trong hai màu rồi theo dõi con số thay đổi cho tới khi vượt ngưỡng cần thiết.
5. 5Bấm nút hoán đổi để thử phương án đảo màu, nhiều khi lấy màu thương hiệu làm nền và dùng chữ trắng lại dễ đạt hơn.

Bốn ngưỡng cần nhớ và định nghĩa chữ lớn

Ở mức AA, chữ thường cần tỷ lệ tương phản tối thiểu 4,5 trên 1 và chữ lớn cần tối thiểu 3 trên 1. Ở mức AAA, hai con số tương ứng nâng lên 7 trên 1 và 4,5 trên 1. Điểm hay bị hiểu sai nằm ở định nghĩa chữ lớn: nó không phải là cảm nhận mà là một mốc cụ thể, gồm chữ từ 18 điểm trở lên với độ đậm thường, hoặc chữ từ 14 điểm trở lên nếu đã in đậm. Quy đổi sang đơn vị pixel thường dùng trên web thì tương đương khoảng 24 pixel cho chữ thường và khoảng 18,66 pixel cho chữ đậm. Nghĩa là tiêu đề cỡ 20 pixel không in đậm vẫn bị xếp vào nhóm chữ thường và phải đạt 4,5 trên 1. Ngoài chữ, còn một ngưỡng nữa hay bị bỏ quên: các thành phần giao diện và đồ họa mang thông tin, chẳng hạn viền ô nhập liệu, biểu tượng chức năng, cột biểu đồ, cần đạt tối thiểu 3 trên 1 so với vùng kề bên. Chữ mờ đi khi bị vô hiệu hóa và biểu trưng thương hiệu là hai trường hợp được miễn.

Công thức phía sau con số và vì sao nó không tuyến tính

Tỷ lệ được tính bằng độ chói tương đối của màu sáng hơn cộng 0,05, chia cho độ chói tương đối của màu tối hơn cộng 0,05. Vì luôn lấy sáng chia tối nên kết quả không đổi khi bạn hoán đổi hai màu, và luôn nằm trong khoảng từ 1 với hai màu giống hệt nhau tới 21 với đen tuyệt đối trên trắng tuyệt đối. Độ chói tương đối không phải trung bình cộng ba kênh màu. Mỗi kênh trước hết được đưa về thang từ 0 đến 1, rồi đi qua một phép chuyển đổi phi tuyến để bù lại cách mã hóa màu của màn hình, sau đó mới cộng lại theo trọng số khác nhau: kênh lục chiếm khoảng 71,5 phần trăm, kênh đỏ khoảng 21,3 phần trăm, kênh lam chỉ khoảng 7,2 phần trăm. Đây là lý do chữ xanh lam đậm trên nền đen vẫn khó đọc dù trông có vẻ khác biệt, còn chữ vàng trên nền đen lại rất dễ đọc vì vàng chứa nhiều thành phần lục và đỏ. Cũng vì trọng số này mà tăng thành phần lam gần như không cải thiện được tỷ lệ.

Những trường hợp con số nói đúng nhưng vẫn chưa đủ

Công thức chỉ nhận vào hai màu đặc, nên có nhiều tình huống thực tế nằm ngoài tầm với của nó. Chữ đặt trên ảnh nền là ví dụ rõ nhất: nền thay đổi theo từng vùng, chỗ đạt chỗ không, và cách xử lý đúng là phủ một lớp màu bán trong suốt hoặc đặt chữ trong một khối nền đặc thay vì cố tìm một cặp màu. Chữ đặt trên nền chuyển sắc cũng vậy, phải kiểm tra ở điểm có tương phản thấp nhất chứ không phải điểm trung bình. Màu có kênh trong suốt thì công cụ không nhận, bạn phải tự trộn màu đó với màu nền phía sau ra một màu đặc rồi mới nhập vào. Ngoài ra chính công thức này cũng có điểm yếu đã được thừa nhận rộng rãi: nó ước lượng chưa tốt ở vùng màu rất tối, khiến nhiều cặp màu trên giao diện tối vượt ngưỡng trên giấy nhưng đọc vẫn mỏi mắt, trong khi vài cặp khác trượt ngưỡng dù thực tế đọc tốt. Bản nháp thế hệ tiếp theo của tiêu chuẩn đang cân nhắc một cách tính khác dựa trên cảm nhận, nhưng ngưỡng đang có hiệu lực để đối chiếu vẫn là bốn con số ở trên.

Cách sửa một cặp màu chưa đạt mà vẫn giữ được nhận diện

Sai lầm thường gặp là làm chữ đậm hơn bằng cách tăng độ đậm nét, nhưng in đậm không làm thay đổi tỷ lệ tương phản, nó chỉ đổi ngưỡng áp dụng khi cỡ chữ đã đủ lớn. Việc cần làm là đổi độ sáng. Khi màu thương hiệu quá nhạt để làm màu chữ trên nền trắng, có ba hướng xử lý giữ được nhận diện. Một là tạo một biến thể tối hơn của chính màu đó chỉ dùng cho chữ, còn màu gốc giữ nguyên cho mảng nền và biểu trưng; đây là cách các bộ nhận diện chuyên nghiệp hay làm và họ ghi rõ trong tài liệu là màu nào dùng cho chữ. Hai là đảo vai trò, lấy màu thương hiệu làm nền rồi đặt chữ trắng lên, thường dễ đạt ngưỡng hơn nhiều với các màu bão hòa cao. Ba là chỉ dùng màu nhạt đó cho tiêu đề cỡ lớn để rơi vào ngưỡng 3 trên 1 dễ thở hơn, còn phần nội dung dài vẫn dùng màu trung tính đậm. Với chữ giữ vai trò liên kết, đừng quên còn phải phân biệt được với chữ thường xung quanh.

Đưa việc kiểm tra này vào quy trình làm việc

Kiểm tra từng cặp màu khi giao diện đã dựng xong là làm ngược. Cách hiệu quả hơn là xử lý ngay ở bước lập bảng màu: với mỗi màu định dùng làm nền, xác định trước những màu chữ nào đặt lên được và ghi thành một bảng đối chiếu ngắn. Bảng đó trở thành tài liệu chung giữa người thiết kế và người lập trình, thay cho việc mỗi lần lại đi hỏi. Khi xây dựng bộ mã màu theo thang độ sáng, một kinh nghiệm dùng được là các bậc cách nhau đủ xa thường tạo tương phản đạt mức AA với nhau, nhưng vẫn phải kiểm chứng chứ đừng tin vào cảm giác. Đừng bỏ sót những trạng thái ít được để ý: chữ trên nút khi rê chuột, chữ trong ô nhập lúc chưa gõ gì, thông báo lỗi màu đỏ trên nền hồng nhạt, chữ trắng trên nút màu vàng cảnh báo. Cuối cùng, hãy tự soi giao diện của mình dưới ánh nắng trên điện thoại một lần; đó là bài kiểm tra thực tế mà không con số nào thay thế được.

Câu hỏi thường gặp (FAQ)

Từ khóa liên quan

• kiểm tra độ tương phản màu
• tỷ lệ tương phản wcag
• color contrast checker
• wcag aa 4.5:1
• wcag aaa 7:1
• chữ lớn theo wcag là bao nhiêu
• độ chói tương đối là gì
• công thức contrast ratio
• kiểm tra màu chữ trên nền
• accessibility màu sắc website
• tương phản cho dark mode
• tương phản icon và viền input
• màu thương hiệu không đạt tương phản
• chữ trên ảnh nền có đạt chuẩn không
• bảng màu đạt chuẩn tiếp cận
• a11y checker online
• kiểm tra tương phản hex online
• tiêu chuẩn tiếp cận nội dung web
• contrast ratio bao nhiêu là đủ
• công cụ kiểm tra tương phản miễn phí