Tỷ lệ độ tương phản trong menu điều hướng: tiêu chuẩn WCAG so với điểm tối ưu chuyển đổi

Một người thiết kế gần đây cho tôi xem menu điều hướng mới của cửa hàng Shopify của họ. “Chúng tôi đã đáp ứng các hướng dẫn khả năng truy cập,” họ nói, chỉ vào huy hiệu tuân thủ WCAG AA của họ. Độ tương phản giữa văn bản và nền là 4,51:1—vừa vượt ngưỡng 4,5:1. Về mặt kỹ thuật có thể truy cập được. Tuân thủ pháp lý. Và chuyển đổi tệ hơn 40% so với menu cũ của họ.

Vấn đề không phải là họ không tuân thủ các tiêu chuẩn khả năng truy cập. Đó là tuân thủ tối thiểu không tối ưu hiệu suất. Trong các bài kiểm tra khả năng sử dụng với các khách hàng mua sắm thực tế, các phần tử điều hướng có tỷ lệ độ tương phản 7:1 hoặc cao hơn luôn hoạt động tốt hơn những phần tử ở mức tối thiểu 4,5:1—thường cao hơn 25-30% về tỷ lệ nhấp chuột.

Tại sao tối thiểu WCAG tồn tại—và tại sao chúng không đủ

Web Content Accessibility Guidelines đặt 4,5:1 làm tỷ lệ độ tương phản tối thiểu cho văn bản bình thường (14-18pt) vì dưới ngưỡng đó, người dùng có tầm nhìn thấp vừa phải hoặc mù màu sắc sẽ gặp khó khăn khi đọc văn bản. Đó là một sàn hành động pháp lý, không phải mục tiêu thiết kế.

WCAG cũng xác định tiêu chuẩn AAA nghiêm ngặt hơn là 7:1 cho văn bản bình thường. Mức độ này ban đầu được coi là khả năng truy cập “nâng cao”—một tính năng tốt có thể có cho các tổ chức phục vụ các quần thể có thách thức thị lực đã biết. Nhưng nhiều năm kiểm tra khả năng sử dụng trong thế giới thực đã cho thấy điều gì đó đáng ngạc nhiên: 7:1 không chỉ giúp người dùng khuyết tật. Nó giúp mọi người.

Tốc độ quét: Trong các nghiên cứu theo dõi mắt, người dùng quét menu điều hướng trong vòng dưới 2 giây. Độ tương phản cao hơn có nghĩa là nhận biết nhanh hơn—sự khác biệt giữa người dùng phát hiện ngay lập tức “Sale” với việc quét nó hai lần trước khi ghi nhận.

Biến thiên môi trường: Người dùng duyệt trên máy tính xách tay trong những quán cà phê tối, trên máy tính bảng trên giường với chế độ ban đêm, và trên điện thoại dưới ánh nắng trực tiếp. Tỷ lệ độ tương phản 4,5:1 trông ổn trên màn hình được hiệu chuẩn của bạn có thể trở nên gần như vô hình trên màn hình điện thoại ngoài trời.

Dân số lớn tuổi: Đến tuổi 40, hầu hết mọi người trải qua một số suy giảm tự nhiên trong độ nhạy cảm với độ tương phản. Đến 60 tuổi, nó rất đáng kể. Với độ tuổi mua sắm trực tuyến trung bình tăng dần, thiết kế cho những mắt trẻ với thị lực hoàn hảo để lại tiền trên bàn.

Tải nhận thức: Đọc văn bản độ tương phản thấp đòi hỏi nỗ lực tinh thần nhiều hơn. Nỗ lực đó rút từ ngân sách nhận thức tương tự mà người dùng cần để đánh giá sản phẩm, so sánh giá và đưa ra quyết định mua. Độ tương phản mạnh trong điều hướng giải phóng các nguồn lực tinh thần cho những gì thực sự quan trọng: mua hàng.

Dữ liệu chuyển đổi: 7:1 so với 4,5:1 trong thực tế

Khi Baymard Institute phân tích khả năng sử dụng thương mại di động, họ phát hiện ra rằng điều hướng độ tương phản cao (7:1 hoặc cao hơn) giảm việc từ bỏ menu 22% so với các thiết kế độ tương phản thấp ở mức tối thiểu 4,5:1.

Một nhà bán lẻ thời trang tôi làm việc cùng đã kiểm tra A/B hai lược đồ màu điều hướng: một ở 4,8:1 (xám nhạt #767676 trên trắng #FFFFFF) và một ở 9,5:1 (xám đậm #2a2a2a trên trắng). Cùng một cấu trúc menu, cùng các mục, cùng các hiệu ứng hover. Phiên bản độ tương phản cao tăng nhấp chuột menu điều hướng lên 31% và cuối cùng thúc đẩy doanh thu trên mỗi khách truy cập nhiều hơn 18%.

Cơ chế không phức tạp. Người dùng có thể phân tích menu của bạn ngay lập tức dành ít thời gian mỏi mắt trên menu của bạn và nhiều thời gian duyệt sản phẩm của bạn hơn. Họ đưa ra các lựa chọn tự tin nhanh hơn. Họ cảm thấy ít mệt mỏi hơn. Và những người dùng mệt mỏi không mua hàng.

Những lỗi độ tương phản phổ biến làm suy yếu hiệu suất điều hướng

Hãy xem qua các lỗi phổ biến nhất với tỷ lệ độ tương phản thực tế.

Văn bản xám trên trắng: cạm bẫy “hiện đại”

Ví dụ: văn bản #999999 trên nền #FFFFFF Tỷ lệ độ tương phản: 2,8:1 Kết quả: Không đạt WCAG AA. Vô hình đối với nhiều người dùng tầm nhìn thấp. Khó đọc cho tất cả những người khác.

Thẩm mỹ này—xám nhạt trên trắng—phổ biến trong danh mục đầu tư thiết kế và các chủ đề Shopify thời thượng vì nó “trông sạch sẽ”. Nó cũng làm mất đi các chuyển đổi cửa hàng.

Sửa: Sử dụng #595959 hoặc màu tối hơn cho văn bản nội dung. Đặc biệt là menu điều hướng, hướng tới #404040 hoặc màu tối hơn (7:1 hoặc cao hơn).

Văn bản màu trên nền màu

Ví dụ: văn bản màu xanh lục #008080 trên nền hải quân #000080 Tỷ lệ độ tương phản: 2,1:1 Kết quả: Hoàn toàn không thể đọc được, thậm chí đối với người dùng có tầm nhìn hoàn hảo.

Điều này thường xảy ra khi các nhà thiết kế chọn màu sắc từ bảng màu thương hiệu mà không kiểm tra độ tương phản. Những màu sắc trông tinh tế khi bị cách ly nhưng thất bại khi được xếp chồng lên nhau.

Sửa: Kiểm tra mọi kết hợp màu sắc bằng trình kiểm tra độ tương phản trước khi thực hiện. Nếu màu sắc thương hiệu của bạn không cung cấp độ tương phản 7:1, hãy sử dụng chúng làm điểm nhấn—không phải là cặp văn bản-nền.

Các trạng thái hover làm phá hủy khả năng đọc

Ví dụ: Trạng thái mặc định là văn bản đen (#000000) trên trắng (#FFFFFF)—tỷ lệ hoàn hảo 21:1. Trạng thái hover biến văn bản thành xám nhạt (#cccccc) trên trắng—tỷ lệ thảm họa 1,6:1.

Ý định là hiển thị tính tương tác thông qua một sự thay đổi màu sắc tinh tế. Kết quả là người dùng di chuột qua menu điều hướng của bạn theo đen chữ không thể đọc được nơi họ đang chỉ.

Sửa: Các trạng thái hover sẽ duy trì hoặc tăng độ tương phản. Thêm gạch chân, sự thay đổi màu nền, hoặc độ dày phông chữ đậm—đừng giảm cường độ màu văn bản.

Dựa vào màu sắc một mình để phân biệt

Ví dụ: Các mục điều hướng đều là xám trung bình, nhưng “Sale” là đỏ và “New” là xanh lá—không có phân biệt nào khác.

Đối với người dùng mù màu đỏ-xanh lá (khoảng 8% nam giới), những mục này trông giống nhau. Nếu màu sắc là tín hiệu duy nhất, những người dùng này không thể biết được mục nào là mục nào.

Sửa: Không bao giờ sử dụng màu sắc làm phân biệt duy nhất. Ghép màu sắc với biểu tượng, nhãn văn bản, độ dày đậm, hoặc các thay đổi vị trí.

Cách kiểm toán độ tương phản menu điều hướng của bạn trong 15 phút

Bước 1: Xác định tất cả kết hợp văn bản-nền

Menu điều hướng của bạn có nhiều cặp màu sắc để kiểm tra:

• Văn bản điều hướng chính trên nền điều hướng
• Văn bản thả xuống/mega menu trên nền thả xuống
• Văn bản trạng thái hover trên nền hover
• Văn bản nút CTA trên nền nút
• Chỉ báo trang hoạt động/hiện tại trên nền

Ghi chú tất cả chúng.

Bước 2: Sử dụng Contrast Checker của WebAIM

Truy cập https://webaim.org/resources/contrastchecker/ và kiểm tra từng cặp. Nhập màu nền trước cảnh (văn bản) và màu nền của bạn. Công cụ ngay lập tức cho bạn biết tỷ lệ và vượt qua/thất bại cho cả AA và AAA.

Mục tiêu: Tối thiểu 7:1 cho tất cả văn bản điều hướng. Nếu bạn dưới 4,5:1, sửa nó ngay—bạn đang thất bại khả năng truy cập cơ bản và chảy máu chuyển đổi.

Bước 3: Kiểm tra trên các thiết bị thực tế dưới các điều kiện ánh sáng khác nhau

Tỷ lệ độ tương phản là toán học, nhưng khả năng đọc là trải nghiệm. Kéo trang web của bạn lên trên điện thoại của bạn và bước ra ngoài dưới ánh nắng trực tiếp. Bạn có thể đọc rõ ràng từng mục điều hướng không?

Lặp lại bài kiểm tra trong một phòng tối, trong một quán cà phê, và trên các thiết bị khác nhau. Menu điều hướng của bạn phải dễ đọc ngay lập tức trong mọi bối cảnh.

Bước 4: Kiểm tra các trạng thái hover bằng Chrome DevTools

Các trạng thái hover khó kiểm tra hơn vì chúng là thoáng qua. Sử dụng Chrome DevTools để buộc trạng thái hover: nhấp chuột phải vào liên kết điều hướng của bạn, chọn Inspect, tìm quy tắc :hover CSS, và thủ công áp dụng các kiểu. Trích xuất các màu sắc và chạy chúng qua trình kiểm tra độ tương phản.

Nhiều menu điều hướng có độ tương phản mặc định tuyệt vời nhưng độ tương phản hover tệ hại—bước này bắt được điều đó.

Bước 5: Chạy một bài kiểm tra con người nhanh chóng

Hiển thị menu điều hướng của bạn cho 5 người từ 50 tuổi trở lên và hỏi, “Bạn có thể dễ dàng đọc tất cả các mục menu không?” Nếu hơn một người do dự hoặc nheo mắt, độ tương phản của bạn không đủ cao—bất kể toán học nói gì.

Sửa độ tương phản thấp mà không phá hủy thiết kế của bạn

Các nhà thiết kế thường kháng cự tăng độ tương phản vì họ sợ nó sẽ làm cho thiết kế cảm thấy khắc nghiệt hoặc không tinh tế. Đây là cách tăng độ tương phản trong khi duy trì độ sáng bóng thiết kế.

Làm tối đi các văn bản, không hoàn toàn đen. Thay vì nhảy từ xám nhạt (#999999, độ tương phản kém) đến đen hoàn toàn (#000000, có thể cảm thấy khắc), hãy sử dụng xám rất tối như #1a1a1a hoặc #2a2a2a. Điều này cung cấp cho bạn tỷ lệ độ tương phản 14-16:1 trong khi vẫn cảm thấy mềm mại hơn so với đen hoàn toàn.

Làm sáng nền một chút. Nếu nền menu điều hướng của bạn là trắng hoàn toàn (#ffffff), hãy thử một xám ấm rất nhạt như #fafafa hoặc #f8f8f8. Điều này giảm chói lóa trong khi vẫn cung cấp một điểm tựa sạch sẽ.

Sử dụng màu sắc cho điểm nhấn, không phải văn bản. Nếu màu thương hiệu của bạn là một màu pastel hoặc tông giữa không thể đạt được độ tương phản 7:1 là văn bản, đừng buộc nó. Sử dụng màu trung tính độ tương phản cao cho văn bản điều hướng và dành màu thương hiệu của bạn cho gạch chân, biểu tượng, nền tô sáng khi hover, hoặc lấp đầy nút CTA.

Tăng độ dày phông chữ thay vì cường độ màu. Sử dụng độ dày phông chữ nhẹ hơn (300 hoặc 400) với một màu rất tối (#1a1a1a). Tỷ lệ độ tương phản vẫn cao trong khi trọng lượng nhẹ hơn cảm thấy ít nặng hơn so với văn bản đen đậm—hiện đại và có thể truy cập được.

Độ tương phản di động: tại sao thanh thậm chí còn cao hơn

Trên máy tính để bàn, người dùng kiểm soát môi trường của họ: độ sáng màn hình, ánh sáng xung quanh, góc nhìn. Trên thiết bị di động, họ không. Menu điều hướng của bạn có thể được xem ngoài trời dưới ánh nắng trực tiếp, trên giường với chế độ ban đêm được kích hoạt, trên màn hình nứt, hoặc trong khi đi bộ.

Đối với menu điều hướng di động cụ thể:

• Hướng tới tối thiểu 7:1, lý tưởng 10:1: Đừng chấp nhận “chỉ vượt qua” 4,5:1
• Kiểm tra ngoài trời: Đi ra ngoài vào buổi trưa và cố gắng sử dụng menu điều hướng của bạn—nếu bạn không thể, khách hàng của bạn cũng không thể
• Tránh pastel hoàn toàn: Văn bản pastel trên nền trắng hoặc sáng trở nên vô hình trên màn hình nhỏ dưới ánh sáng sáng chói
• Kiểm tra độ tương phản vùng ngón tay cái: Phần ba dưới của màn hình thường ở bóng tối từ tay người dùng—nếu menu di động của bạn ở đó, nó cần độ tương phản cao hơn

Một số chủ đề phản ứng cho phép bạn đặt màu sắc cụ thể từng thiết bị. Nếu của bạn có, hãy cân nhắc sử dụng màu sắc độ tương phản cao hơn một chút trên thiết bị di động so với máy tính để bàn.

Kiểm toán nhanhMở Contrast Checker của WebAIM ngay bây giờ và kiểm tra màu văn bản điều hướng của bạn so với nền của nó. Nếu tỷ lệ dưới 7:1, thay đổi một giá trị hex hôm nay có thể là cải thiện chuyển đổi đơn giản nhất bạn thực hiện tháng này.

Công cụ để giám sát độ tương phản liên tục

Sau khi bạn đã sửa chữa độ tương phản menu điều hướng của bạn, hãy khóa nó lại:

Tiện ích mở rộng trình duyệt: Colorblindly mô phỏng các loại mù màu khác nhau trong thời gian thực. WAVE Evaluation Tool quét bất kỳ trang nào và cờ lỗi độ tương phản với các khuyến nghị cụ thể.

Kiểm tra tự động: axe DevTools chạy trong các đường ống CI/CD và cờ các vi phạm độ tương phản trước khi mã đạt sản xuất. Chrome’s Lighthouse bao gồm kiểm tra độ tương phản trong điểm số khả năng truy cập của nó.

Tài liệu hệ thống thiết kế: Ghi lại các kết hợp màu menu điều hướng được phê duyệt của bạn với tỷ lệ độ tương phản của chúng. Điều này ngăn các nhà thiết kế trong tương lai vô tình giới thiệu các kết hợp độ tương phản thấp.

Đối với các cửa hàng sử dụng Navi+ Menu Builder, bạn có thể lưu các cài đặt sơn với tỷ lệ độ tương phản đảm bảo 7:1+ và áp dụng chúng trên tất cả các thành phần điều hướng của bạn—đảm bảo tính nhất quán và khả năng truy cập mà không cần kiểm tra thủ công từng lần.

Dòng dưới cùng

Tối thiểu WCAG 4,5:1 giữ cho bạn tuân thủ pháp lý và ngăn chặn các lỗi khả năng đọc quá tệ. Nhưng nếu bạn đang tối ưu hóa cho chuyển đổi, không chỉ tuân thủ, hướng cao hơn: 7:1 hoặc cao hơn cho tất cả văn bản điều hướng.

Sự khác biệt giữa 4,5:1 và 7:1 không tinh tế đối với người dùng. Đó là sự khác biệt giữa nheo mắt để phân tích menu của bạn và phát hiện ngay lập tức danh mục họ cần. Đó là sự khác biệt giữa điều hướng với nỗ lực và điều hướng với tự tin. Và những người dùng tự tin chuyển đổi.

Kiểm toán độ tương phản menu điều hướng hiện tại của bạn hôm nay. Tăng bất cứ thứ gì dưới 7:1. Bạn sẽ cải thiện khả năng truy cập, khả năng sử dụng, và tỷ lệ chuyển đổi với một sửa chữa.

This article is part of the larger guide on Tâm lý học màu sắc trong điều hướng: những màu nào thúc đẩy hành động?.