Khả năng truy cập màu: cách đáp ứng các tiêu chuẩn về khả năng truy cập trang web về màu sắc

Khả năng tiếp cận màu sắc của trang web về cơ bản có nghĩa là đảm bảo màu sắc đang hoạt động đúng với tiềm năng thực sự của chúng: nâng cao trải nghiệm duyệt web, không cản trở nó. Có một lầm tưởng rằng thiết kế cho khả năng tiếp cận là tất cả về sự thống trị của sự sáng tạo. Trên thực tế, thiết kế dễ tiếp cận thường dẫn đến một trang web linh hoạt và trực quan hơn cho tất cả khách truy cập. Cuối cùng, chúng tôi sẽ đi sâu vào tất cả các cân nhắc để chọn màu sắc trang web đáp ứng các tiêu chuẩn về khả năng truy cập.

Liên quan: Giá trị: Triển lãm thương mại, Sự kiện nhóm người dùng

Tổng quan ngắn gọn về khả năng truy cập trang web

Khả năng truy cập trang web là quá trình thiết kế một trang web (cả hình ảnh mặt trước và mã phía sau) hoạt động cho những người dùng có khả năng đa dạng. Có nhiều loại khuyết tật — chẳng hạn như khiếm khuyết về thị giác, thính giác và vận động — và một nhà thiết kế sẽ chọn những tình huống nào cần tập trung vào và đưa ra giải pháp.

Một số tính năng trợ năng phổ biến trên một trang web có thể bao gồm: hỗ trợ điều hướng bàn phím dễ dàng, cung cấp văn bản thay thế mô tả hình ảnh và đảm bảo rằng trang web sẽ không bị hỏng do văn bản lớn hơn. Trong bài viết này, chúng tôi sẽ tập trung vào khả năng tiếp cận màu sắc, nhưng cần phải xem lại cách hoạt động của khả năng tiếp cận nói chung.

Tìm hiểu thêm về khả năng truy cập trong thiết kế web >>

Khả năng truy cập trang web cũng là một vấn đề pháp lý ở nhiều quốc gia, với sự không tuân thủ về khả năng truy cập dẫn đến phân biệt đối xử. Ví dụ: ở Mỹ, điều này tuân theo Đạo luật Người khuyết tật Hoa Kỳ và một vụ kiện của Tòa án Tối cao năm 2019 đã tái xác nhận rằng các trang web thuộc ADA, cho phép người dùng kiện các doanh nghiệp vì không cho phép truy cập trang web của họ trong một số tình huống nhất định.

Nguyên tắc hỗ trợ tiếp cận nội dung web (WCAG) về màu sắc

Các tiêu chuẩn Internet được đưa ra bởi World Wide Web Consortium (W3C), một tổ chức toàn cầu bao gồm hàng trăm tổ chức. Đối với khả năng truy cập, W3C đã ban hành Nguyên tắc hỗ trợ tiếp cận nội dung web (WCAG) để cung cấp cho các nhà phát triển và nhà thiết kế các số liệu cụ thể để hướng tới. Chúng tôi sẽ đề cập đến WCAG trong suốt bài viết này vì nó chứa các tiêu chuẩn được quốc tế công nhận.

Lưu ý: Tại thời điểm viết bài này, ấn bản gần đây nhất là WCAG 2.1, được xuất bản vào năm 2018, nhưng WCAG 2.2 cập nhật được lên kế hoạch xuất bản vào mùa hè năm 2022.

Các hướng dẫn WCAG liên quan đến màu sắc phần lớn thuộc nhóm khiếm thị. Chúng tập trung vào độ tương phản, đảm bảo rằng văn bản có thể phân biệt rõ ràng với nền. Các hướng dẫn cũng đặc biệt chú ý đến cách màu sắc được sử dụng như một dấu hiệu trực quan, quy định rằng phải có các yếu tố khác để làm cho những dấu hiệu này trở nên rõ ràng. Màu sắc cũng phải được chỉ định trong mã định dạng chẳng hạn như CSS (ngay cả khi nó là màu trắng hoặc đen mặc định) để khả năng tiếp cận được đo chính xác.

Những khiếm khuyết thường gặp bị ảnh hưởng bởi màu sắc

Tính đến năm 2021, Tổ chức Y tế Thế giới ước tính rằng ít nhất 1 tỷ người trên toàn cầu đang sống với một số dạng khuyết tật, một con số đang tăng lên đều đặn. Nhưng đây là những trường hợp được ghi lại, có thể đo lường được. Khuyết tật tồn tại ở nhiều mức độ nghiêm trọng và một số có thể hoàn toàn không được người trải qua chúng chú ý đến. Cũng có một sự kỳ thị có thể ngăn cản ai đó tìm kiếm chẩn đoán hoặc thậm chí thừa nhận rằng họ đang bị khuyết tật.

Suy giảm cũng có thể là tạm thời và / hoặc tình huống. Ví dụ, bất kỳ người nào nhìn vào màn hình máy tính ngoài trời dưới ánh nắng gay gắt sẽ bị suy giảm thị lực do ánh nắng chói chang của mặt trời. Khả năng tự điều chỉnh độ sáng và độ tương phản của màn hình trong tình huống như vậy là một dạng công nghệ hỗ trợ mà nhà sản xuất đã cung cấp. Đây là lý do tại sao khả năng tiếp cận trong thiết kế là một vấn đề rộng lớn hơn nhiều người nhận ra. Việc tạo ra các trang web có thể truy cập không chỉ là đạo đức mà còn là lẽ thường tình.

Với ý nghĩ đó, chúng ta hãy xem xét một số suy giảm phổ biến liên quan đến nhận thức màu sắc. Tất nhiên, các khuyết tật có thể phức tạp và đa dạng, nhưng với mục đích của bài viết này, chúng tôi sẽ sử dụng các định nghĩa chung chỉ vì lợi ích của ngữ cảnh. W3C cung cấp các tài nguyên tuyệt vời nếu bạn muốn tìm hiểu chi tiết về bất kỳ khiếm khuyết nào trong số này.

• Mù màu : Cái tên “mù màu” có thể hơi gây hiểu nhầm — nó không nhất thiết có nghĩa là người đó bị mù tất cả các màu. Mức độ có thể khác nhau ở mỗi người, vì một số người chỉ mù một hoặc nhiều màu.
• Thị lực kém: Điều này mô tả một người bị suy giảm thị lực và mù hoàn toàn. Tầm nhìn của họ có thể bị mờ, không tập trung hoặc bị hạn chế (ví dụ: tầm nhìn đường hầm có nghĩa là người dùng sẽ chỉ có thể nhìn thấy trung tâm của màn hình trong khi mất trường trung tâm mô tả điều ngược lại).
• Khuyết tật về học tập và / hoặc tri giác : Những khiếm khuyết chính mà chúng ta sẽ thảo luận ở đây là rối loạn tăng động giảm chú ý (ADHD; hoặc khó tập trung trong thời gian kéo dài) và chứng khó đọc (trộn lẫn các từ trong khi đọc). Vô số màu sắc có thể gây mất tập trung trong những trường hợp này. Tuy nhiên, khi được triển khai tốt, màu sắc có thể là một công cụ vô giá để tập trung sự chú ý.

Cách sử dụng màu sắc trên trang web

Là một yếu tố thiết kế thiết yếu, màu sắc là một công cụ mạnh mẽ để giao tiếp trực quan. Nó hữu ích đến mức nó thường được thực hiện một cách trực quan, mà chúng ta không cần ý thức về cách nó đang hoạt động. Để đánh giá lại các màu được sử dụng cho khả năng truy cập, chúng ta hãy thu nhỏ và xem xét các mục đích phổ biến mà màu phục vụ trên một trang web.

Liên quan: Báo cáo khảo sát hàng quý cho thấy cảm giác của ngành về tác động của áp lực kinh tế

Nói chung, màu sắc tồn tại để mô tả đặc điểm, hướng sự chú ý và cung cấp phản hồi. Đặc biệt hơn, màu sắc được sử dụng cho…

• Thương hiệu —Một cách phối màu cụ thể là một yếu tố quan trọng trong nhận diện hình ảnh của một doanh nghiệp. Hãy nghĩ đến màu đỏ của Netflix hoặc màu xanh của Twitter. Nói cách khác, màu sắc trong trường hợp này hoạt động như một cách viết tắt trực quan cho tên thương hiệu. Mặc dù quan trọng nhưng điều này thường tồn tại trong nền, hoạt động ở cấp độ tiềm thức.
• Hệ thống phân cấp trực quan —Màu sắc có thể được sử dụng để tạo điểm nhấn và thứ tự trên một trang, cung cấp các điểm mốc trực quan để người xem hướng mắt của họ. Ví dụ: toàn bộ các phần của trang web có thể được tô màu khác nhau để báo hiệu chủ đề nội dung khác nhau. Ở quy mô nhỏ hơn, một hộp màu nhạt có thể bao quanh nội dung ít ưu tiên hơn, chẳng hạn như một mẹo công cụ.
• Phản hồi trực quan —Màu sắc có thể cho biết liệu người dùng đã hoàn thành một hành động thành công hay chưa. Màu đỏ và xanh lá cây là những màu phổ biến nhất được sử dụng cho mục đích này — dấu kiểm màu xanh lá cây khi người dùng đánh dấu vào hộp hoặc dấu ‘X’ màu đỏ khi người dùng nhấp vào thứ gì đó mà họ không có quyền truy cập (mù màu đỏ / xanh lá cây cũng xảy ra nhân tiện).
• Trực quan hóa dữ liệu —Màu sắc làm cho các biểu đồ và đồ thị phức tạp dễ đọc hơn. Điều này đặc biệt đúng trong trường hợp biểu đồ hình tròn, nơi các màu được hiển thị cạnh nhau.
• Văn bản tương tác —Màu sắc có thể đánh dấu sự khác biệt giữa những gì được đọc thụ động và những gì có thể nhấp được. Ví dụ phổ biến nhất là văn bản siêu liên kết thường có màu xanh lam.

Mẹo thiết kế bảng phối màu trang web có thể truy cập

Nếu không có thêm bất kỳ điều gì, hãy cùng tìm hiểu cách bạn có thể áp dụng các nguyên tắc trợ năng cho việc phối màu trên thiết kế trang web. Trước khi chúng ta bắt đầu, hãy đảm bảo rằng bạn đã tìm hiểu những kiến ​​thức cơ bản về lý thuyết màu sắc, đặc biệt là bánh xe màu.

Hiểu những điều cơ bản về độ tương phản

Khi bạn nghĩ về nó, độ tương phản thực sự là tất cả các màu sắc. Nếu mọi thứ đều có cùng một màu, sẽ không có gì để nhìn thấy. Công việc cơ bản nhất của màu sắc trong thiết kế web là làm cho thứ gì đó nổi bật trên màn hình: câu hỏi đặt ra là ở mức độ nào và liên quan đến các yếu tố nào khác.

Sự tương phản là cách các nhà thiết kế thể hiện một cách trực quan sự khác biệt giữa các đối tượng thiết kế. Nó có thể được đo trên thang điểm từ cao đến thấp. Một bảng màu tương tự sẽ là một ví dụ về độ tương phản thấp vì các màu chủ yếu giống nhau. Mặt khác, một bảng phối màu bổ sung sẽ có độ tương phản cao, vì đây là những điểm đối lập trên bánh xe màu.

Một cách để nghĩ về độ tương phản màu là về giá trị. Giá trị (trong nghệ thuật) đề cập đến độ sáng hoặc tối của một màu. Khi một người mù màu hoặc thị lực kém nhìn vào màn hình, giá trị là những gì họ sẽ thấy thay vì các màu cụ thể. Tạo ra lượng tương phản cao để tạo ra bóng tối và ánh sáng.

WCAG cung cấp các tỷ lệ được khuyến nghị cho độ tương phản giữa văn bản và nền. Những điều này có thể thay đổi dựa trên kích thước của văn bản (văn bản lớn hơn yêu cầu độ tương phản ít hơn để hiển thị) và mức độ cao của tiêu chuẩn bạn muốn tuân thủ. WCAG xếp hạng thành công ở các cấp độ khác nhau, với AA đại diện cho việc tuân thủ khả năng tiếp cận tối thiểu và AAA đại diện cho tiêu chuẩn cao nhất.

Tiêu chuẩn tương phản mức AA

• 4,5: 1 cho văn bản nhỏ hơn 18pt
• 3: 1 cho văn bản lớn hơn 18pt

Tiêu chuẩn tương phản mức AAA

• 7: 1 cho văn bản nhỏ hơn 18pt
• 4,5: 1 cho văn bản lớn hơn 18pt

Cách dễ nhất để biết liệu một bảng màu có phù hợp với tỷ lệ này hay không là sử dụng một công cụ kiểm tra độ tương phản trực tuyến, trong đó có một số công cụ. Một số cái phổ biến là Stark (một plugin cho Sketch), Adobe Color và Contrast. Ngoài những điều này, tìm kiếm trên google về “công cụ kiểm tra độ tương phản màu” sẽ cung cấp cho bạn nhiều tùy chọn để thử.

Thông thường, những điều này sẽ yêu cầu bạn tìm mã hex của màu nền / nền trước của bạn (mã sáu chữ số đứng trước dấu thăng thể hiện các màu cụ thể) và nhập mã đó vào phần mềm. Điều quan trọng cần lưu ý là ‘1’ trong các tỷ lệ nói trên đại diện cho màu nền của bạn và một số công cụ kiểm tra độ tương phản sẽ bỏ qua số này.

Tạo bảng màu trang web có thể truy cập trước thời hạn

Màu sắc trang web không tồn tại trong môi trường chân không mà phải hoạt động đồng bộ với nhau. Đó là lý do tại sao điều quan trọng là phải lên kế hoạch phối màu dễ tiếp cận trước thời hạn để đảm bảo rằng màu sắc hài hòa trong khi vẫn đáp ứng các tiêu chuẩn WCAG về độ tương phản.

Liên quan: GASC phát hành Đồ thị Expo 16 Hình cho Orlando; PRINT 17 Quay trở lại Chicago

Ngoài các màu thương hiệu được thiết lập sẵn là một phần của nhận dạng trực quan, các nhà thiết kế web thường cần tính đến một số kịch bản màu khác nhau: bao gồm màu nhấn (thường được sử dụng cho các nút), màu phản hồi (như tín hiệu màu mà người dùng đang trực tuyến), và các giai đoạn khác nhau của siêu kết nối (di chuột, nhấp trước và nhấp sau). Họ cũng sẽ cần phải quyết định các tông màu trung tính cụ thể (thường là trên phổ trắng, xám và đen) thường được sử dụng cho nền, bản sao nội dung và tiêu đề.

Từ đây, việc đơn giản là kiểm tra các màu này (sử dụng công cụ kiểm tra độ tương phản đã đề cập trong phần trước) để đảm bảo chúng nằm trong tỷ lệ tương phản có thể chấp nhận được. May mắn thay, bạn không phải kiểm tra tất cả những điều này về độ tương phản với nhau mà chỉ kiểm tra những điều này trong mối quan hệ nền / tiền cảnh.

Ngoài nền tổng thể của trang web, hãy lưu ý các màu khác sẽ làm nền cho văn bản, chẳng hạn như trường biểu mẫu hoặc hộp thông tin. Và tất nhiên, màu nhấn phải có độ tương phản cao nhất trong tất cả các màu vì nó có nghĩa là nổi bật nhất và được sử dụng một cách tiết kiệm.

Bổ sung màu sắc với các yếu tố thiết kế bổ sung

Một trang web cũng có thể nằm dưới tiêu chuẩn khả năng truy cập nếu màu sắc là chỉ báo duy nhất cho nội dung quan trọng. Các nhà thiết kế web nên bổ sung các chỉ báo màu sắc với các yếu tố khác, chẳng hạn như biểu tượng, văn bản hoặc hoạt ảnh.

Ví dụ: nếu trường biểu mẫu chuyển sang màu đỏ khi nhập sai mật khẩu, điều này sẽ khiến người khiếm thị dễ dàng bỏ sót. Để giảm thiểu điều này, các nhà thiết kế UX thường thêm ít nhất một trong những điều sau: mẹo công cụ có nội dung “Mật khẩu không chính xác”, biểu tượng dấu chấm than và / hoặc hoạt ảnh lắc trên toàn bộ trường biểu mẫu.

Tương tự, ứng dụng quản lý dự án Trello cho phép người dùng tô màu mã các mục bằng nhãn. Nhưng họ cũng cung cấp một chế độ thân thiện với người mù màu, bổ sung thêm họa tiết cho các nhãn, làm cho sự khác biệt giữa chúng rõ ràng hơn.

Sử dụng màu sắc như một công cụ hỗ trợ

Thiết kế màu sắc cho khả năng tiếp cận không chỉ là lập kế hoạch cho một kịch bản không có màu sắc. Trong một số trường hợp, màu sắc có thể là một công cụ hữu ích để hỗ trợ người xem đọc trang.

Trong trường hợp một người mắc chứng khó đọc có thể gặp khó khăn khi đọc một đoạn văn bản, một chế độ đặc biệt có thể sử dụng màu sắc để đánh dấu một từ hoặc cụm từ tại một thời điểm. Đây là một chiến lược phổ biến được sử dụng bởi các ứng dụng để học ngoại ngữ thông qua đọc, chẳng hạn như Beelinguapp. Để có điểm thưởng, các nhà thiết kế có thể bao gồm đường viền hoặc biểu tượng ngón tay trỏ để bổ sung màu nổi bật.

Màu sắc trang web có thể truy cập mang lại lợi ích cho mọi người

Khả năng tiếp cận không chỉ là giải quyết các trường hợp cạnh độc đáo và hiếm gặp. Trên thực tế, rất nhiều người dùng sẽ phải đối mặt với một dạng khiếm thị (dù là tạm thời hay vĩnh viễn) vào một thời điểm nào đó trong cuộc sống hàng ngày của họ mà các doanh nghiệp không thể bỏ qua khả năng tiếp cận.

Tin tốt là có các hướng dẫn và công cụ rõ ràng để hỗ trợ người dùng khuyết tật. Tất nhiên, việc lựa chọn màu sắc tốt phụ thuộc vào nhiều thứ hơn là tỷ lệ và toán học — nó là một hình thức nghệ thuật. Đó là lý do tại sao khi bạn cần một bảng phối màu trang web vừa có thể truy cập vừa có hình ảnh bắt mắt, điều quan trọng là đảm bảo rằng bạn đang làm việc với một nhà thiết kế hiểu biết.