Để nghiệm thu tương phản chữ website, cần đo cặp màu chữ–nền tại đúng vị trí và trạng thái hiển thị, rồi lưu kết quả đủ để kiểm tra lại. Nhìn trang trên màn hình của mình và thấy “khá rõ” chưa phải bằng chứng rằng mọi người đều đọc được. Ngược lại, một báo cáo tự động không có lỗi cũng chưa bao phủ chữ nằm trong ảnh hay trên nền chuyển màu.
Bài viết dành cho chủ website đang nhận bàn giao từ đơn vị thiết kế. Đây là quy trình kiểm tra đề xuất, không phải chứng nhận một website đã đạt toàn bộ WCAG. Nếu chưa thống nhất phạm vi, hãy đưa hạng mục này vào checklist thuê dịch vụ thiết kế website trước khi chốt nghiệm thu.
1. Chốt kiểm tra phần nào trước khi đo
Lập danh sách mẫu trang: trang chủ, trang dịch vụ, bài viết, biểu mẫu và phần đầu/cuối trang dùng chung. Ở mỗi mẫu, chọn chữ nội dung, tiêu đề, liên kết, nhãn ô nhập, thông báo lỗi và chữ trên nút. Nếu có giao diện sáng/tối, ghi từng chế độ riêng.
Với website nhiều trang, lấy mẫu là cách tổ chức công việc, không phải lý do để kết luận toàn bộ nội dung đều đạt. Biên bản nên có hai mục: “đã kiểm tra” và “chưa kiểm tra”. Các banner do người biên tập thay về sau cũng cần được đưa vào quy trình duyệt nội dung.
Đừng chỉ gửi ảnh thiết kế cho người nghiệm thu. Màu, cỡ chữ, độ đậm hoặc độ trong suốt trên trang đang chạy có thể khác bản thiết kế. Cần URL và phiên bản thực tế để đối chiếu.
2. Hiểu ngưỡng trước khi đọc kết quả
Theo giải thích của WebAIM về tương phản và màu sắc, yêu cầu tương phản tối thiểu mức AA của WCAG đối với chữ thông thường là 4,5:1. Chữ lớn có ngưỡng 3:1; “lớn” ở đây có định nghĩa cụ thể, không phải cứ là tiêu đề thì được áp dụng.
Chữ lớn được xác định thế nào?
WebAIM nêu chữ từ 18 pt, tương đương 24 CSS px, hoặc chữ đậm từ 14 pt, khoảng 18,67 CSS px, thuộc nhóm chữ lớn. Hãy nhờ bên thiết kế xác nhận cỡ và độ đậm thực tế của phần đang đo. Nếu chưa xác định được, ghi “cần làm rõ”, không tự chọn ngưỡng thấp hơn để cho qua.
Không làm tròn một tỷ lệ dưới ngưỡng thành đạt. Chẳng hạn, kết quả 4,47:1 không đạt yêu cầu 4,5:1 cho chữ thông thường. Tỷ lệ cũng không phải điểm phần trăm: 4,5:1 không có nghĩa “đọc được 45%”.
Đừng áp một ngưỡng cho mọi vật trên trang
Chữ trong ảnh vẫn cần được xem xét về tương phản. Một số trường hợp như chữ thuộc logo hoặc thành phần không hoạt động có ngoại lệ trong tiêu chí này; nên ghi lý do cụ thể thay vì bỏ qua toàn bộ khu vực.
Biểu tượng, đường viền điều khiển và dấu hiệu trạng thái có yêu cầu riêng. Bài này tập trung vào chữ và nền; một nút có chữ đủ tương phản chưa đồng nghĩa mọi phần của nút đã được nghiệm thu. Tương tự, màu chữ đạt không chứng minh liên kết dễ nhận ra nếu người dùng chỉ được hướng dẫn bằng màu sắc.
3. Đo theo cặp màu và trạng thái
Có thể yêu cầu đơn vị triển khai thao tác công cụ cùng người nghiệm thu. Người duyệt không cần tự sửa mã trên website đang chạy.
- Mở đúng URL và vị trí. Ghi tên phần, nội dung chữ cần kiểm tra, chế độ sáng/tối và kích thước màn hình đang dùng.
- Xác định màu chữ và màu nền thực tế. Với nền đặc, lấy giá trị màu từ công cụ kiểm tra phần tử hoặc nhờ người triển khai cung cấp. Đừng chỉ lấy mã trong bộ nhận diện thương hiệu.
- Đưa cặp màu vào công cụ kiểm tra tương phản. Ghi cả mã màu, tỷ lệ và loại chữ áp dụng. Chụp kết quả để lần sau không phải đoán cặp màu nào đã được thử.
- Thử trạng thái tương tác. Kiểm tra khi rê chuột và khi liên kết hoặc nút nhận focus bằng bàn phím. Nếu màu đổi, đó là cặp màu cần đo riêng.
- Sau khi sửa, mở lại trang và đo lại. Xác nhận thay đổi đã xuất hiện ở bản công khai hoặc môi trường bàn giao đã thống nhất, không chỉ trong tệp thiết kế.
Hướng dẫn đánh giá của WebAIM mô tả cách dùng công cụ kiểm tra cặp màu và kết hợp kiểm tra thủ công. Công cụ cho nhiều kết quả theo loại chữ và mức yêu cầu: hãy đọc đúng dòng tương ứng, không chọn một dòng “đạt” bất kỳ.
Việc di chuyển focus có thể kết hợp với kiểm tra website bằng bàn phím trước khi nghiệm thu. Tuy nhiên, đi tới được nút và đọc rõ chữ trên nút là hai tiêu chí khác nhau; cần ghi riêng.
4. Ba tình huống không nên chỉ tin vào quét tự động
Chữ đặt trên ảnh hoặc nền chuyển màu
Một dòng chữ có thể đi qua vùng sáng và tối trong cùng một ảnh. Đo ở vùng nền thuận lợi nhất sẽ bỏ sót nơi khó đọc. WebAIM khuyến nghị chú ý vùng có tương phản thấp nhất. Có thể đề nghị thêm nền đặc phía sau chữ hoặc đổi cách bố trí, rồi kiểm tra lại trên ảnh thực tế.
Nếu banner thay ảnh theo từng chiến dịch, kết quả của ảnh cũ không tự áp dụng cho ảnh mới. Hãy giao trách nhiệm kiểm tra cho người duyệt banner, không chỉ cho người viết giao diện ban đầu.
Màu có độ trong suốt
Màu chữ hoặc lớp phủ trong suốt chịu ảnh hưởng của nền phía dưới. Một mã màu riêng lẻ chưa đủ mô tả cặp màu nhìn thấy. Nhờ người triển khai xác nhận màu kết hợp thực tế hoặc dùng phương pháp lấy mẫu phù hợp; đừng chép hai mã màu đầu tiên nhìn thấy rồi kết luận.
Chữ nằm trong tệp ảnh
Công cụ quét văn bản HTML có thể không đo được chữ đã nằm trong ảnh. Cần kiểm tra trực quan và đo thủ công khi thích hợp. Theo WebAIM, WAVE không phát hiện được mọi vấn đề liên quan đến ảnh nền, chuyển màu, độ trong suốt hoặc chữ trong ảnh.
Ngoài tương phản, ảnh mang thông tin còn cần văn bản thay thế phù hợp. Có thể dùng thêm cách nghiệm thu alt và ảnh trang trí; alt đúng không làm chữ trong ảnh tự rõ hơn, và chữ rõ không thay thế được alt.
5. Mẫu ghi lỗi để sửa và thử lại
Thay nhận xét “chữ hơi nhạt” bằng một bản ghi đủ chi tiết:
- Trang/vị trí: URL, tên khu vực, đoạn chữ hoặc nhãn nút.
- Trạng thái: mặc định, rê chuột, focus; giao diện sáng/tối; trình duyệt và kích thước cửa sổ.
- Dữ kiện đo: màu chữ, màu nền, cỡ chữ, độ đậm, công cụ và tỷ lệ trả về.
- Tiêu chí áp dụng: chữ thông thường hay chữ lớn, ngưỡng đã thống nhất; ghi rõ nếu chưa đủ dữ kiện.
- Hướng xử lý: điều chỉnh màu, nền hoặc bố cục; người phụ trách và thời điểm kiểm tra lại.
- Kết quả sau sửa: tỷ lệ mới, ảnh minh chứng và trạng thái đạt/chưa đạt/chưa kiểm tra.
Ví dụ minh họa: “Nhãn nút gửi ở trang liên hệ, trạng thái mặc định, chữ thông thường: kết quả 4,47:1, chưa đạt ngưỡng 4,5:1. Đề nghị chỉnh cặp màu và đo lại cả trạng thái focus.” Đây là tình huống giả định để chỉ cách ghi, không phải kết quả đo một website cụ thể.
Tránh kết luận “toàn trang đạt” từ một nút đã sửa. Nếu màu đó được dùng chung, kiểm tra các vị trí dùng lại, đặc biệt nơi có nền khác. Giữ kết quả trước và sau để người nhận bàn giao biết thay đổi nào đã xử lý vấn đề.
Câu hỏi thường gặp
Chỉ cần tăng độ sáng màn hình là được không?
Không nên dùng điều chỉnh màn hình cá nhân để thay cho sửa cặp màu website. Nghiệm thu cần dựa trên nội dung hiển thị và tiêu chí đã thống nhất, không dựa vào một thiết lập thuận lợi trên máy người thử.
Một lần quét không báo lỗi có đủ để ký nghiệm thu?
Chưa đủ cho phạm vi tương phản nếu trang có ảnh, lớp phủ hoặc trạng thái tương tác chưa được kiểm tra. Hãy ghi phần công cụ đã quét và phần đã kiểm tra thủ công. Cũng không nên gọi kết quả riêng về tương phản là chứng nhận toàn bộ khả năng tiếp cận.
Có phải đổi toàn bộ màu thương hiệu?
Không mặc định. Có thể điều chỉnh sắc độ cho chữ, chọn nền phù hợp hoặc thay cách đặt chữ trên ảnh. Mục tiêu là các cặp màu thực tế đạt yêu cầu ở đúng vị trí; phương án cuối cần được đo lại, không chỉ duyệt bằng cảm giác.
Phát triển nội dung dịch vụ trên DichVuHay.vn
Quy trình nghiệm thu rõ ràng giúp người thuê dịch vụ trao đổi với bên triển khai bằng bằng chứng thay vì lời nhận xét chung. DichVuHay.vn có thể phù hợp cho dự án hướng dẫn lựa chọn dịch vụ và chuẩn bị bàn giao, tùy nội dung và năng lực vận hành thực tế của người mua.
Nếu quan tâm sở hữu DichVuHay.vn, anh/chị có thể trao đổi qua 0945 279 268. Đây là liên hệ mua bán tên miền, không phải nơi nhận kiểm định hoặc sửa website. Quyền sở hữu tên miền không tự bảo đảm khách hàng, lưu lượng hay thứ hạng tìm kiếm.
