Tỷ lệ WCAG là gì? Tại sao bạn nên triển khai nó trong thiết kế của mình

Nguyên tắc về khả năng truy cập nội dung web (WCAG) là các nguyên tắc về khả năng truy cập dành cho thiết kế web và kỹ thuật số. Tuân thủ các nguyên tắc này đảm bảo rằng màu sắc đủ tương phản để giúp những người khiếm thị có thể nhìn và đọc đúng thiết kế của bạn. Điều này cũng đi đôi với kích thước typographic, để đảm bảo khả năng đọc của nó cùng với màu sắc.

Trong một thế giới cần phải bao trùm hơn, việc thêm các yếu tố dễ tiếp cận vào thiết kế của bạn sẽ chỉ nâng cao tác phẩm của bạn và cho phép bạn chia sẻ nó với nhiều người hơn.

Tỷ lệ WCAG là gì?

WCAG là viết tắt của Hướng dẫn truy cập nội dung web. WCAG giúp bất kỳ ai thiết kế hoặc sáng tạo cho web hoặc internet để đảm bảo thiết kế của họ đạt được các mục tiêu về khả năng tiếp cận. Điều này có nghĩa là bất kỳ ai cũng có thể thưởng thức và sử dụng thiết kế của bạn, không loại trừ những người khiếm thị hoặc khuyết tật khác khi có thể.

Tỷ lệ WCAG đặt tỷ lệ tối thiểu để đạt được khả năng tiếp cận mục tiêu. Điều này bao gồm độ tương phản màu sắc và kích thước văn bản, cả hai đều đảm bảo những người khiếm thị có cơ hội nhìn thấy, tương tác và sử dụng thiết kế của bạn tốt hơn. Việc đạt được tỷ lệ WCAG không chỉ giúp ích cho những người khiếm thị mà còn tăng trải nghiệm người dùng cho tất cả người dùng web.

World Wide Web Consortium phát triển các tiêu chuẩn để phát triển web. Mặc dù không có quy tắc thiết lập nào cho khả năng truy cập web, WCAG đặt tiêu chuẩn để tuân theo mà bất kỳ nhà thiết kế web nào cũng phải tuân thủ.

Khi kiểm tra tỷ lệ tương phản, WCAG đề xuất xếp hạng từ A đến AAA. Xếp hạng A cho thấy mức độ tương phản thấp nhất. AA là các mức tương phản tầm trung với tỷ lệ 4,5:1—được coi là tỷ lệ tối thiểu. Cuối cùng, AAA là mức độ tương phản cao nhất. Nếu thiết kế cho mọi người, mức độ tương phản của bạn là tốt nhất khi nằm trong khoảng AA và AAA.

Tại sao tỷ lệ WCAG lại quan trọng trong thiết kế đồ họa và web?

Thiết kế đồ họa và thiết kế web không nên chỉ làm cho thông tin trông đẹp mắt. Thiết kế thông tin cung cấp thông tin cho đại chúng—điều này có nghĩa là làm cho thông tin của bạn có thể truy cập được cho tất cả mọi người. Việc triển khai WCAG đảm bảo các thiết kế có thể tiếp cận được dành cho những người khiếm thị, mắc chứng khó đọc, rối loạn thần kinh hoặc bất cứ điều gì ảnh hưởng đến thị giác hoặc khả năng đọc của ai đó.

Thiết kế web và kỹ thuật số—cũng như lập trình—đã thiết lập sẵn các tính năng trợ năng. Ví dụ: Windows cung cấp các công cụ trợ năng hữu ích cho người dùng và việc cung cấp phụ đề hoặc phụ đề đã trở nên phổ biến đối với hầu hết các video trên YouTube. Nhưng chúng tôi luôn có thể cải thiện khả năng tiếp cận.

Thiết kế toàn cầu tạo ra thiết kế tốt hơn. Càng nhiều người có thể tương tác với thiết kế của bạn thì nó càng thành công và càng có nhiều người tiếp cận. Việc tiếp cận nhiều người hơn không chỉ tốt cho bạn với tư cách là một nhà thiết kế mà còn tốt hơn cho thế giới khi có ít người bị loại trừ hơn.

Thiết kế với tỷ lệ WCAG và các tính năng trợ năng trong thiết kế của bạn sẽ có tác động tích cực đến bảng màu, lựa chọn kiểu chữ và kích thước văn bản. Bạn sẽ không cố ý thiết kế thứ gì đó khó đọc, vậy tại sao bạn không đưa vào nhiều cách hơn để tạo thiết kế dễ đọc hơn cho tất cả mọi người?

Triển khai tỷ lệ WCAG trong thiết kế của bạn

Có những nơi bạn có thể kiểm tra tỷ lệ WCAG trong thiết kế của mình, chẳng hạn như trang web kiểm tra độ tương phản này. Tuy nhiên, dù sao thì bạn cũng nên bắt tay vào thực hành triển khai các tính năng thiết kế có thể truy cập được vào công việc của mình mà không cần dựa vào việc kiểm tra mức tối thiểu.

Cần lưu ý rằng các nguyên tắc tương phản không áp dụng cho thiết kế logo. Điều này là do các logo được trình bày ở các kích cỡ khác nhau và thường dựa trên các nền khác nhau. Tuy nhiên, việc cân nhắc tỷ lệ WCAG khi thiết kế logo cũng không hại gì.

Màu sắc có độ tương phản cao

Sử dụng màu sắc có độ tương phản cao là một cách dễ dàng để thêm tính toàn diện vào thiết kế của bạn. Các màu tương phản với nhau sẽ giúp những người khiếm thị, mù màu nhìn rõ hơn các thiết kế của bạn. Không chỉ vậy, mà ngay cả những người không bị suy giảm thị lực cũng sẽ thấy rõ hơn—và tương tác với—các thiết kế của bạn.

Bạn đã bao giờ thử đọc một văn bản màu hồng nhạt trên nền xanh lục nhạt chưa? Nó gần như là không thể. Nhưng một văn bản màu xanh đậm trên nền màu vàng nhạt sẽ dễ nhìn và dễ đọc hơn nhiều.

Màu có độ tương phản cao hoạt động tốt nhất khi đặt văn bản trên nền màu hoặc nếu sử dụng các đường dẫn nhỏ trong hình minh họa của bạn. Khroma là trình tạo bảng màu AI đi kèm với trình kiểm tra độ tương phản tích hợp—một trong nhiều công cụ AI tuyệt vời hỗ trợ quy trình thiết kế đồ họa của bạn.

Một cách tuyệt vời để kiểm tra độ tương phản là chuyển thiết kế của bạn sang thang độ xám. Nếu bạn có thể tách các màu và hiểu thiết kế bằng màu đen và xám, thì nó cũng sẽ dịch tốt sang các màu bạn đã chọn.

Cỡ chữ

Cùng với màu văn bản đủ tương phản với màu nền, bản thân văn bản của bạn phải đủ lớn để đọc dễ dàng. Tỷ lệ WCAG cho kích thước văn bản lớn là 3:1.

Kích thước văn bản không bằng nhau trên tất cả các kiểu chữ, do đó, đừng dựa vào kích thước 12 điểm—thường được xem là kích thước tối thiểu để có thể đọc tiêu chuẩn—cho tất cả các phông chữ. Hãy tự kiểm tra chúng hoặc với người kiểm tra người dùng bằng cách hiển thị hoặc in các thiết kế có kích thước thực. Nếu màu sắc của bạn không tương phản tốt, thì văn bản lớn hơn sẽ hỗ trợ khả năng đọc, như một giải pháp thay thế.

Khả năng đọc phông chữ

Không cần phải nói, nhưng phông chữ bạn chọn trong thiết kế của mình cần phải dễ đọc. Phông chữ trang trí, phông chữ thảo hoặc phông chữ vẽ tay thường có vấn đề về khả năng đọc. Ví dụ, các ban nhạc heavy metal nổi tiếng với việc sử dụng các kiểu chữ vốn đã khó đọc cho logo của ban nhạc.

Bạn cũng nên xem xét kerning và theo dõi khi sử dụng văn bản của mình cho các thiết kế nhỏ. Khoảng cách giữa các chữ cái cũng có thể ảnh hưởng đến khả năng đọc dự kiến ​​của các từ.

Các yếu tố tiếp cận toàn diện

Mặc dù chỉ có độ tương phản màu sắc, kích thước phông chữ và khả năng đọc văn bản trong thiết kế web được xem xét trong tỷ lệ WCAG, nhưng bạn nên lưu ý đến tất cả các thiết kế đồ họa và web của mình.

Nếu bạn là nhà thiết kế web làm việc với lập trình viên hoặc người viết mã, hãy đảm bảo rằng bạn đang sử dụng các kỹ thuật HTML hỗ trợ khả năng truy cập web. Ngoài ra còn có các tính năng trợ năng trong Canva để mở rộng phạm vi tiếp cận của thiết kế với khán giả của bạn.

Bạn không nên chỉ dừng lại ở các yêu cầu tối thiểu đối với tỷ lệ WCAG; nếu bạn có quyền kiểm soát việc thêm văn bản thay thế vào hình ảnh, chú thích cho tệp âm thanh hoặc video hoặc thậm chí là cách diễn đạt hữu ích của văn bản cho siêu liên kết—được trình đọc màn hình đọc to—thì bạn nên làm nhiều hơn thế. Việc bao gồm các tính năng trợ năng không loại trừ bất kỳ đối tượng nào—nó chỉ mời nhiều người hơn tham gia.

Thiết kế với tỷ lệ WCAG cải thiện thiết kế cho tất cả

Các tiêu chuẩn cho thiết kế web đến từ World Wide Web Consortium, một cộng đồng hỗ trợ các phương pháp hay nhất trên web. Hiệp hội đã phát triển Nguyên tắc về khả năng tiếp cận nội dung web mà các nhà thiết kế web nên tuân theo. Điều này cung cấp một tiêu chuẩn tỷ lệ để kiểm tra khả năng hiển thị khi thiết kế cho web.

Tuân theo các nguyên tắc và tiêu chuẩn tỷ lệ này có nghĩa là thiết kế web của bạn có thể được nhiều người truy cập hơn.