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

Tổng quan về ba công cụ và kỹ thuật dùng để kiểm thử và xác minh độ tương phản màu sắc dễ tiếp cận trong thiết kế của bạn.

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 nhẹn lại nhảy qua chú chó lười biếng" xuất hiện, trong đó mỗi từ hoặc vài từ đều có màu xanh dương nhạt. Phía trên mỗi phần của các từ được làm mờ dần là điểm tỷ lệ tương phản. Một vài từ cuối rất khó đọc vì độ tương phản thấp.

Mặc dù bạn có thể đọc được tất cả ví dụ, nhưng trường hợp này không áp dụng cho mọi người.

Độ tương phản màu có thể tiếp cận được là một phương pháp đảm bảo mọi người đều đọc được văn bản. Đôi khi việc kiểm tra độ tương phản rất dễ dàng và đôi khi lại rất khó. Đến cuối bài đăng này, bạn sẽ có ba 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 của mình để có thể giải quyết các trường hợp khó nhất.

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

Sáng kiến hỗ trợ tiếp cận 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 nhiều người dùng nhất có thể truy cập vào Internet. Những nguyên tắc làm nên các tiêu chuẩn này được gọi là Nguyên tắc về khả năng tiếp cận nội dung web, hay WCAG. Phiên bản ổn định mới nhất, WCAG 2.1, đáp ứng 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à một 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 xung quanh tỷ lệ tương phản đó để có thể truy cập web. Tuy nhiên, có những vấn đề đã biết với cách tính này. Cuối cùng, một cách đáng tin cậy hơn nữa sẽ được áp dụng, nhưng hiện tại, WCAG là giải pháp tốt nhất mà chúng tôi có.

Có những quy tắc nào?

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 cao hơn được ghi điểm với một số cao hơn, chẳng hạn như 4,5 hoặc 7 thay vì 3. Để làm quen với bảng tính điểm, hãy xem Công cụ kiểm tra độ tương phản của Polypan.

Văn bản sẽ hiển thị trên màu tím: một cặp là văn bản màu đen trên màu tím và cặp còn lại là văn bản màu trắng trên màu tím.
Cách kết hợp màu nào sau đây khiến bạn cảm thấy độ tương phản cao hơn?

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

Giờ đây, khi đã biết điều mình mong muốn, chúng ta sẽ kiểm thử điều này bằng cách nào? Dưới đây là 3 công cụ miễn phí hỗ trợ bạn kiểm tra, sửa và đo lường độ tương phản của trang web. Chúng tôi sẽ nêu điểm mạnh và điểm yếu của từng phương thức để 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 đặc biệt hiển thị độ tương phản của bất kỳ màu nào trên toàn bộ màn hình, màu sắc trên hiệu ứng chuyển màu, màu sắc với độ trong suốt, v.v. Ý định là rõ ràng, người dùng chọn các pixel để so sánh theo cách thủ công. Một tính năng ít tự động hơn một chút nhưng mang lại rất nhiều lợi ích về tính năng.
  2. VisBug
    Một tiện ích trên nhiều trình duyệt, có khả năng hiển thị nhiều lớp phủ tương phản cùng một lúc, nhưng giống như Công cụ cho nhà phát triển, đôi khi không thể phát hiện ý định.
  3. Công cụ của Chrome cho nhà phát triển
    Công cụ cho nhà phát triển của Chrome được tích hợp vào Chrome và có nhiều cách để kiểm tra, khắc phục và gỡ lỗi các vấn đề về màu sắc, nhưng có một số thiếu sót khi kiểm tra độ dốc và màu bán trong suốt và đôi khi không thể phát hiện ý định.

Pika (ứng dụng macOS)

Nếu Công cụ cho nhà phát triển hoặc VisBug không thể đánh giá độ tương phản chính xác, như khi bạn cần kiểm thử màu bên ngoài trình duyệt hoặc khi có liên quan đến độ trong suốt hay độ dốc, thì Pika sẽ giúp bạn giải quyết vấn đề. 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 là một 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 khác với Công cụ cho nhà phát triển hoặc VisBug. Công cụ cho nhà phát triển và VisBug sẽ 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 kiểm soát nhiều hơn và mở ra thêm một số trường hợp sử dụng:

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

So sánh 2 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 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 vượt qua bất kỳ mục tiêu WCAG nào.

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 từ 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 như màu xám nhưng thực sự là màu tím khử bão hoà rất cao được so sánh từ một hình ảnh có chú thích bán trong suốt mờ, 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 độ dốc

So sánh văn bản trên bả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 một chương trình truyền hình có tên 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. Chúng có tỷ lệ tương phản là 8 và đang vượt qua 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 trực quan, gỡ lỗi và thử nghiệm thiết kế trang web của họ. Nghĩa là cần có một rào cản gia nhập 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à 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 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 đưa ra 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 nhấp vào công cụ Kiểm tra khả năng hỗ trợ tiếp cận, mọi nội dung mà người dùng trỏ đến hoặc bàn phím chuyển đến đều sẽ có thông tin về khả năng hỗ trợ tiếp cận được báo cáo trong phần chú thích. 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 sau đã 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 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 với báo cáo so sánh màu sắc của màu văn bản và nền của thành phần đó. Tỷ lệ 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

Công cụ cho nhà phát triển có thể xem xét một cặp màu duy nhất hoặc nhận báo cáo về tất cả các cặp màu của bạn trên trang, nhưng VisBug cung cấp một nền tảng trung gian phù hợp bằng cách cho phép nhiều cặp màu. Hãy nhấp vào một phần tử, chú giải công cụ sẽ vẫn giữ nguyê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ú thích sẽ vẫn giữ nguyên:

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

Đ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 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 phần thành phần đó cùng một lúc. Cũng phù hợp để đánh giá 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 trang bị nhiều công cụ kiểm tra độ tương phản:

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

Trong ngăn Kiểu Công cụ của Chrome 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 bảng màu hình vuông nhỏ bên cạnh các giá trị đó. 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ể, phần giữa của công cụ sẽ hiển thị độ tương phản của màu so với nền trước hoặc nền sau.

Trong ví dụ sau, công cụ chọn màu được mở cho một giá trị màu của 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 số đã vượt qua các yêu cầu của AA và AAA WCAG 2.1:

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

Tự động sửa Công cụ chọn màu

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

Nếu bạn không chọn màu sắc, thì tính năng tự động sửa là một cách hữu hiệu để đáp ứng các nguyên tắc về hỗ trợ tiếp cận và giúp bạn không phải vất vả hoàn thành công việc.

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 khi di chuột lên 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 nằm trên góc dưới cùng bên phải. Bạn cũng có thể chọn khoá này 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 Công cụ cho nhà phát triển 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à trỏ đến bất kỳ nội dung nào trên trang sẽ hiển thị chú giải công cụ kiểm tra nhanh sau đây:

Ảnh chụp màn hình một lớp phủ rất giống với VisBug 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ì sử dụng công cụ chọn màu đòi hỏi bạn phải 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 số về độ 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ỗi thời điểm.

Vấp ngã cho đến khi bạn vượt qua 🎶

Tôi thường kiểm tra việc ghép màu bằng công cụ kiểm tra nhanh này và thấy rằng nó chỉ thiếu 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 chọn màu), tôi sẽ nhắc nhở các kênh màu trong CSS và xem cho đến khi tôi đạt tỷ lệ cần thiết. Tôi gọi quá trình này là "tăng đột biến cho đến khi bạn vượt qua" vì tôi sẽ gặp các số kênh màu cho đến khi chúng vượt qua WCAG 2.1.

Các bước 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 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ỏ chuột vào một mục tiêu.
  4. Nhấn lên/xuống trên bàn phím để thay đổi các số trong giá trị màu.

Cách này hiệu quả 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ỏ qua một mục tiêu. Hãy đảm bảo rằng bạn không nhấp vào mục tiêu hoặc tiêu điểm sẽ di chuyển từ vùng giá trị màu và bạn không cần đẩy các giá trị nữa cho đến khi được lấy nét lại.

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 nhiều cách để xem mỗi lần một cặp màu, nhưng Tổng quan về CSS có thể thu thập thông tin toàn bộ trang của bạn và hiển thị tất cả các cặp màu không thể truy cập 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ụ chụp ảnh Tổng quan về CSS. Ứng dụng này cho thấy 7 vấn đề về độ tương phản, cho thấy các cặp màu đã 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 này 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 Jecelyn Yeen trên YouTube trong loạt video Mẹo cho nhà phát triển của họ sẽ hướng dẫn bạn cách Xác định những điểm cải thiện có thể có 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. Ứng dụng 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 cách kết hợp không thành công đều sẽ tác động tiêu cực đến điểm Lighthouse của bạn.

Những kết quả đó có thể hiển thị như sau:

Ảnh chụp màn hình một đánh giá Lighthouse, cho thấy kết quả của văn bản có độ tương phản thấp của tổ hợp màu sắc 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ê tới giờ vẫn chưa thể hiện vị trí của bạn. Có thể nơi bạn ở (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ề hỗ trợ tiếp cận về độ 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ư minh hoạ sau đây:

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

Sau đó, mở ngăn Vấn đề và xem có phát hiện nào không. Nếu có, các trạng thái đó có thể có dạng như sau:

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

Mô phỏng mù màu

Mặc dù liên quan đến chủ đề về độ tương phản màu và đảm bảo khả năng kết hợp màu dễ tiếp cận, nhưng bạn nên chỉ ra 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 của thiết kế để minh hoạ kết quả của nhiều loại 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 về các lựa chọn trong công cụ mô phỏng Công cụ cho nhà phát triển để mô phỏng khiếm khuyết về thị lực: không mô phỏng, thị lực mờ, mù màu, mù màu, mù màu, mù màu.

Việc chỉ sử dụng màu sắc để mô tả thông tin là một phương pháp hỗ trợ tiếp cận an toàn không phải là phương pháp an toàn, chẳng hạn như màu đỏ cho thông tin xấu và màu xanh lục cho mục đích tốt. Một số người không thấy màu xanh lục hoặc màu đỏ như 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 của hệ thống tương phản màu

Ngày càng nhiều người dùng thay đổi chế độ cài đặt độ tương phản trong hệ điều hành, cho phép họ yêu cầu chế độ cá nhân hoá độ tương phản ít hoặc nhiều hơn trong giao diện người dùng. CSS có thể nhấn vào chế độ cài đặt này, tương tự như với các lựa chọn ưu tiên về giao diện sáng hoặc tối. Công cụ của Chrome cho nhà phát triển có khả năng mô phỏng lựa chọn ưu tiên này để các thiết kế có thể thử nghiệm 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 về các tuỳ chọn trong Công cụ mô phỏng cho nhà phát triển để mô phỏng truy vấn nội dung đa phương tiện CSS ưu tiên độ tương phản: không mô phỏng, nhiều hơn, ít hơn, tuỳ chỉnh.

Thử WCAG 3.0 APCA

Một thử nghiệm khác mà bạn có thể thử là kiểm thử khả năng ghép màu với hệ thống tính điểm tỷ lệ màu APCA thử nghiệm. Được bật thông qua phần Cài đặt > Thử nghiệm, hệ thống này 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 hoạt động theo tiêu chuẩn.

Ảnh chụp màn hình hộp đánh dấu đã bật: &quot;Enable new Pertional Compatibility đựng (APCA) để 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 số có vượt qua hay không:

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

Kết luận

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