Sử dụng độ tương phản màu cao để thiết kế dễ tiếp cận hơn
Tỷ lệ thoát cao thường được gây ra bởi khả năng truy cập hình ảnh kém của trang web. Khi phông chữ quá nhỏ, hoặc chúng khó đọc, khi có quá nhiều phiền nhiễu hoặc không đủ khoảng trắng, nhiều người chỉ rời khỏi trang web mà không có ý nghĩ thứ hai.
Một trong những lý do thường xuyên nhất để từ bỏ sớm là lựa chọn kém phối màu làm giảm khả năng đọc của nội dung.
Theo thống kê của WHO, có khoảng 285 triệu người khiếm thị trên toàn thế giới, nhiều người trong số họ bị mù một phần hoặc hoàn toàn màu. Những người khiếm thị nhìn thấy màu sắc khác nhau, vì vậy tránh độ tương phản màu thấp trong các thiết kế của chúng tôi là không thể tránh khỏi nếu chúng tôi muốn cung cấp cho khách hàng của chúng tôi một trang web thân thiện và dễ sử dụng.
Tiêu chuẩn web cho độ tương phản màu
Tỷ lệ tương phản màu đo sự khác biệt về độ tương phản giữa hai màu. Giá trị càng cao, càng dễ phân biệt đối tượng (văn bản, hình ảnh, đồ họa) ở nền trước với nền.
Màu sắc có thể tương phản theo nhiều cách khác nhau, chẳng hạn như trong màu sắc, giá trị và bão hòa. Tỷ lệ tương phản màu được tính theo công thức do W3C, tổ chức tiêu chuẩn quốc tế chính của World Wide Web cung cấp.
Nó có thể mất một giá trị giữa 1: 1 (không tương phản chút nào, nền trước và nền sau có cùng màu) và 21: 1 (độ tương phản tối đa chỉ tồn tại giữa đen và trắng).
Nguyên tắc truy cập nội dung web mới nhất (WCAG) 2.0 của W3C cung cấp cho các nhà phát triển web và người tạo nội dung điểm chuẩn cho mức tối thiểu (Cấp độ AA) và giá trị tương phản (Cấp độ AAA) nâng cao của tỷ lệ tương phản màu chấp nhận được.
Cấp độ AA yêu cầu ít nhất Tỷ lệ 4,5: 1 cho văn bản thông thường, và 3: 1 cho văn bản lớn. Dễ dàng hơn nhiều để đọc văn bản lớn như phụ đề, đó là lý do tại sao nó cần độ tương phản màu thấp hơn.
Nếu bạn muốn đạt Cấp độ AAA là cấp độ nâng cao, bạn cần thiết kế bảng màu của mình một cách cẩn thận hơn, vì nó yêu cầu ít nhất Tỷ lệ tương phản 7: 1 cho văn bản bình thường, và 4,5: 1 cho lớn. Nếu một văn bản là một phần của logo hoặc tên thương hiệu, không có yêu cầu tương phản màu tối thiểu ở cấp độ WCAG.
Chúng tôi chỉ có thể gọi một trang web có thể truy cập trực quan nếu tỷ lệ tương phản màu giữa mọi đối tượng nền trước và nền của nó đạt ít nhất Cấp độ AA.
Lợi ích của tỷ lệ tương phản màu cao
Bằng cách đảm bảo khả năng đọc tốt hơn, bạn không chỉ thu hút người dùng khiếm thị mà còn những người đọc nội dung của bạn trên màn hình nhỏ chẳng hạn như trên điện thoại thông minh hoặc đồng hồ thông minh, trong số điều kiện ánh sáng xấu, và hơn thế nữa màn hình chất lượng thấp hơn.
Mọi người cũng đọc nhanh hơn khi có độ tương phản cao hơn giữa văn bản và nền, vì vậy rất có thể sẽ mất nhiều thời gian hơn để họ cảm thấy nhàm chán với nội dung của trang web.
Nếu bạn lo lắng rằng việc áp dụng tỷ lệ tương phản cao hơn sẽ có tác động tiêu cực đến tính thẩm mỹ của thiết kế của bạn, bạn cần kiểm tra dự án web Tương phản nổi bật, với các ví dụ thực tế, việc tuân thủ các quy tắc tỷ lệ tương phản cao vẫn có thể dẫn đến trong các thiết kế hấp dẫn và mát mẻ.
Ứng dụng để kiểm tra độ tương phản màu
Có rất nhiều công cụ miễn phí tuyệt vời trên web có thể giúp các nhà thiết kế kiểm tra tỷ lệ tương phản màu sắc của trang web của họ.
Cách dễ nhất để kiểm tra thiết kế của bạn về độ tương phản màu là chọn các màu chính bằng Photoshop hoặc một phần mở rộng trình duyệt phù hợp như của Firefox này và sao chép các giá trị vào một trong các ứng dụng bên dưới.
Điều quan trọng nhất cần nhớ là bạn luôn cần phải so sánh màu nền trước như màu văn bản với vùng xung quanh của nó (màu nền).
1. Trình kiểm tra độ tương phản màu của WebAim
WebAim (Web Access In Mind) là một tổ chức quảng bá khả năng truy cập web cung cấp cho nhà phát triển trình kiểm tra độ tương phản màu đơn giản nhưng đáng tin cậy trong số nhiều công cụ trợ năng tuyệt vời khác như Wave, một ứng dụng đánh giá khả năng truy cập chung có thể giúp bạn nhanh chóng đánh giá các vấn đề về khả năng truy cập trang web của bạn.
Trình kiểm tra độ tương phản màu của WebAim cho bạn biết nếu màu sắc của bạn vượt qua các bài kiểm tra WCAG AA và AAA, cả cho văn bản bình thường và lớn.
2. Kiểm tra độ tương phản màu Snook
Jonathan Snook, hiện đang làm việc với tư cách là nhà phát triển front-end hàng đầu tại Shopify, đã lưu trữ công cụ kiểm tra độ tương phản màu tiện dụng của mình trong hơn một thập kỷ. Ứng dụng của Snook cho phép bạn thay đổi giá trị HSL và RGB bằng cách sử dụng màu nền trước và màu nền từng cái một thanh trượt phạm vi thuận tiện cho đến khi bạn đạt được kết quả tương thích với điểm chuẩn WCAG 2.0.
CheckMyColours
CheckMyColours được tạo bởi Giovanni Scala cho phép bạn kiểm tra tỷ lệ tương phản màu của tất cả các kết hợp màu nền trước trên một trang web trực tiếp.
Nó tính toán tỷ lệ tương phản độ sáng, độ sáng chênh lệch, và sự khác biệt màu sắc, và cung cấp cho bạn một báo cáo đầy đủ về kết quả. Báo cáo của CheckMyColours có thể hỗ trợ đáng kể cho sự hiểu biết của bạn về cách bạn có thể cải thiện khả năng truy cập trực quan của trang web của mình.
Nhà thiết kế phối màu
Color Scheme Designer không đặc biệt là trình kiểm tra độ tương phản màu, mà là một công cụ cho thiết kế phối màu hoàn chỉnh.
Chúng tôi đưa nó vào bộ sưu tập này, bởi vì nó có một tính năng cho phép bạn xem cách phối màu của bạn được cảm nhận bởi những người có các loại khuyết tật thị giác khác nhau. Bạn có thể kiểm tra màu sắc của mình để biết mù màu đầy đủ, protanopy, deuteranopy và nhiều khiếm khuyết thị giác khác. Ứng dụng này có phiên bản mới hơn gọi là Paletton, thậm chí có thể mô phỏng tầm nhìn phức tạp hơn (bạn cũng có thể kiểm tra những thứ như màn hình LED tệ hại hoặc màn hình CRT yếu).
W3C cũng cung cấp cho bạn Danh sách các công cụ đánh giá khả năng truy cập Web khổng lồ nơi bạn có thể tìm thấy nhiều công cụ tương phản màu khác như Bánh xe màu khả năng truy cập hữu ích này.
Mẹo để tạo trang web có thể truy cập trực quan
Nếu bạn muốn tạo một trang web có thể truy cập trực quan, luôn luôn là một ý tưởng hay tránh sử dụng màu sắc một mình để truyền đạt chức năng hoặc ý nghĩa. Các biểu tượng thay đổi màu sắc dựa trên trạng thái hiện tại của chúng là ví dụ điển hình cho việc này.
Nếu có thể, luôn luôn thiết kế thêm tín hiệu thị giác hỗ trợ những người nhìn thấy màu sắc khác nhau trong việc hiểu chức năng.
Không bao giờ quên chú ý hơn đến độ tương phản màu của các nút, liên kết và menu, vì chúng là phương tiện điều hướng trên trang web của bạn. Nếu người dùng không thể điều hướng dễ dàng trên trang web của bạn, bạn sẽ nhanh chóng mất họ. Màu sắc có thể truy cập cho các nút kêu gọi hành động cũng quan trọng cho tỷ lệ chuyển đổi tốt.
Đó là một quy trình công việc tốt để kiểm tra tỷ lệ tương phản màu càng sớm càng tốt trong quy trình thiết kế vì sẽ khó thuyết phục khách hàng của bạn thay đổi bảng màu của trang web sau này trong quá trình thiết kế.
Đọc ngay: Cách tiếp cận thực tế để chọn phối màu trang web
