Kiểm thử độ tương phản màu trong thiết kế web

Thông tin tổng quan về 3 công cụ và kỹ thuật để kiểm tra và xác minh độ tương phản màu hỗ trợ tiếp cận của thiết kế.

Adam Argyle
Charlie Gleason

Giả sử bạn có một số văn bản trên nền sáng, như sau:

Cụm từ "Con cáo màu nâu nhanh chóng nhảy qua chú chó lười biếng lần nữa" được hiển thị, trong đó mỗi từ hoặc vài từ có màu xanh dương nhạt hơn. Phía trên mỗi phần từ bị mờ dần là điểm tỷ lệ tương phản của từ đó. Vài từ cuối cùng rất khó đọc do độ tương phản thấp.

Mặc dù bạn có thể đọc được tất cả các ví dụ, nhưng không phải ai cũng có thể đọc được.

Độ tương phản màu dễ tiếp cận là một phương pháp đảm bảo mọi người đều có thể đọc được văn bản. Đôi khi, việc kiểm thử độ tương phản rất dễ dàng và đôi khi lại rất khó khăn. Khi kết thúc bài đăng này, bạn sẽ có 3 công cụ và kỹ thuật mới để kiểm tra, chỉnh sửa và xác minh độ tương phản trong thiết kế web, nhờ đó có thể giải quyết những trường hợp khó khăn nhất.

WCAG và độ tương phản màu

Sáng kiến hỗ trợ tiếp cận trang web của W3C cung cấp các chiến lược, tiêu chuẩn và tài nguyên để đảm bảo rằng càng nhiều người càng tốt có thể truy cập Internet. Nguyên tắc cơ bản của các tiêu chuẩn này được gọi là Nguyên tắc về khả năng tiếp cận đối với nội dung web (WCAG). Phiên bản ổn định mới nhất, WCAG 2.1, đề cập đến một yêu cầu quan trọng về khả năng hỗ trợ tiếp cận: độ tương phản tối thiểu.

Mối quan hệ giữa 2 màu trong WCAG 2.1 được mô tả bằng tỷ lệ tương phản, tức là con số bạn nhận được khi so sánh độ chói của 2 màu. Độ chói là cách mô tả độ gần của một màu với màu đen (0%) hoặc trắng (100%). WCAG xác định một số quy tắc và thuật toán tính toán về tỷ lệ tương phản cần thiết để trang web có thể truy cập được. Tuy nhiên, phép tính này có các vấn đề đã biết. Cuối cùng, chúng tôi sẽ sử dụng một cách thậm chí còn đáng tin cậy hơn, nhưng hiện tại, WCAG là công cụ tốt nhất mà chúng tôi có.

Những quy tắc đó là gì?

AA AAA
Văn bản nội dung (< 24px) 4,5 7
Văn bản lớn (> 24px) 3 4,5
Giao diện người dùng (biểu tượng, biểu đồ, v.v.) 3 chưa xác định

Tỷ lệ tương phản càng cao thì điểm số càng cao, chẳng hạn như 4,5 hoặc 7 thay vì 3. Để làm quen hơn với bảng điểm, hãy xem Trình kiểm tra độ tương phản của Polypane.

Văn bản hiển thị trên nền màu tím: một cặp là văn bản màu đen trên nền màu tím và cặp còn lại là văn bản màu trắng trên nền màu tím.
Bạn cảm thấy cặp màu nào trong số này có độ tương phản cao hơn?

Kiểm thử độ tương phản giữa các màu

Bây giờ, chúng ta đã biết mình đang tìm kiếm điều gì, vậy làm cách nào để kiểm thử điều này? Sau đây là 3 công cụ miễn phí hỗ trợ bạn kiểm tra, sửa lỗi và đo độ tương phản của trang web. Chúng tôi sẽ trình bày điểm mạnh và điểm yếu của từng phương pháp để bạn có thể tự tin kiểm thử khả năng hỗ trợ tiếp cận của màu sắc và nội dung trên trang web theo nhiều cách.

  1. Pika
    Một ứng dụng MacOS có khả năng hiển thị độ tương phản của mọi màu trên toàn bộ màn hình, màu trên độ dốc, màu có độ trong suốt và nhiều màu khác. Ý định rõ ràng, người dùng chọn các pixel để so sánh theo cách thủ công. Ít tự động hoá hơn một chút nhưng có được nhiều tính năng hơn.
  2. VisBug
    Một tiện ích đa trình duyệt, có thể hiển thị nhiều lớp phủ tương phản tại cùng một thời điểm, nhưng giống như DevTools, đôi khi không thể phát hiện ý định.
  3. Công cụ của Chrome cho nhà phát triển
    DevTools được tích hợp vào Chrome và có nhiều cách để kiểm tra, sửa và gỡ lỗi các vấn đề về màu sắc, nhưng có những điểm hạn chế khi kiểm tra màu chuyển tiếp và màu bán trong suốt, đồng thời đôi khi không thể phát hiện ý định.

Pika (ứng dụng macOS)

Nếu DevTools hoặc VisBug không thể đánh giá chính xác độ tương phản, chẳng hạn như khi bạn cần kiểm tra màu bên ngoài trình duyệt hoặc khi có độ trong suốt hoặc độ dốc, thì Pika sẽ giúp bạn giải quyết vấn đề này. Pika có quyền truy cập vào mọi pixel trên màn hình vì đây là một công cụ hệ thống chứ không phải công cụ web.

Tải Pika xuống

Điều này cũng có nghĩa là trải nghiệm người dùng khi sử dụng Pika sẽ khác với DevTools hoặc VisBug. DevTools và VisBug cố gắng hết sức để hiển thị màu văn bản và màu nền từ DOM của trình duyệt, trong khi các màu mà Pika so sánh được chọn theo cách thủ công từ bất kỳ điểm nào trên màn hình. Điều này giúp Pika có nhiều quyền kiểm soát hơn và mở ra thêm một số trường hợp sử dụng:

  • So sánh bất kỳ hai màu nào bất kể chúng có trong trình duyệt hay không – nếu bạn có thể nhìn thấy màu đó trên màn hình, bạn có thể kiểm thử màu đó.
  • So sánh màu với độ trong suốt.
  • So sánh màu trong hiệu ứng chuyển màu.
  • So sánh các màu đang sử dụng chế độ kết hợp, chẳng hạn như mix-blend-mode trong CSS.

So sánh hai màu bất kỳ

So sánh văn bản với màu nền:

Hai màu xám được so sánh cạnh nhau, chúng có tỷ lệ tương phản là 13,01 và đang vượt qua các mục tiêu AA và AAA.

So sánh màu nét vẽ và màu nền của đồ hoạ vectơ:

Hai màu tím được so sánh từ một biểu tượng hai tông màu, chúng có tỷ lệ tương phản là 1,63 và không đạt được mục tiêu nào của WCAG.

So sánh màu sắc với độ trong suốt

So sánh màu văn bản với nhiều pixel mẫu nền. Ở đây, màu xám nhạt nhất trong hiệu ứng kính mờ được dùng làm màu so sánh nền.

Hai màu trông giống màu xám nhưng thực ra là màu tím rất nhạt được so sánh từ một hình ảnh có chú thích mờ, bán trong suốt, chúng có tỷ lệ tương phản là 4,65 và đang vượt qua mục tiêu AA.

So sánh màu với màu chuyển tiếp

So sánh văn bản trên hiệu ứng chuyển màu hoặc trên hình ảnh. Ở đây, L trong "Lasso" được so sánh với màu xanh dương nhạt của hình ảnh:

Ảnh chụp màn hình của một chương trình truyền hình có tiêu đề chương trình ở trên cùng, chữ L màu trắng và màu xanh dương phía sau được so sánh. Các ảnh này có tỷ lệ tương phản là 8 và đang vượt qua các mục tiêu AA và AAA.

VisBug

VisBug là một công cụ lấy cảm hứng từ FireBug để các nhà thiết kế và nhà phát triển kiểm tra, gỡ lỗi và thử nghiệm trực quan thiết kế trang web của họ. Công cụ này có ngưỡng sử dụng thấp hơn so với Công cụ của Chrome cho nhà phát triển bằng cách mô phỏng giao diện người dùng và trải nghiệm người dùng của các công cụ thiết kế mà mọi người đã biết và yêu thích sử dụng.

Dùng thử VisBug hoặc cài đặt trên Chrome, Firefox, Edge, Brave hoặc Safari.

Một trong những công cụ mà Google Lighthouse cung cấp là công cụ Kiểm tra khả năng hỗ trợ tiếp cận.

Ảnh chụp màn hình thanh công cụ VisBug ở bên trái của một trang trống, biểu tượng công cụ hỗ trợ tiếp cận có màu hồng và một cửa sổ bật lên sẽ hiển thị hướng dẫn về công cụ này.

Kiểm tra trên các trình duyệt (và thậm chí trên thiết bị di động)

Sau khi bạn nhấp vào công cụ Kiểm tra hỗ trợ tiếp cận, mọi nội dung mà người dùng trỏ đến hoặc điều hướng bằng bàn phím sẽ có thông tin hỗ trợ tiếp cận được báo cáo trong chú giải công cụ. Chú giải công cụ này bao gồm thông tin so sánh màu giữa màu nền trước và màu nền được phát hiện.

Một thành phần có tiêu đề và biểu tượng sẽ xuất hiện với một hộp giới hạn màu hồng xung quanh, chú giải công cụ hỗ trợ tiếp cận VisBug trỏ đến hộp màu hồng có báo cáo so sánh màu của màu văn bản và nền của thành phần đó. Tỷ lệ này là 13,86 và đang vượt qua cả mục tiêu AA và AAA.

Kiểm tra một hoặc nhiều

DevTools có thể xem một cặp màu hoặc nhận báo cáo về tất cả các cặp màu trên trang, nhưng VisBug cung cấp một giải pháp trung gian phù hợp bằng cách cho phép nhiều cặp màu. Nhấp vào một phần tử và chú giải công cụ sẽ vẫn ở đó. Giữ phím Shift và tiếp tục nhấp vào các phần tử khác, tất cả chú giải công cụ sẽ vẫn ở nguyên vị trí:

Danh sách các đường liên kết trên một trang web được hiển thị cùng với nhiều lớp phủ hỗ trợ tiếp cận VisBug, mỗi lớp phủ đều trỏ đến và báo cáo độ tương phản màu nền và văn bản đã phát hiện theo ngữ cảnh.

Điều này đặc biệt quan trọng đối với thiết kế dựa trên thành phần, trong đó nhiều phần của một thành phần cần phải vượt qua điểm tỷ lệ tương phản. Phương thức này cho phép xem tất cả các thành phần đó cùng một lúc. Cũng rất phù hợp để xem xét thiết kế.

Công cụ của Chrome cho nhà phát triển

Nếu đã cài đặt Chrome, thì bạn đã có sẵn nhiều công cụ kiểm tra độ tương phản:

Công cụ chọn màu trong Công cụ của Chrome cho nhà phát triển

Trong ngăn Kiểu Chrome Công cụ cho nhà phát triển của bảng điều khiển Phần tử, các giá trị màu sẽ có một mẫu màu hình vuông nhỏ bên cạnh. Khi nhấp vào bảng màu này, bạn sẽ thấy công cụ chọn màu. Nếu có thể, giữa công cụ sẽ hiển thị độ tương phản của màu sắc so với nền trước hoặc nền sau.

Trong ví dụ sau, công cụ chọn màu sẽ được mở cho giá trị màu thuộc tính tuỳ chỉnh. Điểm tỷ lệ tương phản được báo cáo là 15,79 và có hai dấu kiểm màu xanh lục, cho biết điểm này đáp ứng các yêu cầu của WCAG 2.1 về AA và AAA:

Ảnh chụp màn hình bảng điều khiển Phần tử của DevTools, trong các kiểu, công cụ chọn màu sẽ hiển thị và ở giữa là báo cáo tỷ lệ tương phản của màu là 4,98.

Tính năng tự động sửa lỗi của Công cụ chọn màu

Việc xem điểm số trong khi chọn màu rất tiện lợi, nhưng Công cụ của Chrome cho nhà phát triển còn có một tính năng bổ sung để tự động sửa lỗi. Khi công cụ chọn màu báo cáo điểm tương phản màu hỗ trợ tiếp cận không đạt, bạn có thể mở rộng công cụ này để hiển thị các mục tiêu điểm AA và AAA, cùng với công cụ bộ chọn màu mắt. Bên cạnh AA và AAA là các bảng màu và một biểu tượng làm mới mà khi được nhấp vào sẽ tìm thấy màu gần nhất được truyền cho bạn:

Nếu bạn không quá cầu kỳ về màu sắc, tính năng tự động chỉnh sửa là một cách tuyệt vời để đáp ứng các nguyên tắc hỗ trợ tiếp cận mà không cần phải nỗ lực quá nhiều để hoàn thành nhiệm vụ.

Chú giải công cụ kiểm tra

Công cụ chọn phần tử có một tính năng đặc biệt trong quá trình di chuột trang để báo cáo thông tin chung về phông chữ, màu sắc và khả năng hỗ trợ tiếp cận. Công cụ chọn phần tử là biểu tượng ở bên trái trong ảnh chụp màn hình sau đây. Đó là hộp có con trỏ mũi tên ở góc dưới cùng bên phải. Bạn cũng có thể chọn bằng phím tắt Control+Shift+C (hoặc Command+Shift+C trên MacOS).

Ảnh chụp màn hình biểu tượng hộp và mũi tên trong DevTools gọi công cụ chọn phần tử.

Sau khi được kích hoạt, biểu tượng này sẽ chuyển sang màu xanh dương và khi bạn trỏ vào bất kỳ nội dung nào trong trang, tiện ích chú giải công cụ kiểm tra nhanh sau đây sẽ xuất hiện:

Ảnh chụp màn hình của một lớp phủ rất giống với VisBug, ảnh này cho thấy một số thông tin về kiểu và phần hỗ trợ tiếp cận cho thấy điểm tương phản là 15,79, vượt qua mục tiêu AA.

Thay vì công cụ chọn màu yêu cầu bạn tìm bảng màu trong ngăn Kiểu, công cụ này cho phép bạn chỉ cần trỏ xung quanh trang để xem điểm tương phản. Giống như công cụ chọn màu, công cụ này chỉ có thể hiển thị một điểm tương phản tại một thời điểm.

Bump bump 'til you pass 🎶

Tôi thường kiểm tra một cặp màu bằng công cụ kiểm tra nhanh này và nhận thấy cặp màu đó chỉ thiếu một chút để đạt được tỷ lệ bắt buộc. Thay vì sử dụng tính năng tự động sửa của công cụ chọn màu (vì tôi rất cầu kỳ), tôi sẽ điều chỉnh các kênh màu trong CSS và theo dõi cho đến khi đạt được tỷ lệ mà tôi cần. Tôi gọi quá trình này là "đẩy cho đến khi bạn vượt qua" vì tôi sẽ tăng số kênh màu cho đến khi chúng vượt qua WCAG 2.1.

Các bước này như sau và phải được thực hiện theo đúng thứ tự:

  1. Đặt tiêu điểm bàn phím bên trong một màu trong bảng điều khiển Kiểu.
  2. Kích hoạt công cụ kiểm tra phần tử bằng phím tắt Control+Shift+C (hoặc Command+Shift+C trên MacOS).
  3. Trỏ vào một mục tiêu.
  4. Nhấn phím lên/xuống trên bàn phím để thay đổi các số trong giá trị màu.

Cách này hoạt động vì giá trị kiểu CSS vẫn có tiêu điểm bàn phím, trong khi chuột cho phép bạn trỏ vào một mục tiêu. Hãy nhớ không nhấp vào mục tiêu hoặc tiêu điểm sẽ di chuyển khỏi khu vực giá trị màu và không cho phép bạn đẩy giá trị nữa cho đến khi lấy lại tiêu điểm.

Tổng quan về CSS

Cho đến thời điểm này, Công cụ của Chrome cho nhà phát triển đã cung cấp các cách để xem từng cặp màu một, nhưng Tổng quan về CSS có thể thu thập dữ liệu toàn bộ trang của bạn và trình bày tất cả các cặp màu không truy cập được cùng một lúc:

Ảnh chụp màn hình phần Tóm tắt tổng quan khi chạy công cụ ghi lại thông tin tổng quan về CSS. Báo cáo này cho thấy 7 vấn đề về độ tương phản, cho thấy các cặp màu được phát hiện và kết quả không đạt.

Đọc thêm về tính năng này trong bài đăng Tổng quan về CSS: Xác định những điểm cải thiện tiềm năng về CSS hoặc xem Jocelyn Yeen trên YouTube trong loạt video Mẹo về công cụ phát triển hướng dẫn bạn cách Xác định những điểm cải thiện tiềm năng về CSS bằng bảng điều khiển Tổng quan về CSS.

Ngọn hải đăng

Lighthouse là một công cụ kiểm tra khác trong Công cụ của Chrome cho nhà phát triển. Công cụ này có thể thu thập dữ liệu trên trang của bạn và báo cáo các cặp màu không truy cập được. Giao diện này có các ảnh chụp màn hình nhỏ của từng cặp màu để bạn xem lại, đạt và không đạt. Mọi tổ hợp không đạt sẽ ảnh hưởng tiêu cực đến điểm số Lighthouse của bạn.

Sau đây là ví dụ về kết quả:

Ảnh chụp màn hình của một quy trình đánh giá Lighthouse, cho thấy kết quả của văn bản có độ tương phản thấp trong các tổ hợp màu của 2 từ.

Bảng điều khiển JS

Có thể tất cả các công cụ được liệt kê cho đến nay đều không phù hợp với bạn. Có thể nơi bạn đang ở (cả ngày) là JavaScript. Sau đây là một thử nghiệm để bạn thử. Ngăn Vấn đề của bảng điều khiển có thể liên tục báo cáo mọi vấn đề về khả năng hỗ trợ tiếp cận độ tương phản màu khi bạn xây dựng. Bật tính năng này trong phần Cài đặt > Thử nghiệm, như trong hình sau:

Ảnh chụp màn hình hộp đánh dấu đã bật: &quot;Bật tính năng báo cáo tự động về vấn đề về độ tương phản thông qua bảng điều khiển Vấn đề&quot;.

Sau đó, mở ngăn Vấn đề và xem bảng đó có được khám phá hay không. Nếu có, các tệp này có thể trông như sau:

Ảnh chụp màn hình của bảng điều khiển Vấn đề trong Console, báo cáo 6 lỗi về độ tương phản.

Mô phỏng người mù màu

Khi nói đến độ tương phản màu và đảm bảo các cặp màu dễ tiếp cận, bạn nên đề cập đến công cụ mô phỏng khiếm thị. Thao tác này sẽ thay đổi màu sắc hoặc giao diện thiết kế của bạn để minh hoạ kết quả của nhiều loại bệnh mù màu, giúp bạn có cơ hội sửa đổi thiết kế để màu sắc không phải là cách duy nhất mà trải nghiệm người dùng giao tiếp với người dùng.

Ảnh chụp màn hình các tuỳ chọn trong DevTools mô phỏng để mô phỏng các khiếm khuyết thị giác: không mô phỏng, thị lực mờ, mù màu đỏ, mù màu xanh lục, mù màu xanh dương, mù màu.

Việc chỉ sử dụng màu sắc để mô tả thông tin, chẳng hạn như màu đỏ cho thông tin xấu và màu xanh lục cho thông tin tốt, không phải là phương pháp hỗ trợ tiếp cận an toàn. Một số người không nhìn thấy màu xanh lục hoặc màu đỏ giống nhau và công cụ mô phỏng này sẽ giúp bạn trải nghiệm và ghi nhớ điều đó.

Mô phỏng lựa chọn ưu tiên về hệ thống tương phản màu

Ngày càng nhiều người dùng thay đổi các chế độ cài đặt độ tương phản trong hệ điều hành để họ có thể yêu cầu cá nhân hoá độ tương phản ít hơn hoặc nhiều hơn trong giao diện người dùng. CSS có thể sử dụng chế độ cài đặt này, giống như các tuỳ chọn giao diện sáng hoặc tối. Chrome DevTools có khả năng mô phỏng tuỳ chọn ưu tiên này để các thiết kế có thể kiểm thử và điều chỉnh theo yêu cầu của người dùng mà không cần bật/tắt chế độ cài đặt từ hệ thống.

Ảnh chụp màn hình các tuỳ chọn trong DevTools mô phỏng để mô phỏng truy vấn nội dung đa phương tiện CSS prefers-contrast: không mô phỏng, nhiều hơn, ít hơn, tuỳ chỉnh.

Thử APCA theo WCAG 3.0

Một thử nghiệm khác mà bạn có thể thử là kiểm tra các cặp màu bằng hệ thống tính điểm tỷ lệ màu APCA thử nghiệm. Khi được bật thông qua phần Cài đặt > Thử nghiệm, tính năng này sẽ thay thế hệ thống tỷ lệ WCAG 2.1 bằng thuật toán kiểm tra độ tương phản mới hơn và cải tiến, cho phép bạn xem trước kết quả khi đề xuất hướng tới một tiêu chuẩn.

Ảnh chụp màn hình hộp đánh dấu đã bật: &quot;Bật thuật toán độ tương phản cảm nhận nâng cao (APCA) mới thay thế tỷ lệ tương phản trước đó và nguyên tắc AA/AAA&quot;.

Sau khi bật, hãy sử dụng chú giải công cụ kiểm tra điểm hoặc công cụ chọn màu để xem điểm ghép nối màu và xem điểm đó có đạt hay không:

Chú giải công cụ kiểm tra phần tử của Devtools đang hiển thị -100,2% cho điểm tương phản trên phần tử dd.

Kết luận

Độ tương phản màu sắc là một phần quan trọng trong việc hỗ trợ tiếp cận trên web. Việc tuân thủ độ tương phản màu sắc sẽ giúp trang web trở nên hữu ích hơn cho nhiều người nhất trong nhiều tình huống nhất. Hy vọng 3 công cụ này sẽ giúp bạn tự tin chọn màu sắc phù hợp.