KHẢ NĂNG TIẾP CẬN MÀU SẮC: CÁCH ĐẠT CÁC TIÊU CHUẨN TIẾP CẬN MÀU SẮC CHO WEBSITE

Màu sắc là một công cụ mạnh mẽ định hình nên kết nối tức thời của website với khách truy cập. Nó có thể đóng góp vào một ấn tượng ban đầu mạnh mẽ thông qua một sự thẩm mỹ dễ chịu. Nó có thể hướng sự chú ý của khách truy cập vào những thành phần quan trọng nhất trong website. Trên tất cả, nó có thể định ra tông giọng, đánh dấu sự khác biệt giữa sáng sủa và thân thiện hay tâm trạng và trơn láng. Nhưng yếu tố thiết kế giá trị như vậy lại trở thành một rào cản khi nhà thiết kế thất bại trong việc tính đến những cách mà người dùng nhìn thấy màu sắc. Đó là lý do vì sao việc quan trọng là thiết kế một website luôn luôn để ý tới khả năng tiếp cận màu sắc.

Minh họa bởi OrangeCrush

Hướng tới khả năng tiếp cận đối với màu sắc website thực ra có nghĩa là cần đảm bảo màu sắc sẽ thể hiện đúng vai trò và tiềm năng của nó: cải thiện chứ không phải cản trở trải nghiệm duyệt web. Có một huyền thoại rằng thiết kế hướng tới khả năng tiếp cận chính là cảnh giới của sáng tạo. Với khía cạnh này, chúng tôi sẽ đào sâu vào tất cả các cân nhắc để lựa chọn màu sắc website đáp ứng những tiêu chuẩn về khả năng tiếp cận..

Một cái nhìn tổng quan về thiết kế khả năng tiếp cận website

—

Thiết kế khả năng tiếp cận website là quá trình thiết kế một website (cả phần hình ảnh của front-end và mã nguồn của backend) có thể sử dụng bởi nhiều nhóm người khuyết tật khác nhau. Có nhiều phân loại khuyết tật – như hạn chế về tầm nhìn, khả năng nghe, và khuyết tật vận động – và một nhà thiết kế sẽ chọn tập trung vào những tình huống nào và tạo ra giải pháp cho những tình huống đó.

Một vài tính năng tiếp cận phổ biến trên một website có thể bao gồm: hỗ trợ điều hướng bàn phím dễ dàng, cung cấp text thay thế miêu tả hình ảnh, và đảm bảo website sẽ không bị vỡ khi hiển thị ở cỡ chữ lớ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 nó vẫn đáng để bạn xem lại cách thiết kế khả năng tiếp cận website một cách tổng thể.

Minh họa bởi pwsatya

Khả năng tiếp cận website cũng là một vấn đề pháp lý ở nhiều quốc gia, với việc không tuân thủ đảm bảo khả năng tiếp cận đồng nghĩa với phạm pháp. Ví dụ như ở Mỹ, mùa thu này, dưới hiệu lực của Đạo luật Người khuyết tật 2019, Tòa án tối cao tái khẳng định rằng các website là đối tượng áp dụng của đạo luật này, cho phép người dùng kiện các doanh nghiệp không đảm bảo khả năng tiếp cận website trong một số trường hợp nhất định.

Bộ hướng dẫn khả năng tiếp cận màu sắc dành cho nội dung web

Những tiêu chuẩn internet được biên soạn bởi World Wide Web Consortium (W3C), một liên minh của hàng trăm tổ chức. Đối với khả năng tiếp cận, W3C đã ban hành bộ Hướng dẫn về khả năng tiếp cận màu sắc dành cho nội dung web (WCAG) để đưa ra cho các nhà phát triển và nhà thiết kế những thông số cụ thể cần hướng tới. Chúng tôi sẽ nhắc tới WCAG trong suốt bài viết này bởi nó bao gồm những tiêu chuẩn được công nhận toàn cầu.

Thiết kế bởi Hiroshi

Chú ý: ở thời điểm viết bài này, phiên bản mới nhất là WCAG 2.1, được phát hành năm 2018, nhưng phiên bản cập nhật WCAG 2.2 được lên kế hoạch phát hành vào mùa hè 2022.

WCAG hướng dẫn rằng màu sắc thuộc loại những khuyết tật về hình ảnh. Những khiếm khuyết này tập trung vào độ tương phản, đảm bảo rằng text được phân biệt rõ ràng với lớp nền. Bộ hướng dẫn của quan tâm đặc biệt tới cách màu sắc được dùng như là một gợi ý hình ảnh, khuyến nghị rằng phải có những thành phần thiết kế khác để khiến những gợi ý này rõ ràng. Màu sẵng cũng phải được chỉ rõ bằng mã định dạng như CSS (cho dù nó là mặc định trắng hoặc đen) để khả năng tiếp cận có thể được đo lường một cách chính xác.

Những khiếm khuyết phổ biến ảnh hưởng bởi màu sắc

—

Tính tới 2021, Tổ chức Y tế Thế giới (WHO) ước tính rằng có ít nhất 1 tỷ người khắp thế giới mang trong mình một vài dạng khuyết tật, một con số thực ra còn đang tăng lên. Nhưng đó là những con số được ghi chép, có thể đo lường được. Sự khuyết tật tồn tại với nhiều mức độ nghiêm trọng khác nhau, và một vài loại không hề được để ý tới bởi chính người mắc phải. Cũng có một sự kỳ thị xã hội tồn tại ngăn người ta đi khám bệnh hoặc thậm chí thừa nhận rằng họ mang trong mình một sự khiếm khuyết nào đó.

Thiết kế bởi Realysys

Những sự khuyết tật cũng có thể là tạm thời và/hoặc do tình huống. Ví dụ, bất cứ ai nhìn vào màn hình máy tính ngoài trời dưới ánh nắng chói chang đều sẽ khó nhìn thấy nội dung trên màn hình máy tính, đơn giản vì mặt trời quá chói chang. Khả năng điều chỉnh thủ công độ sáng và độ tương phản màn hình trong tình huống như vậy là một dạng công nghệ hỗ trợ mà các nhà sản xuất đã cung cấp. Việc tạo ra những website dễ tiếp cận không chỉ là vấn đề đạo đức, nó thực ra là lẽ thường tình.

Với điều này trong tâm trí, chúng ta hãy đi qua một vài khuyết tật phổ biến liên quan tới nhận diện màu sắc. Tất nhiên, các khuyết tật có thể rất phức tạp và đa dạng, nhưng vì mục đích của bài viết, chúng ta sẽ sử dụng những khái niệm chung nhằm tập trung vào hoàn cảnh bài viết này. W3C cung cấp những nguồn thông tin tuyệt vời nếu bạn muốn tìm hiểu thêm về bất cứ khuyết tật nào một cách chi tiết.

Thiết kế bởi UD_Pro

• Mù màu: Cái tên “mù màu” có thể gây cho chúng ta hiểu nhầm – nó không có nghĩa người mù màu bị mù với tất cả các màu. Mức độ có thể khác nhau giữa người này với người khác, bởi một vài người chỉ không nhận biết được một hoặc vài màu.
• Tầm nhìn hạn chế: Hiện tượng này miêu tả một ai đó có tầm nhìn khiếm khuyết hoặc mù hoàn toàn. Tầm nhìn của họ có thể bị mờ, mất tiêu cự, hoặc bị hạn chế (ví dụ, tầm nhìn đường hầm có nghĩa một người dùng chỉ có thể nhìn trung tâm của màn hình trong khi hiện tượng mất trung tâm mô tả hiện tượng ngược lại.
• Những khiếm khuyết học tập và/hoặc nhận thức: những khiếm khuyết chính mà chúng tôi sẽ thảo luận ở đây là chứng rối loạn tăng động giảm chú ý (ADHD; hoặc khó giữ tập trung kéo dài) và chứng khó đọc (trộn lẫn lộn các từ khi đọc). Một số màu sắc có thể gây mất tập trung trong những trường hợp này. Nhưng khi được thực hiện tốt, màu sắc là một công cụ vô giá giúp tập trung sự chú ý.

Cách màu sắc được sử dụng trong một website

—

Là một thành phần thiết kế thiết yếu, màu sắc là một công cụ mạnh mẽ để truyền đạt thông điệp một cách trực quan. Nó cũng hữu ích nhưng thường được thực hiện một cách cảm tính, mà không nhận thức một cách tỉnh táo về cách nó hoạt động. Nhằm đánh giá lại những màu sắc được dùng để cải thiện khả năng tiếp cận, hãy tìm hiểu sâu và xem lại những mục đích của màu sắc trong một website.

Màu sắc có thể được sử dụng để tạo thứ bậc về hình ảnh, hướng ánh mắt người dùng vào trang web. Thiết kế bởi andrei2709

Nói chung, màu sắc tồn tại để đặc tả, để dẫn hướng sự chú ý và để cung cấp phản hồi. Cụ thể hơn, màu sắc được dùng để…

• Xây dựng thương hiệu – Một bảng màu cụ thể là một nhân tố quan trọng trong nhận diện hình ảnh của một doanh nghiệp. Hãy nghĩ về màu đỏ của Netflix hay xanh da trời của Twitter. Nói cách khác, màu sắc ở trường hợp này đóng vai trò như cánh tay nối dài của một cái tên thương hiệu. Trong khi rất quan trọng, điều này thường tồn tại một cách thầm lặng mà ít người để ý tới.
• Tạo thứ bậc hình ảnh – Màu sắc có thể được dùng để tạo ra sự nhấn mạnh và thứ bậc trong một trang web, cung cấp những dấu mốc hình ảnh để đưa ra tín hiệu về những vấn đề liên quan nội dung. Ở mức độ nhỏ hơn, một cái hộp in màu nhạt có thể xung quanh nội dung ít được ưu tiên hơn.
• Phản hồi hình ảnh – Màu sắc có thể chỉ ra liệu một người dùng đã hoàn thành thành công một hành động hay không. Đỏ và xanh lá là những màu phổ biến nhất cho mục đích này – một dấu tích xanh lá khi một người dùng chọn một nội dung được phép và một dấu “X” màu đỏ khi người dùng tích chuột vào một nội dung không được phép (nhân tiện thì mù màu đỏ/xanh lá cũng là loại khiếm khuyết phổ biến nhất).
• Trực quan hóa dữ liệu – Màu sắc khiến những đồ thị và biểu đồ phức tạp trở nên dễ đọc hơn. Điều này đặc biệt đúng trong trường hợp biểu đồ tròn, nơi những màu sắc khác nhau được đặt cạnh nhau.
• Text có tính tương tác – Màu sắc có thể chỉ ra sự khác nhau giữa thứ cần được đọc một cách bị động và những thứ có thể click vào. Ví dụ phổ biến nhất là những đoạn text có gắn đường link kèm thường có màu xanh.

Những thủ thuật để thiết kế bảng màu website hướng tới khả năng tiếp cận

—

Chúng ta hãy đi vào cách bạn có thể áp dụng những nguyên lý khả năng tiếp cận vào những bảng màu trong thiết kế website. Trước khi chúng ta bắt đầu, hãy đảm bảo rằng bạn được trang bị 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 sắc.

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à điều quan trọng nhất về màu sắc. Nếu mọi thứ có cùng một màu, bạn sẽ không nhìn thấy và nhận diện được vật gì cả. Nhiệm vụ cơ bản nhất của màu sắc trong thiết kế web là khiến thứ gì đó nổi bật trên màn hình: câu hỏi là ở mức độ nào và nổi bật trước vật nào.

Độ tương phản là cách các nhà thiết kế thể hiện sự khác biệt về mặt hình ảnh giữa những vật thể thiết kế. Nó có thể được đo theo thang đo từ cao xuống thấp. Một bảng màu tương tự là ví dụ về độ tương phản thấp bởi các màu hầu như là giống nhau. Mặc khác thì một bảng màu bổ sung sẽ có độ tương phản cao, bởi chúng gồm những màu sắc đối diện nhau trên bánh xe màu sắc.

Độ tương phản cao là thiết yếu cho khả năng tiếp cận màu sắc. Thiết kế bởi RLisboa_Designs

Một cách để tư duy về độ tương phản màu sắc là thông qua giá trị tương phản. Nó chỉ màu sắc sáng hoặc tối như thế nào. Khi một người mù màu hoặc tầm nhìn hạn chế nhìn vào màn hình, giá trị tương phản này là thứ họ sẽ nhìn thấy thay vì những màu cụ thể. Việc tạo ra độ tương phản cao đơn giản là việc đặt màu sáng cạnh những màu tối.

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

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

4.5:1 cho text cỡ nhỏ hơn 18pt

3:1 cho text lớn hơn 18pt

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

7:1 cho text cỡ nhỏ hơn 18pt

4.5:1 cho text lớn hơn 18pt

Nguồn: Adobe

Cách dễ nhất để biết liệu một bảng màu có đáp ứng tỷ lệ này là sử dụng một công cụ kiểm tra độ tương phản online – thứ vốn khá sẵn có và đa dạng. Một vài công cụ phổ biến như Stark (một plugin của Sketch), Adobe Color và Contrast. Ngoài những công cụ này, bạn chỉ cần tìm trên google với từ khóa “công cụ kiểm tra độ tương phản màu sắc” sẽ tìm thấy hàng tá những lựa chọn để bạn dùng thử.

Thường thì, những công cụ này sẽ yêu cầu bạn tìm mã hex của lớp nền hoặc lớp trên nền (một mã 6 số đứng đầu bởi một dấu thăng đại diện cho một màu cụ thể) và nhập vào phần mềm. Điều quan trong cần lưu ý là “1” trong những 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ụ sẽ bỏ qua con số này.

Hãy tạo ra một bảng màu website hướng tới khả năng tiếp cận trước thời hạn.

Màu sắc website không đứng một mình mà phải phối hợp với những thành phần còn lại của thiết kế. Đó là lý do vì sao điều quan trọng là cần lên kế hoạch trước về một bảng màu dễ tiếp cận để đảm bảo rằng màu sắc của bạn hài hòa trong khi vẫn thỏa mãn tiêu chuẩn của WCAG về độ tương phản.

Bên cạnh những màu sắc thương hiệu được thiết lập trước đây vốn là một phần của nhận diện hình ảnh, những nhà thiết kế web thường cần tính đến một số kịch bản như: bao gồm một màu sắc nhấn (thường được dùng cho nút bấm), màu sắc phản hồi (giống như một màu sắc ra tín hiệu rằng một người dùng đang trực tuyết) và những giai đoạn tương tác với đường link (đưa chuột qua, trước khi click và sau khi click). Họ cũng cần quyết định với những tông màu trung tính (thường gồm phổ màu trắng, xám và đen) mà sẽ được dùng phổ biến cho lớp nền website.

Các website thường đòi hỏi nhiều màu sắc và những tông màu trung tính hài hòa nhau. Thiết kế bởi M2D.Agency

Từ đây, nó đơn giản là vấn đề kiểm tra lại những màu này (sử dụng công cụ kiểm tra) để đảm bảo chúng nằm trong khoảng giá trị độ tương phản cho phép. May mắn là, bạn không cần phải kiểm tra tất cả những sự tương phản của các cặp màu với nhau mà chỉ cần thử với các cặp màu có quan hệ nền/trên nền với nhau.

Bên cạnh màu nền nói chung của website, hãy luôn nhớ rằng những màu khác sẽ đóng vai trò nền cho text, như các trường của biểu mẫu hoặc hộp thông tin. Và tất nhiên, màu nhấn nên có độ tương phản cao nhất trong số các màu sắc được dùng để nổi bật nhất và được dùng một cách có giới hạn.

Màu sắc bổ trợ với những chi tiết thiết kế bổ sung

Một website có thể không đạt chuẩn khả năng tiếp cận nếu màu sắc là chỉ báo duy nhất của những nội dung quan trọng. Những nhà thiết kế web nên bổ sung những chỉ báo dự phòng cho màu sắc, ví dụ như biểu tượng, text hay hình động.

Nguồn: Trello

Ví dụ, nếu một trường biểu mẫu chuyển màu đỏ khi nhập vào mật khẩu sai, điều này sẽ dễ dàng bị bỏ lỡ bởi những người bị mù màu đỏ. Để làm giảm nhẹ điều này, những nhà thiết kế UX thường bổ sung ít nhất một trong số những biện pháp: một thông điệp “Mật khẩu sai” hiện ra, một biểu tượng cản thán hiện ra, và hoặc một hình động xuất hiện để cảnh báo.

Tương tự, ứng dụng quản lý dự án Trello cho phép người dùng đặt màu cho những mục bằng nhãn. Nhưng chúng cũng mang đến chế độ thân thiện với người mù màu – thứ bổ sung hoa văn cho nhãn, khiến sự khác biệt trở nên rõ rệt hơn.

Sử dụng màu sắc như là một công cụ trợ giúp

Thiết kế màu sắc hướng tới khả năng tiếp cận không chỉ là lên kế hoạch về một tình huống thiếu vắng màu sắc. Trong một vài trường hợp, màu sắc có thể là một công cụ thuận tiện để hỗ trợ người đọc trong việc duyệt trang.

Trong những trường hợp mà người mắc chứng khó đọc gặp rắc rối khi đọc qua những đoạn text, một chế độ đặt biệt sử dụng màu sắc để nhấn mạnh một từ hoặc cụm từ ở một thời điểm. Đây là một chiến lược phổ biến được dùng bởi những ứng dụng dành cho việc học ngoại ngữ thông qua việc đọc, ví dụ như Beelinguapp. Thêm vào đó, các nhà thiết kế có thể áp dụng một đường viền hoặc một ngón tay chỉ vào để bổ trợ màu sắc nhấn mạnh.

Website dễ tiếp cận là có ích cho tất cả mọi người

—

Hướng tới khả năng tiếp cận vượt ra khỏi việc giải quyết những trường hợp kỳ lạ và gai góc. Thực ra, khá nhiều người dùng sẽ gặp phải một vài dạng khiếm khuyết trong tương lai (cho dù đó là tạm thời hay vĩnh viễn) ở một vài thời điểm trong cuộc sống hàng ngày của họ mà các doanh nghiệp không thể làm ngơ khả năng tiếp cận.

Tin tốt là có những bộ hướng dẫn và công cụ để trợ giúp những người dùng khuyết tật. Tất nhiên, sự lựa chọn màu sắc tốt không chỉ phụ thuộc vào đơn thuần tỷ lệ và toán học – nó thực sự là một môn nghệ thuật. Đó là lý do khi bạn cần một bảng màu website vừa ưa nhìn vừa dễ tiếp cận, điều quan trọng là bạn làm việc với một nhà thiết kế giỏi.

Nguồn: 99designs.com