Là một nhà thiết kế đồ họa, nhà thiết kế tài liệu hoặc nhà thiết kế web, việc hiểu các nguyên tắc trợ năng về màu sắc và độ tương phản của WCAG sẽ giúp thiết kế của bạn trở nên toàn diện hơn và dễ tiếp cận hơn đối với những người sáng mắt có hoặc không có khuyết tật về thị giác.

Trong tập này của Design Domination, tôi sẽ chia nhỏ các nguyên tắc về màu sắc và độ tương phản thành tiếng Anh đơn giản.

Nếu bạn đã từng tìm đến Nguyên tắc truy cập nội dung web mà chúng tôi gọi tắt là “WCAG” (wih-cag), bạn có thể cảm thấy choáng ngợp. Có rất nhiều hướng dẫn và giải thích có thể dễ dàng khiến bạn lóa mắt. Một số trong số đó là khó hiểu hoặc mơ hồ. Một số khiến bạn tự hỏi, “OK, nhưng tôi phải làm cái quái gì với thông tin này đây?”, khiến bạn có nhiều câu hỏi hơn là câu trả lời.

Vì vậy, tôi muốn giúp bạn hiểu ý nghĩa của chúng và một số điều mà chúng áp dụng, để bạn có thể làm cho thiết kế của mình dễ tiếp cận hơn với mọi người, điều đó có nghĩa là công việc của bạn cũng sẽ đạt kết quả tốt hơn.

Hiểu các nguyên tắc về màu sắc và độ tương phản

Nếu bạn mới bắt đầu sử dụng khả năng truy cập hoặc đang tìm cách làm cho thiết kế của mình có thể truy cập được bằng hình ảnh, thì bạn cần hiểu và tuân thủ các nguyên tắc về khả năng truy cập cụ thể liên quan đến màu sắc và độ tương phản.

Có một số hướng dẫn của WCAG về màu sắc và độ tương phản.

May mắn thay, những cái áp dụng cho màu sắc và độ tương phản rất rõ ràng và dễ hiểu hơn. Mặc dù chúng được gọi là Nguyên tắc trợ năng nội dung web , nhưng bạn có thể áp dụng chúng cho dù bạn đang thiết kế trang web, tài liệu, đồ họa thông tin hoặc đồ họa dữ liệu khác hay ứng dụng mà bạn cần làm cho có thể truy cập được.

Mức độ phù hợp

Trước hết, bạn phải tìm ra mức độ tuân thủ mà khách hàng hoặc nơi làm việc của bạn cần tuân thủ. Đó là, nếu họ có yêu cầu pháp lý để sản xuất nội dung có thể truy cập.

Đó là bởi vì có 3 cấp độ tuân thủ mà bạn có thể tuân thủ — A, AA và AAA. A là mức thấp nhất và AAA là mức cao nhất.

Mức độ tuân thủ điển hình cần đáp ứng để tuân thủ luật tiếp cận là AA. Đó cũng là mặc định nếu họ không có yêu cầu pháp lý.

Đôi khi, khách hàng có thể có yêu cầu của liên bang và tiểu bang để tuân thủ luật tiếp cận. Nhưng đôi khi một công ty có thể có các tùy chọn trợ năng nội bộ cụ thể và những tùy chọn này có thể vượt ra ngoài các nguyên tắc. Điều đó hoàn toàn ổn. Đó là lý do tại sao chúng ta luôn cần hỏi yêu cầu của họ là gì.

Sử dụng Màu sắc

WCAG 1.4.1 Sử dụng Màu sắc

Hãy nói về việc sử dụng màu sắc.

Cách bạn sử dụng màu sắc là một hướng dẫn mà WCAG đề cập. Nó thuộc 1.4.1 Sử dụng Màu sắc và cấp độ A. Vì vậy, điều đó có nghĩa đây là một yêu cầu rất cơ bản và rất quan trọng.

Cho dù bạn phải tuân thủ A, AA hay AAA, bạn sẽ cần phải đáp ứng yêu cầu này.

Những hướng dẫn này nói rằng bạn không thể sử dụng màu sắc làm phương tiện trực quan duy nhất để:

• truyền đạt thông tin,
• biểu thị một hành động,
• nhắc nhở một phản ứng hoặc
• phân biệt một yếu tố trực quan.

Lý do đằng sau điều này là để những người có thị lực kém, mù màu hoặc khuyết tật thị giác khác vẫn có thể hiểu được điều gì đó nói hoặc biết phải làm gì.

Ví dụ, hãy nghĩ về một biểu đồ hình tròn với chú giải. Một số cá nhân có thể không phân biệt được các miếng bánh với nhau hoặc không đọc được dòng chữ trên các miếng bánh.

Một ví dụ khác: Hãy suy nghĩ về văn bản có thể yêu cầu nhấp vào nút màu đỏ. Nút đó sẽ không xuất hiện màu đỏ đối với mọi người. Nó có thể xuất hiện màu xanh lục hoặc nâu đối với những người bị mù màu.

Nguyên tắc tương phản

WCAG cũng có các nguyên tắc liên quan đến độ tương phản giữa văn bản và màu nền mà văn bản đó xuất hiện.

WCAG 1.4.3 Độ tương phản tối thiểu

Hướng dẫn đầu tiên là WCAG 1.4.3 Độ tương phản tối thiểu.

Đây là hướng dẫn cấp độ AA. Nó nói rằng văn bản và hình ảnh của văn bản có kích thước bình thường cần phải có tỷ lệ tương phản tối thiểu là 4,5 trên 1 với nền.

Văn bản mà họ gọi là kích thước "bình thường" là bất kỳ văn bản nào dưới 14 điểm (hoặc khoảng 18,66 pixel) và in đậm hoặc dưới 18 điểm (hoặc 24 pixel) với bất kỳ trọng lượng nào.

Nhưng nếu văn bản lớn thì yêu cầu ít hơn và đó là 3 trên 1 thay vì 4,5 trên 1.

Văn bản lớn là văn bản có ít nhất 14 điểm hoặc 18,66 pixel và in đậm hoặc ít nhất 18 điểm hoặc 24 pixel bất kỳ trọng lượng nào.

Độ tương phản WCAG 1.4.6 (Nâng cao)

Có một nguyên tắc khác liên quan đến độ tương phản của văn bản, đó là WCAG 1.4.6 Contrast (Enhanced).

Vì vậy, cái tôi vừa đề cập là Độ tương phản tối thiểu và cái này là Độ tương phản ( Nâng cao ).

Đây là hướng dẫn của AAA. Việc cần tuân thủ WCAG AAA không phổ biến lắm. Nhưng nếu bạn cần, thì hướng dẫn này sẽ được áp dụng.

WCAG 1.4.6 Độ tương phản (Nâng cao) tăng tỷ lệ tương phản cho văn bản bình thường từ mức tối thiểu là 4,5 trên 1 lên ít nhất là 7 trên 1 và văn bản lớn từ mức tối thiểu là 3 trên 1 lên ít nhất là 4,5 trên 1.

Hãy nhớ khi tôi đề cập rằng một số khách hàng có thể có một số tùy chọn truy cập nội bộ?

Chà, thực ra gần đây tôi có một khách hàng cần đáp ứng tiêu chuẩn AA nhưng yêu cầu tất cả văn bản phải đáp ứng yêu cầu AAA về độ tương phản. Vì vậy, điều đó có nghĩa là văn bản có kích thước bất kỳ phải đáp ứng tỷ lệ tương phản 7 trên 1 — ngay cả văn bản lớn. Vì vậy, điều đó thậm chí còn nghiêm ngặt hơn những gì AAA yêu cầu.

WCAG 1.4.11 Độ tương phản phi văn bản

Giờ đây, văn bản và hình ảnh của văn bản không phải là những thứ duy nhất được áp dụng các nguyên tắc về độ tương phản.

Đó là bởi vì đôi khi chúng tôi có các yếu tố không phải là văn bản truyền tải ý nghĩa, điều đó có nghĩa là người dùng sáng mắt, bất kể khuyết tật về thị giác, cần có thể nhìn thấy chúng để hiểu nội dung.

Đây là lúc WCAG 1.4.11 Non-text Contrast xuất hiện.

Hướng dẫn này là AA và áp dụng cho các đối tượng đồ họa và các thành phần giao diện người dùng, những thành phần này cần có tỷ lệ tương phản ít nhất là 3 trên 1 so với các màu liền kề của chúng.

Hãy phá vỡ điều này.

Trước hết, “các đối tượng đồ họa và các thành phần giao diện người dùng” là cái quái gì vậy?

Hãy bắt đầu với các đối tượng đồ họa.

Chúng ta thường sử dụng đồ họa thay cho văn bản để truyền đạt thông tin, phải không?

Chúng tôi có thể tạo đồ họa thông tin và sử dụng các biểu tượng và ký hiệu thay cho văn bản.

Chúng tôi có thể tạo một biểu đồ đường. Trong biểu đồ đường, chúng tôi sử dụng các đường để truyền tải dữ liệu. Tất cả những người dùng sáng mắt sẽ cần có thể nhìn thấy các đường kẻ nhưng cũng phải phân biệt chúng với nhau. Nếu không, họ sẽ không thể hiểu biểu đồ.

Chúng tôi có thể tạo biểu đồ hình tròn nơi chúng tôi có văn bản ở trên cùng của các miếng hình tròn và nơi chúng tôi đang sử dụng màu để phân biệt từng phần với phần khác trong chú giải.

Nếu ai đó không thể phân biệt từng miếng bánh với nhau, họ sẽ không thể hiểu được thông tin đang được truyền tải.

Họ có thể đưa ra các giả định hoặc họ có thể hiểu sai dữ liệu.

Bây giờ còn các thành phần giao diện người dùng thì sao?

Một ví dụ về những điều đó sẽ là những gì chúng tôi sử dụng để hiển thị văn bản đó hoặc một yếu tố khác là một siêu liên kết. Chẳng hạn, nếu chúng ta sử dụng gạch chân cho các siêu liên kết. Gạch dưới không phải là văn bản, nhưng nó nói, "này, đây là một siêu liên kết."

Các thành phần giao diện người dùng cũng có thể là ranh giới trường biểu mẫu, vì vậy ai đó biết nơi nhập thông tin. Người bị khiếm thị có thể gặp khó khăn trong việc nhìn thấy họ đang ở lĩnh vực nào.

Không yêu cầu độ tương phản

Bạn có thể ngạc nhiên khi biết rằng có nhiều yếu tố không có bất kỳ yêu cầu nào về độ tương phản.

Hiện tại, không có yêu cầu về độ tương phản đối với:

• logo, mặc dù tốt nhất là tất cả người dùng sáng mắt đều có thể nhìn thấy logo và đọc bất kỳ văn bản nào có trong đó;
• các yếu tố trang trí không truyền đạt ý nghĩa, chẳng hạn như đường viền hoặc dải phân cách trang trí hoặc một số biểu tượng;
• các thành phần giao diện người dùng không hoạt động, chẳng hạn như nút bị tắt và không hoạt động cho đến khi các trường bắt buộc trong biểu mẫu được điền vào;
• bất kỳ văn bản nào tình cờ trở thành một phần của hình ảnh không nhằm thay thế văn bản, chẳng hạn như biển báo đường phố hoặc văn bản trên trang sách;
• bản đồ nhiệt; và
• ảnh chụp màn hình.

Bây giờ bạn đã hiểu rõ hơn về các nguyên tắc về màu sắc và độ tương phản, hãy nhớ tải xuống hướng dẫn miễn phí của tôi, Công cụ trợ năng PDF và InDesign cần thiết , trong đó tôi đề cập đến một số công cụ kiểm tra độ tương phản màu khác nhau. Những thứ đó sẽ giúp bạn đo lường tỷ lệ tương phản của các thành phần văn bản và phi văn bản, đồng thời cho bạn biết chúng đạt hay không đạt dựa trên chúng là gì và mức độ tuân thủ mà bạn cần đáp ứng. Bạn cũng sẽ tìm hiểu một số công cụ yêu thích khác của tôi cho khả năng truy cập InDesign và PDF.

Ban đầu được xuất bản dưới dạng podcast và bảng điểm có sẵn tạihttps://creative-boost.com/color-and-contrast-accessibility