Cải thiện khả năng đọc và trải nghiệm người dùng của trang web của bạn với độ tương phản đầy đủ
Tương phản đóng một vai trò quan trọng trong sự thành công của bất kỳ thiết kế trang web nào. Từ kiểu chữ của trang web đó, đến hình ảnh được sử dụng trên trang web, tương phản giữa các yếu tố nền trước và màu nền - trang web được thiết kế tốt phải có độ tương phản đầy đủ trong tất cả các khu vực này để đảm bảo trải nghiệm người dùng chất lượng và thành công lâu dài của trang web.
Độ tương phản thấp tương đương với trải nghiệm đọc kém
Các trang web có độ tương phản quá thấp có thể khó đọc và sử dụng, điều này sẽ có tác động tiêu cực đến thành công của bất kỳ trang web nào. Các vấn đề tương phản màu kém thường dễ xác định. Bạn thường có thể làm như vậy chỉ bằng cách tìm một trang được hiển thị trong trình duyệt web và bạn có thể xem liệu văn bản có quá khó đọc không vì lựa chọn màu sắc kém. Tuy nhiên, trong khi nó có thể dễ dàng để xác định màu sắc không hoạt động tốt với nhau, nó thực sự có thể rất khó khăn để quyết định những màu sắc làm việc tốt trái ngược với những người khác. Bạn có thể không phải những gì không hoạt động, nhưng làm thế nào bạn sẽ xác định những gì không hoạt động? Hình ảnh trong bài viết này sẽ giúp cho bạn thấy nhiều màu sắc khác nhau và cách chúng tương phản như màu nền trước và nền sau. Bạn có thể thấy một số cặp "tốt" và một số ghép nối "nghèo", điều này sẽ giúp bạn thực hiện các lựa chọn màu sắc phù hợp trong các dự án của bạn.
Về độ tương phản
Một điều bạn nên lưu ý là độ tương phản không chỉ là màu sắc tươi sáng so với nền. Như bạn sẽ thấy trong hình ảnh nói trên, một số màu sắc này rất sáng và hiển thị rực rỡ trên màu nền - chẳng hạn như màu xanh lam trên nền đen, nhưng tôi vẫn gắn nhãn nó là có độ tương phản kém. Tôi đã làm điều này bởi vì, trong khi nó có thể được tươi sáng, sự kết hợp màu sắc vẫn làm cho văn bản khó đọc. Nếu bạn đã tạo một trang trong tất cả văn bản màu xanh trên nền đen, người đọc của bạn sẽ bị mỏi mắt rất nhanh. Đây là lý do tại sao độ tương phản không chỉ là màu đen và trắng (có, đó là trò chơi chữ được dự định). Có những quy tắc và thực hành tốt nhất cho sự tương phản, nhưng với tư cách là một nhà thiết kế, bạn phải luôn luôn đánh giá các quy tắc đó để đảm bảo rằng chúng hoạt động trong trường hợp cụ thể của bạn.
Chọn màu
Độ tương phản chỉ là một trong những yếu tố cần xem xét khi lựa chọn màu sắc cho thiết kế trang web của bạn, nhưng nó là một yếu tố quan trọng. Khi chọn màu, hãy chú ý đến các tiêu chuẩn thương hiệu cho công ty, nhưng cũng sẵn sàng giải quyết các bảng màu, trong khi chúng có thể phù hợp với các nguyên tắc thương hiệu của tổ chức, không hoạt động tốt trực tuyến. Ví dụ, tôi đã luôn luôn tìm thấy màu xanh lá cây màu vàng và tươi sáng để được terribly thách thức để sử dụng hiệu quả trên các trang web. Nếu những màu này nằm trong các nguyên tắc thương hiệu của công ty, chúng có thể sẽ chỉ được sử dụng làm màu nhấn, vì khó tìm được các màu tương phản tốt với một trong hai màu đó.
Tương tự, nếu màu sắc thương hiệu của bạn có màu đen và trắng, điều này có nghĩa là độ tương phản tuyệt vời, nhưng nếu bạn có một trang web có số lượng văn bản dài, thì nền đen với văn bản màu trắng sẽ khiến việc đọc rất khó. Ngay cả sự tương phản giữa màu đen và trắng là rất tốt, văn bản màu trắng trên nền đen gây mỏi mắt cho đoạn dài. Trong trường hợp này, tôi sẽ đảo ngược các màu để sử dụng văn bản màu đen trên nền trắng. Điều đó có thể không được quan tâm trực quan, nhưng bạn sẽ không tìm thấy độ tương phản tốt hơn thế!
Công cụ trực tuyến
Ngoài ý nghĩa thiết kế của riêng bạn, có một số công cụ trực tuyến mà bạn có thể sử dụng để kiểm tra lựa chọn màu sắc của trang web của mình.
CheckMyColors.com sẽ kiểm tra tất cả các màu của trang web của bạn và báo cáo về tỷ lệ tương phản giữa các phần tử trên trang.
Ngoài ra, khi suy nghĩ về lựa chọn màu sắc, bạn cũng nên xem xét khả năng truy cập trang web và những người có hình thức mù màu. WebAIM.org có thể trợ giúp điều này, cũng như ContrastChecker.com, nó sẽ kiểm tra các lựa chọn của bạn dựa trên các nguyên tắc của WCAG.