Thiết kế dễ tiếp cận, bước 1: Tương phản màu sắc

606090 636509991059676901 16x9

Dự án A11Y đã nói một câu rất hay và thẳng thừng: “Tính dễ tiếp cận rất khó theo đuổi.” Nếu bạn đang không biết bắt đầu từ đâu, hãy xem xét độ tương phản về màu sắc.

Tác giả: Neil Shankar


Tính dễ tiếp cận: Khái niệm vỡ lòng

Tính dễ tiếp cận (accessibility) đang là đề tài nóng hỏi trong cộng đồng thiết kế. Vậy nó rốt cuộc có nghĩa gì? “Mạng Internet được thiết kế để phục vụ cho mọi đối tượng, vượt qua hết rào cản của phần cứng, phần mềm, ngôn ngữ, văn hóa, địa điểm, sức khỏe và tinh thần. Khi mạng đạt được mục đích của chính nó, nó có khả năng dễ được tiếp cận đối với những nhóm người khác nhau về khả năng nghe nói, di chuyển, thị giác và tư duy” - Henry & McGee, W3C.

Có 2 tiêu chuẩn phổ biến cho tính dễ tiếp cận: Mục 508 (thuộc Bộ luật Tái hòa nhập của nước Mỹ), áp dụng đối với khu vực kinh tế quốc doanh, và WCAG 2.0, đối với khu vực kinh tế tư nhân. Hai tiêu chuẩn này giống như một danh sách các đề mục để đánh giá trang web. Mục 508 là lệnh ủy, trong khi WCAG 2.0 là tùy chọn. Vậy nên trừ khi bạn là một nhân viên nhà nước hoặc nhà thầu cho dự án quốc gia, bạn không bị ràng buộc phải làm cho trang web của mình dễ tiếp cận. Tuy nhiên, vẫn có vô vàn lí do mà bạn nên quan tâm đến tính chất này. Điều cơ bản nhất trong đó là, mỗi người sử dụng khi đến trang web của bạn nên có được một trải nghiệm đồng đều.

Chú thích: Dù mọi trang web .gov bị ràng buộc về mặt pháp luật rằng phải tuân thủ theo Mục 508 từ năm 1998, chỉ một số lượng nhỏ tuân theo, và không hề có bất cứ sự kiểm soát nào.


Vậy nhà thiết kế cần phải làm gì?

Tối ưu một trang web để tăng tính tiếp cận là phần việc của kỹ sư lập trình web. Ví dụ, một phần hướng dẫn trong WCAG 2.0 yêu cầu các trang web phải điều hướng được bằng bàn phím, tính năng này dành cho những người không thể sử dụng chuột. Những vấn đề như vậy không liên quan nhiều đến nhà thiết kế. Tuy nhiên, có một số phần hướng dẫn khác dành riêng cho nhà thiết kế. Chẳng hạn như giảm chuyển động, giới hạn các pop-up và flash, và một trong những điều cơ bản nhất chính là đảm bảo tương phản màu sắc phù hợp.

Mỗi phần hướng dẫn trong WCAG 2.0 có 3 mức độ tuân thủ: A (tối thiểu), AA (trung bình), và AAA (cao nhất). Mức AA được xem là tiêu chuẩn công nghiệp, mức này quy định tương phản về màu sắc có tỉ lệ 4.5:1 giữa tiền cảnh (chữ, hình ảnh, v..v..) và hậu cảnh. Bạn có thể tham khảo công cụ Colorable của Brent Jackson để hiểu thêm về tỉ lệ này.

1 5vdthfqm4ugcb0dwfock w
Colorable

Kiểm tra tương phản

Nếu bạn đã sở hữu một bảng màu UI hoặc bộ nhận diện thương hiệu, hãy kiểm tra tỉ lệ tương phản của chúng. Tôi đề nghị sử dụng công cụ Contrast Ratio của Lea Verou vì nó rất thân thiện. Hoặc bạn cũng có thể dùng EightShapes Contrast Grid để đánh giá những bảng màu phức tạp hơn. Những đơn vị quản lí WCAG 2.0Mục 508 không hề cung cấp những công cụ chính thức, vậy nên chúng ta chỉ có thể dựa vào lòng hảo tâm của nhà phát triển bên thứ ba. Dự án A11Y có một danh sách các tài nguyên bạn có thể tham khảo, và Google cũng vậy.

1 el h2yv4sx341lt07oi9ha
Contrast Ratio

Điều chỉnh tối ưu

Nếu không may tỉ lệ tương phản của bạn quá cách biệt với con số đề nghị, bạn cần phải điều chỉnh đôi chút để đạt mức AA. Nên nhớ rằng tiêu chuẩn này không áp dụng cho những hòa sắc mà bạn đang sử dụng, mà áp dụng cho sự khác biệt giữa tiền-hậu cảnh, vậy nên bạn cũng không cần phải thay đổi toàn bộ bảng màu của mình. Chỉ cần điều chỉnh đôi chút là bạn có thể đảm bảo cả tương phản màu sắc và hình ảnh thương hiệu, và đây chỉ là bước bắt đầu trên con đường đảm bảo tính tiếp cận.

Hãy xem xét ý kiến sau từ Sebastien Gabriel, một nhà thiết kế của Google Design:

“Tính dễ tiếp cận từ lâu đã là một phần DNA của Chrome… Đành rằng, về mặt màu sắc, chúng tôi cần điều chỉnh thêm để chúng trở nên đơn giản và tuân thủ chặt chẽ hơn với quy định của WCAG 2.0. Chúng tôi đã đảm bảo rằng toàn bộ phần chữ và hệ thống biểu tượng đạt ít nhất mức AA hoặc tỉ lệ tương phản 4.5:1.”

1 jcsapda 1bbz1uuuiyhbtw
Bảng màu của Google Chrome

Google không hề đơn độc trong việc tuân thủ tiêu chuẩn AA. Giao diện người dùng của Twitter vừa được cập nhật tháng trước đã bổ sung tính năng “tăng tương phản màu sắc”. Khi được bật, hầu hết bảng màu không chỉ đạt tiêu chuẩn AA, mà đạt cả mức AAA về độ tương phản.


Lời kết

Việc đảm bảo độ tương phản về màu sắc vẫn còn gợi lên nhiều nghi vấn về mức độ khả thi, hãy xem qua trích dẫn từ Yesenia Perez-CruzSanette Tanaka ở Vox Media:

“Vox Media đã có những bước tiến trong việc tăng tính dễ tiếp cận của các website từ khi ngôn ngữ thiết kế của Curbed dần được định hình… màu liên kết trong phong cách gốc của Curbed đã không có đủ độ tương phản so với màu nền để vượt qua bài kiểm tra của WCAG. Chúng tôi đã có một vài thử nghiệm, bao gồm cả việc thay đổi toàn bộ bảng màu của Curbed, nhưng cuối cùng chúng tôi quyết định rằng thay đổi ngôn ngữ thiết kế là vượt quá tầm cỡ của dự án này. Chúng tôi đã đi đến phương án tô đậm những đường liên kết. Dù vẫn không đạt được mức dễ tiếp cận, những đường liên kết này giờ đây nổi bật hơn nhờ vào yếu tố thị giác đó.”

Khi tôi chất vấn họ rằng tại sao điều chỉnh độ tương phản lại vượt quá tầm cỡ, Tanaka đã giải thích rằng màu sắc gốc là phần thiết yếu của ngôn ngữ thiết kế lớn hơn, và thay đổi cả một ngôn ngữ thiết kế không hề là việc nhỏ. Tuy biết được rằng Vox Media có nhận thức về sự yếu kém của họ trên phương diện tính dễ tiếp cận, nhưng lí do đó không làm tôi hài lòng. Thật bất công đối với người dùng khi lại ưu ái tính thống nhất của ngôn ngữ thiết kế hơn tính dễ tiếp cận. Đặc tính này luôn cần được xem xét, nhất là khi bạn đang trong giai đoạn tái định hình thương hiệu.

Hãy luôn nhớ rằng bất kì ai cũng đáng được tiếp cận trang web của bạn. Tạo ra một sản phẩm dễ tiếp cận là một hành trình lâu dài, vậy nên hãy bắt đầu từ tương phản màu sắc ngay hôm nay nhé.

Nguồn: UX Collective
Người dịch: Thanh Phạm