Hướng dẫn cách tạo bảng so sánh mức độ dễ tiếp cận của một bảng màu

Tính dễ tiếp cận luôn là yếu tố rất khó để thực hiện. Các lỗi trong bảng màu – cách ứng dụng màu sắc trong giao diện người dùng – là một trong những vấn đề về tính dễ tiếp cận phổ biến nhất. Phải thừa nhận rằng cũng giống như những năm 90, không có nhiều khách hàng tiềm năng hứng thú với việc này. Nhưng thậm chí ngày nay – một thời đại mở mang hơn – đa số các công ty tôi hợp tác vẫn thích bô lô ba la về tính dễ tiếp cận mà không nghiêm túc thực hiện nó (tôi không nói quá và đang nói về những thương hiệu phổ biến).

Tạo một bảng màu từ ban đầu không phải là việc nhà thiết kế hay thậm chí là freelancer làm thường xuyên. Hẳn là sẽ có nhiều công việc hoàn toàn mới nhưng chúng còn ít phổ biến hơn một con ngựa biết nói. Khả năng cao là bạn sẽ kế thừa một bảng màu từ người khác (và không nhất thiết là từ một nhà thiết kế – nó có thể là sản phẩm của phòng tiếp thị).

Các lỗi trong bảng màu – cách ứng dụng màu sắc trong giao diện người dùng – là một trong những vấn đề về tính dễ tiếp cận phổ biến nhất. Vậy thì điều gì sẽ xảy ra khi bạn biết bảng màu mình đang sử dụng có chứa quá nhiều lỗi? Bạn không thể cứ tiếp tục làm lơ và lặp lại thiết kế mà mình biết nó sẽ không đáp ứng được các tiêu chí về tính dễ tiếp cận. Tệ hơn là bảng hướng dẫn phong cách (style guides) có thể tạo ra những phối màu foreground/background không đáp ứng tiêu chuẩn tối thiểu về độ tương phản (điều này đặc biệt đúng khi xử lý màu sắc với độ mờ – opacity).

Viêc kiểm tra bảng màu trong tiêu chuẩn về tính dễ tiếp cận và xác định các lỗi là một chuyện, nhưng thuyết phục một bảng màu đã được chỉnh sửa lại với các bên liên quan lại là chuyện khác. Khả năng khiến cho một công ty đa quốc gia thay đổi điều bất kì luôn là một thử thách khó khăn. Tuy nhiên việc khiến họ thay đổi bảng màu của doanh nghiệp sẽ ít thách thức hơn là trượt băng trên đồng tuyết và giữ thăng bằng quả trứng trên cái muỗng. Phòng tiếp thị thường sẽ lựa chọn thay đổi nhà thiết kế khi cần đổi bảng màu của họ.

Tuy nhiên việc thuyết phục thay đổi bảng màu là hoàn toàn khả thi. Và cũng giống như nhiều thứ khác, tất cả phụ thuộc vào quá trình thuyết trình. Cách tốt nhất để minh họa điều này là cùng nhau tìm hiểu một case study thực tế.

Thay đổi bảng màu của một doanh nghiệp

Một vài năm trước, tôi được một trưởng phòng liên hệ để về làm cho một tập đoàn quốc tế lớn trong lĩnh vực IT. Vì lý do bảo mật nên tôi xin không tiết lộ tên của công ty. Tuy nhiên phải nói rằng công ty đã có mặt ở hơn 70 quốc gia với hơn 100.000 nhân viên.

Vị trưởng phòng này biết rằng bảng màu đã không đáp ứng tiêu chí về tính dễ tiếp cận dù không liệt kê ra những điều ấy. Tuy nhiên dù có yêu cầu thực hiện thay đổi trong một vài năm gần đây, lời đề nghị của anh vẫn bị lờ đi.

Bản brief của tôi là liệt kê những điểm thất bại trong bảng màu (xét trong nguyên tắc về tính dễ tiếp cận nội dung web WCAG Level AA) và đề nghị những thay đổi cần thiết tối thiểu để khiến bảng màu đáp ứng được tiêu chuẩn. Do đó tôi đã tập trung vào đối tượng người dùng có thị lực kém và mù màu.



Nguyên tắc WCAG 2.0 level AA yêu cầu tỉ lệ độ tương phản tối thiểu là 4.5:1 đối với văn bản thông thường và 3:1 cho văn bản kích thước lớn. WCAG 2.1 yêu cầu độ tương phản tối thiểu là 3:1 cho phần đồ họa và các yếu tố giao diện người dùng (ví dụ như biểu tượng, các biên trường nhập thông tin mẫu, vâng vâng.)

Bảng màu có sẵn

Bảng màu có sẵn bao gồm 7 màu và 5 sắc xám như được thể hiện trong hình dưới đây. Dù bạn có suy nghĩ thế nào về việc lựa chọn màu sắc thì đây là kết quả mà bộ phận tiếp thị đã phê duyệt và rất khó để thay đổi.

Công ty có hàng trăm trang web, cổng thông tin và phần mềm trên toàn thế giới. Khi không có nguyên tắc chính thức, bảng màu đã không được áp dụng nhất quán, từ đó phá vỡ nguyên tắc về tính dễ tiếp cận.

Công việc đầu tiên của tôi là sắp xếp toàn bộ bảng màu theo một ma trận gồm tất cả những cách phối hợp văn bản foreground và màu nền – có phần giống như một biểu đồ cột. Sau đó tôi phân tích tất cả các cách thức phối màu dựa theo nguyên tắc WCAG AA và loại bỏ những điểm không đáp ứng. Việc này sẽ chỉ ra ngay lập tức các yếu tố nào tỏ ra hiệu quả và cái nào không, như được thể hiện trong bảng so sánh hoạt họa bên dưới.

Điều này chắc chắn sẽ thu hút sự chú ý của các bên liên quan. Thậm chí một vài cách thức phối màu foreground/background đã được phê duyệt cũng như thế. Tôi biết rằng vấn đề sẽ trở nên tồi tệ hơn một khi tôi chỉnh sửa lại ma trận theo cái nhìn của người mù màu. Vì thế tôi đã tạo ra 3 phiên bản ma trận nữa theo cái nhìn của:

  • Bệnh mù màu protanopia
  • Dạng mù màu deuteranopia
  • Tật rối loan sắc giác lam tritanopia

Việc này đã phát hiện nhiều lỗi nữa bởi độ tương phản trong một vài trường hợp rơi vào dưới mức tối thiểu, tùy theo dạng mù màu.

Tôi đã trình bày tất cả các biến thể của ma trận dưới dạng file PDF tương tác. Các nút chọn (không thể hiện trong các đồ họa dưới đây) cho phép các bên liên quan phân biệt chúng và ngay lập tức hiểu ra được tác động.

Hiện giờ thì con ngựa – dù biết nói hay biết làm gì khác – cũng thật sự rất kinh hãi.

Bảng màu mới được đề nghị

Các thay đổi lớn về bảng màu sẽ không bao giờ biến mất và tôi đã nói điều này từ lúc ban đầu. Vì thế tôi đã xác định những màu sắc gây nhiều vấn đề nhất và xử lý chúng bằng cách tăng độ bão hòa và/hoặc giảm độ sáng để đưa độ tương phản vào mức phù hợp (đối với cả người mù).

Tôi đã trình bày bảng màu được kiến nghị (nằm bên phải trong hình bên dưới) cùng với bảng màu có sẵn (bên trái). Không có thay đổi cần thiết áp dụng cho 5 sắc xám.

Như có thể thấy, chỉ có 4 trong số 7 màu sắc cần được thay đổi (và thay đổi của màu cam là dễ thấy). Sau đó tôi có thể sắp xếp lại ma trận với bảng màu mới và thể hiện các cách phối màu foreground/background đáp ứng yêu cầu về độ tương phản của nguyên tắc WCAG AA như bên dưới.

Kết quả

Trong bài thuyết trình của mình, tôi đã kết hợp các ma trận của bảng màu hiện có và bảng màu được kiến nghị như bên dưới. Nếu nhìn kĩ, bạn sẽ thấy rằng bảng màu được đề nghị bao gồm nhiều cách phối màu dễ tiếp cận hơn bảng hiện có. Nó làm khách hàng hứng thú và họ đã hoàn toàn chấp nhận rằng bảng màu cần phải thay đổi.

Kết quả? Công ty đã thay đổi bảng màu của họ theo như tôi kiến nghị và áp dụng trên phạm vi toàn cầu. Tôi thật sự không thể phóng đại rằng nó là việc gì đó quá đỗi lớn lao cho một công ty đa quốc gia. Sau này, trong lúc ăn trưa vị trưởng phòng đã nói với tôi rằng chính cách mà tôi trình bày phân tích của mình đã giúp mọi thứ trở nên khả thi và điều này thật sự không thể bị phớt lờ.

Sự kết hợp của phân tích đối chiếu, hiểu biết về cách thay đổi màu sắc thông qua độ bão hòa và độ sáng trong hệ màu HSL và phần thuyết trình tương tác đầy kinh ngạc. Đó chính là mọi thứ để làm nên những điều lớn lao tưởng chừng như không thể.

Tác giả: Colin Shanley
Người dịch: Đáo
Nguồn: Medium

Cùng tác giả

#Tag

accessibility bảng màu color palette

iDesign Must-try

Khả năng tiếp cận (Accessibility) và tính thẩm mỹ (Aesthetic) trong UI
Khả năng tiếp cận (Accessibility) và tính thẩm mỹ (Aesthetic) trong UI
Trong quá trình thiết kế, chúng ta nên ưu tiên giải quyết vấn đề về khả năng tiếp cận (Accessibility) trước khi quan tâm đến thẩm mỹ (Aesthetic) của sản phẩm,…
Những bức tranh siêu thực ghi lại vẻ đẹp đầy hấp dẫn của những gói hàng của Yrjö Edelmann
Những bức tranh siêu thực ghi lại vẻ đẹp đầy hấp dẫn của những gói hàng của Yrjö Edelmann
Nghệ thuật siêu thực có một phương thức chiếu sáng vẻ đẹp khác thường của các vật thể hàng ngày. Và đó chính xác là những gì mà nghệ sĩ…
Các bộ phim Hollywood đã chinh phục khán giả bằng màu sắc như thế nào? (Phần 2)
Các bộ phim Hollywood đã chinh phục khán giả bằng màu sắc như thế nào? (Phần 2)
Có rất nhiều cách để tạo nên những yếu tố mang tính biểu tượng trong phim, và sử dụng nhiều dạng bảng màu khác nhau có lẽ là một trong…
Các bộ phim Hollywood đã chinh phục khán giả bằng màu sắc như thế nào? (Phần 1)
Các bộ phim Hollywood đã chinh phục khán giả bằng màu sắc như thế nào? (Phần 1)
Có một vài cách khác nhau để đạt được một bộ phim có phần màu sắc hòa hợp với nhau. Cùng tìm hiểu về cách các nhà làm phim Hollywood…
Điểm lại những ‘Màu của năm’ đến từ Pantone 2000 - 2020 (Phần 2)
Điểm lại những ‘Màu của năm’ đến từ Pantone 2000 - 2020 (Phần 2)
Màu sắc luôn tồn tại xung quanh cuộc sống của chúng ta luôn mang một ý nghĩa nào đó cũng như cách mà những gam màu truyền tải thông điệp…
30 sự kết hợp màu sắc đầy cảm hứng
30 sự kết hợp màu sắc đầy cảm hứng
Màu sắc là khía cạnh quan trọng của mọi thiết kế.  Màu sắc luôn mang nhiều sắc độ khác nhau giúp thu hút thị giác người dùng; từ đơn sắc,…