Tính dễ dùng – Chọn tổ hợp màu giữ mọi chữ rõ ràng cho mọi người truy cập

Khả năng sử dụng bắt đầu từ việc đọc được. Một trang có thể có cấu trúc rõ ràng, tải nhanh và điều hướng chu đáo, nhưng nếu các chữ chìm vào nền, khách truy cập sẽ rời đi. Việc chọn tổ hợp màu giữ mọi chữ rõ ràng cho mọi người truy cập vì vậy là một quyết định thiết kế thực tế, không chỉ là sở thích trang trí. Mục tiêu rất đơn giản: giúp chữ dễ nhìn trong các điều kiện khác nhau, trên các màn hình khác nhau, và với những người có khả năng nhìn khác nhau.

Tại sao tỷ lệ tương phản màu sắc lại quan trọng

Tương phản màu sắc là sự khác biệt về độ sáng được cảm nhận giữa chữ và bề mặt phía sau nó. Tương phản mạnh giúp hình dạng chữ rõ ràng, giúp mọi người phân biệt dấu câu và ngắt dòng, đồng thời giảm nỗ lực để lướt xem trang. Tương phản yếu có thể trông thanh lịch trong bản thiết kế, nhưng lại trở nên khó chịu dưới ánh sáng ban ngày, trên màn hình chất lượng thấp, hoặc với những người có thị lực kém hơn.

Tương phản cũng ảnh hưởng đến sự hiểu. Khi người đọc phải căng mắt để giải mã chữ, họ mất đi sự chú ý đáng lẽ nên dành cho nội dung. Điều này đặc biệt quan trọng với hướng dẫn, giá cả, nhãn biểu mẫu, thông báo lỗi và lời kêu gọi hành động. Nếu khách truy cập không đọc được bước tiếp theo, trang đó không thể sử dụng được, ngay cả khi bố cục hấp dẫn.

Bắt đầu với tỷ lệ tương phản màu sắc tốt nhất cho văn bản dễ đọc trên trang web

Một điểm khởi đầu hữu ích là hiểu tỷ lệ tương phản. Thang đo là hàm logarit, nên những con số trông nhỏ có thể biểu thị sự khác biệt có ý nghĩa. Nói chung, hãy nhắm vào ít nhất 4,5:1 cho chữ thông thường và ít nhất 3:1 cho chữ lớn. Chữ lớn thường được định nghĩa là ít nhất 18pt hoặc 14pt in đậm, mặc dù ngưỡng chính xác có thể thay đổi tùy theo tiêu chuẩn. Với thông tin quan trọng, tương phản cao hơn sẽ an toàn hơn.

Các mục tiêu này không phải tùy ý. Chúng mô tả rõ chữ nổi bật so với nền như thế nào trong một loạt các tình huống xem. Tỷ lệ gần ngưỡng tối thiểu có thể vượt qua kiểm tra kỹ thuật nhưng vẫn cảm thấy khó chịu khi sử dụng thực tế, nên coi các ngưỡng này là mức tối thiểu thay vì mục tiêu cần đạt đúng.

Danh sách kiểm tra tương phản thực tế

• Kiểm tra mọi kiểu chữ. Kiểm tra tiêu đề, đoạn văn, liên kết, placeholder, nhãn bị vô hiệu hóa, chú thích và chữ trên hình ảnh.
• Kiểm tra cả hai trạng thái. Trạng thái di chuột, tiêu điểm, hoạt động, đã truy cập, lỗi và thành công có thể thay đổi màu và giảm tương phản.
• Kiểm tra chữ nhỏ trước. Nếu nhãn nhỏ nhất đọc được, chữ lớn thường có nhiều không gian hơn để thở.
• Kiểm tra hình ảnh nền. Chữ đặt trên ảnh cần lớp phủ nguyên khối, bóng mạnh hoặc vị trí khác.

Chọn tổ hợp có tiền cảnh và nền rõ ràng

Độ dễ đọc được cải thiện khi màu tiền cảnh rõ ràng tối hơn hoặc sáng hơn so với nền. Tránh các cặp có độ sáng gần nhau, ngay cả khi chúng trông hấp dẫn khi kết hợp. Xám nhạt trên trắng, xanh nhạt trên xanh và các màu pastel bão hòa thấp trên kem là những ví dụ phổ biến có thể thất bại trong thực tế.

Bắt đầu với một nền trung tính, sau đó thêm các màu nhấn cho liên kết và điều khiển. Giữ chữ thân ở màu tương phản cao như gần đen trên nền sáng hoặc gần trắng trên nền tối. Nếu bạn muốn vẻ ngoài mềm mại hơn, hãy điều chỉnh nền một chút thay vì làm chữ quá mờ. Một trang thoải mái vẫn có thể cảm thấy yên tĩnh mà không hy sinh khả năng đọc.

Sử dụng màu có ý nghĩa, không phải là tín hiệu duy nhất

Mùa rất hữu ích cho việc nhóm và nhấn mạnh, nhưng nhiều khách truy cập không thể phân biệt mọi màu. Đỏ và xanh lá cây có thể trông giống nhau với một số người đọc, và liên kết màu xanh có thể bị bỏ qua nếu chúng giống chữ thông thường. Kết hợp màu với gạch chân, biểu tượng, nhãn hoặc đường viền tiêu điểm rõ ràng. Điều này giúp ý nghĩa có sẵn khi khả năng感知 màu bị hạn chế hoặc khi màn hình được xem ở chế độ xám.

Tính đến điều kiện xem thực tế

Các đánh giá thiết kế thường diễn ra trên màn hình được hiệu chuẩn trong phòng yên tĩnh. Khách truy cập đọc trên điện thoại dưới ánh sáng mặt trời rực rỡ, trên máy tính xách tay cũ hoặc trong phòng tối với độ sáng tự động được bật. Những điều kiện này giảm tương phản hiệu quả. Một tổ hợp có vẻ ổn trong công cụ thiết kế có thể trở nên mờ nhạt khi ánh chói, độ sáng thấp hoặc tuổi thọ màn hình xuất hiện.

Chế độ tối xứng đáng được quan tâm như nhau. Đảo màu không đảm bảo khả năng đọc. Một số chủ đề tối sử dụng chữ trắng tinh trên nền đen tinh, có thể cảm thấy khắc nghiệt, trong khi những chủ đề khác sử dụng chữ xám trở nên quá mờ. Kiểm tra cả hai chủ đề một cách độc lập và giữ các yếu tố tương tác hiển thị trong mỗi chủ đề.

Kiểm tra bằng công cụ, sau đó xác nhận bằng phán đoán của con người

Công cụ kiểm tra tương phản tự động rất hữu ích cho các kiểm tra nhanh. Nhập màu tiền cảnh và nền, xem lại tỷ lệ và kiểm tra kết quả cho mỗi kiểu chữ. Chạy kiểm tra trên mọi mẫu trang, bao gồm các thành phần được sử dụng lại trên toàn trang. Tuy nhiên, công cụ tự động không thể hiểu bối cảnh: chúng không biết chữ có nằm trên hình ảnh chuyển động hay không, liệu bóng có thay đổi nền không, hoặc liệu một trạng thái có quá tinh tế để nhận ra hay không.

Theo dõi kết quả công cụ bằng đánh giá trực quan. Thu phóng trang, xem ở khoảng cách tay, chuyển sang chế độ xám và thử trang trên điện thoại. Hỏi người có thị lực hoặc sở thích ánh sáng khác để đọc. Nếu một câu cần nhìn lại, hãy đơn giản hóa lựa chọn màu.

Xây dựng hệ thống màu có thể lặp lại

Các trang dễ đọc hơn khi màu được định nghĩa một lần. Tạo một bảng màu nhỏ với các vai trò được đặt tên như nền trang, chữ chính, chữ phụ, liên kết, viền và lỗi. Ghi lại tương phản dự kiến cho mỗi vai trò và giữ các phương án thay thế cho chế độ tối. Khi một thành phần mới xuất hiện, hãy sử dụng hệ thống thay vì tạo một cặp màu mới.

Cũng xem xét tiêu điểm tương tác. Người dùng bàn phím cần đường viền rõ ràng tách biệt phần tử đang hoạt động khỏi xung quanh. Màu tiêu điểm với tương phản không đủ gần như không hiệu quả bằng việc không có chỉ báo tiêu điểm. Kiểm tra trạng thái tiêu điểm với sự chú ý như nhau như với chữ thân.

Biến khả năng đọc thành trách nhiệm chung

Lựa chọn màu ảnh hưởng đến biên tập viên, nhà thiết kế, lập trình viên và biên tập nội dung. Một biên tập viên có thể thêm nhãn ngắn lên hình ảnh chính; một lập trình viên có thể thay đổi trạng thái nút; một biên tập viên có thể áp dụng đánh dấu. Các quy tắc rõ ràng ngăn chặn những thay đổi nhỏ phá vỡ khả năng đọc một cách thầm lặng. Bao gồm kiểm tra tương phản trong các đánh giá thiết kế, đánh giá mã và mẫu nội dung.

Kết quả không phải là một giao diện cứng nhắc hay vô hồn. Tương phản chu đáo mang lại nền tảng ổn định cho trang, giúp kiểu chữ, khoảng cách và hình ảnh thực hiện công việc của chúng. Khi mọi chữ vẫn hiển thị cho mọi khách truy cập, trang trở nên dễ sử dụng hơn, dễ tin cậy hơn và dễ quay lại hơn.