5 công cụ 'kiểm tra độ tương phản' dễ sử dụng cho người phụ trách.

2024/07/29

Bộ kiểm tra độ tương phảnTính toán độ tương phản giữa màu trước (văn bản và các yếu tố đồ họa) và màu nền trên trang web và hình ảnh, tức là khoảng cách giữa sáng và tối.Xem tỷ lệ đó có tuân thủ hướng dẫn truy cập web như WCAG hay JIS hay không.Công cụ để đánh giáĐây được gọi là bộ kiểm tra độ tương phản hoặc bộ kiểm tra độ tương phản màu.

Bài viết này sẽ giới thiệu năm công cụ kiểm tra độ tương phản tiêu biểu dưới đây.

Cùng với việc giới thiệu những công cụ này, tôi sẽ giải thích chi tiết về các điểm cần lưu ý khi kiểm tra tỷ lệ tương phản.Các nhân viên chịu trách nhiệm về khả năng tiếp cận web hãy tham khảo bài viết này.

Năm công cụ kiểm tra độ tương phản dễ sử dụng cho người phụ trách khả năng tiếp cận

Có nhiều loại công cụ kiểm tra tỷ lệ tương phản cần thiết cho các nhà thiết kế và nhân viên phụ trách khả năng tiếp cận để kiểm tra tỷ lệ tương phản của trang web hoặc nội dung của công ty.

Vì vậy, ở đây,Công cụ kiểm tra tỷ lệ tương phản tiêu biểu và dễ sử dụngChúng tôi sẽ giới thiệu năm công cụ. Có các công cụ có thể sử dụng trên trang web (trình duyệt) hoặc các công cụ có thể cài đặt và sử dụng, nhưng,Tất cả đều là công cụ miễn phí để sử dụng.Tôi sẽ giới thiệu, vì vậy hãy thoải mái kiểm tra trải nghiệm ngay.

Tên công cụ	Đặc điểm	Môi trường sử dụng
① WebAIM	Công cụ có thể sử dụng ngay sau khi truy cập trang web. Mặc dù là trang web tiếng Anh, nhưng giao diện người dùng rất đơn giản và dễ hiểu, dễ sử dụng.	Trình duyệt
② ColorTester	Bạn có thể kéo và thả hình ảnh để kiểm tra tỷ lệ tương phản. Nó là phần mềm cần cài đặt, do đó việc sử dụng tại nơi làm việc có thể bị hạn chế.	Cài đặt (Windows / Mac)
③ AdobeColor	Ngoài chức năng kiểm tra tỷ lệ tương phản, công cụ này còn được trang bị nhiều tính năng phong phú liên quan đến phối màu. Nó cũng có thể tích hợp với các sản phẩm của Adobe như Photoshop, Illustrator và inDesign.	Trình duyệt
④ Bộ kiểm tra độ tương phản màu WCAG	Cài đặt vào Google Chrome và sử dụng như một tiện ích mở rộng. Đây là một công cụ đặc biệt hữu ích khi kiểm tra tỷ lệ tương phản của trang web.	Trình duyệt (Tiện ích mở rộng Chrome)
⑤ ContrastGrid	Công cụ cho phép kiểm tra danh sách độ tương phản của màu sắc đã được thiết lập. Người không giỏi phối màu có thể dễ dàng hiểu và quyết định màu sắc sẽ sử dụng vì có thể thiết lập nhiều mã màu.	Trình duyệt

 

① WebAIM

Thiết lập màu chữ (Foreground) và màu nền (Background) để tính toán độ tương phản,Xác nhận xem có đáp ứng tiêu chuẩn WCAG khôngBạn có thể. Màu sắc có thể được chỉ định bằng mã màu hoặc công cụ chọn màu, và có thể điều chỉnh độ sáng. Khi bạn thiết lập màu sắc, tỷ lệ tương phản sẽ được tính toán theo thời gian thực và có thể xem trước với văn bản thông thường, văn bản in đậm, cũng như các đối tượng đồ họa như dấu kiểm.

Kết quả của từng kiểm tra có đạt mức độ tuân thủ hay không có thể được nhanh chóng nhận thấy qua việc hiển thị 'Pass' hoặc 'Fail'.Dù điều hướng bằng tiếng Anh nhưng rất đơn giản và dễ hiểu.Vì vậy sẽ không có khó khăn trong việc sử dụng theo cách thông thường.

Trang chính thức:WebAIM

② ColorTester

Tính toán tỷ lệ tương phản của hai màu và đánh giá theo tiêu chuẩn JIS X 8341-3:2010 (WCAG 2.0).Bằng cách kéo và thả tệp hình ảnh vào cửa sổ, có thể tự động suy đoán và đánh giá màu sắc nền và màu sắc trước của hình ảnh..

Đây là một công cụ sản xuất tại Nhật Bản, hỗ trợ cả hai hệ điều hành Windows và Mac.Cần phải cài đặt công cụ.Các phiên bản hỗ trợ cho các hệ điều hành là từ Windows 8.1 trở lên và Mac OS X 10.10 trở lên. Cũng có phiên bản tiếng Anh.

Trang chính thức:ColorTester

③ Adobe Color

Công cụ do Adobe cung cấp, chuyên phát triển và bán các công cụ cho nhà sáng tạo. Công cụ này không chỉ có nhiều chức năng hữu ích cho hoạt động sáng tạo mà còn bao gồm một bộ kiểm tra độ tương phản dùng để kiểm tra khả năng truy nhập.

Nó có cảm giác tương tự như các bộ kiểm tra độ tương phản khác, nhưngNó cũng đề xuất màu có độ tương phản tốt nhất với màu đã chọn.Mặc dù là công cụ do Adobe sản xuất, bạn có thể sử dụng mà không cần cài đặt hay đăng nhập, nhưng nếu đăng nhập,Nó có thể liên kết với các sản phẩm khác của Adobe, vì vậy nó là một công cụ dễ sử dụng cho các nhà thiết kế đang sử dụng ứng dụng Adobe thường xuyên.Điều đó là đúng.

Trang chính thức:Adobe Color

④ Bộ kiểm tra độ tương phản màu WCAG

Tiện ích mở rộng của Google ChromeĐây là một công cụ có thể được sử dụng như vậy. Nó sẽ nhanh chóng trích xuất các màu sắc được sử dụng trong trang web và đánh giá độ tương phản của từng màu. Nó có thể được kiểm tra từng trang, do đó rất dễ dàng để kiểm tra website trong giai đoạn thử nghiệm hoặc bảo trì với những trang đã chạy.

Khi bạn nhấp vào bất kỳ màu nào hiển thị trong bảng điều khiển bên, nó sẽ phóng to những nơi đang sử dụng màu đó trong trang.Bạn cũng có thể dễ dàng kiểm tra các trang web nhiều thông tin như cổng thông tin.。

Trang chính thức:Công cụ kiểm tra độ tương phản màu WCAG

⑤ Bảng độ tương phản

Bộ kiểm tra độ tương phản thường là các công cụ yêu cầu chỉ định màu sắc và kiểm tra độ tương phản mỗi lần, nhưng công cụ nàyCó dạng hiển thị bảng màu (danh sách) để chọn kết hợp độ tương phản mong muốn.Vì vậy, phương pháp này rất được khuyến nghị cho những người mới bắt đầu thiết kế hoặc những người không giỏi về phối màu.

Khi bạn truy cập trang chủ chính thức, bạn sẽ thấy các màu kết hợp mặc định đã được hiển thị như trong hình. Khi bạn thêm mã màu vào hộp bên trái, bạn có thể xem danh sách các kết hợp với các màu khác trên bảng.Mức độ tuân thủ như 'AA' và 'AAA' được hiển thị bằng nhãn, và sự khác biệt màu sắc của nhãn cho phép biết được liệu có tuân thủ hay không.Vì vậy, các kết hợp có thể sử dụng cũng rõ ràng ngay lập tức.

Trang chính thức:Contrast Grid

Chúng tôi đã giới thiệu năm bộ kiểm tra độ tương phản hữu ích, nhưng tại sao cần phải kiểm tra độ tương phản? Chúng tôi sẽ giải thích tiếp theo.

Tại sao kiểm tra tỷ lệ tương phản lại cần thiết

khi Luật sửa đổi về việc xóa bỏ phân biệt đối xử đối với người khuyết tật có hiệu lực vào tháng 4 năm 2024, sẽ phải cung cấp sự quan tâm hợp lý.Khả năng tiếp cận web cũng là một biện pháp cần thiếtđã được thực hiện. Để thực hiện điều này, trước tiên cần xác định mức độ truy cập của trang web công ty, vì vậy cần phải xem xét trang web từ nhiều góc độ.

Đặc biệt, vì thông tin được thu nhận chủ yếu từ trực quan trên trang web, không chỉ đối với những người không có khuyết tật thị giác (Những người không bị khuyết tật thị giác)Xem trang web có cho phép người dùng có thị lực kém, người cao tuổi, hoặc người có đặc điểm thị giác màu sắc cũng nhận diện được văn bản và hình ảnh hay không.Cần phải kiểm tra kỹ lưỡng để đảm bảo khả năng tiếp cận web và thực hiện cải tiến khi cần thiết.

Và đây là một trong những chỉ số cần thiết cho việc kiểm tra đó「Tỷ lệ tương phản màu」Đúng vậy. Tỷ lệ độ tương phản là một chỉ số cho sự khác biệt về độ sáng giữa hai màu sắc trên màn hình (thường là màu trước và màu nền). Tỷ lệ này thể hiện độ sáng tương đối của hai màu bằng các con số, với tỷ lệ độ tương phản cao hơn giúp phân biệt màu sắc dễ dàng hơn. Nói chung,Tỷ lệ tương phản được biểu thị trong khoảng từ 1:1 đến 21:1, với giá trị cao hơn có nghĩa là tỷ lệ tương phản mạnh hơn = dễ nhận diện hơn.。

Về cách mà sự khác biệt về độ tương phản thực sự ảnh hưởng đến khả năng nhìn như thế nào, hãy xem dưới đây.

◆Sự khác biệt trong khả năng nhìn thấy dựa trên tỷ lệ tương phản.

Hơn nữa, để tạo hình ảnh cho những người có thị lực kém khó nhìn thấy chữ với hình ảnh mờ, tôi đã làm mờ bức ảnh ở trên.

◆Sự khác biệt trong cách nhìn khi bị mờ

Như vậy,Khi tỷ lệ độ tương phản cao, có sự khác biệt lớn giữa màu nền và màu trước, làm cho biên giới giữa các màu dễ nhận biết, tức là khả năng đọc tốt hơn.Ví dụ, nếu màu chữ và màu nền là 1:1, thì cả hai đều không thể nhận diện vì chúng có cùng một màu, trong khi trong trường hợp 21:1, nó sẽ được hiển thị rõ ràng bằng trắng và đen.Trong các trang web có sự kết hợp của nhiều yếu tố như văn bản và hình ảnh, cần chú ý đến tỷ lệ độ tương phản một cách chi tiết để đảm bảo khả năng tiếp cận web.。

Vì vậy, độ tương phản của thiết kế trang web của bạn„Xác nhận xem có đáp ứng các yêu cầu bảo đảm khả năng tiếp cận web hay không”Việc kiểm tra độ tương phản là thao tác cần thiết để đánh giá, nhưng việc đóCông cụ "Kiểm tra Độ tương phản" là thiết yếu để đánh giá định lượng.Và đó là điều xảy ra. Vậy hãy tiếp tục giải thích về các yêu cầu đối với khả năng tiếp cận web trong phần tiếp theo.

Ba điểm cần lưu ý khi kiểm tra độ tương phản

Khi sử dụng công cụ kiểm tra tỷ lệ tương phản để kiểm tra tỷ lệ tương phản của trang web hoặc nội dung, bạn không nên quyết định dựa trên cảm giác của mình.Cần phải tiến hành kiểm tra theo các tiêu chuẩn khả năng tiếp cận web đã được quy định.Tại đây, tôi sẽ giải thích 3 điểm cần lưu ý khi kiểm tra tỷ lệ tương phản.

Điểm ① Hiểu độ tương phản đạt tiêu chuẩn JIS.

Như đã đề cập trước đó, việc sửa đổi Đạo luật xóa bỏ phân biệt đối xử với người khuyết tật đã quy định rằng việc cung cấp sự quan tâm hợp lý là bắt buộc, do đó việc đảm bảo khả năng tiếp cận web trở thành cần thiết cho mọi doanh nghiệp.

Có nhiều yếu tố cấu thành trang web, và mỗi yếu tố đều có các tiêu chuẩn khả năng tiếp cận được quy định, tất cả các tiêu chuẩn đạt được đều được quy định bởi tiêu chuẩn quốc tế WCAG 2.0 (Hướng dẫn khả năng tiếp cận nội dung web 2.0). Tại Nhật Bản,Tiêu chuẩn JIS (JIS X 8341-3:2016)Đó là một ví dụ cho điều đó.

Hơn nữa, mức độ đạt được trong tiêu chuẩn này được phân loại thành các cấp độ phù hợp từ A đến AAA, theo Bộ Nội vụ và Truyền thông.Để đảm bảo khả năng truy cập web, cần tuân thủ AA hoặc AAA (khuyến nghị).Được cho là.

Tham khảo:Yêu cầu về khả năng truy cập đối với các trang web của cơ quan công cộng (Bộ Nội vụ).

Ngoài ra, tỷ lệ độ tương phản cũng có tiêu chuẩn được quy định.

◆ Tỷ lệ tương phản để tuân thủ cấp độ AA, AAA

Cấp độ tuân thủ	Tỷ lệ tương phản cần thiết
AA	Trên 4.5:1
AAA	Trên 7:1

Nói cách khác, đối với một trang web đáp ứng khả năng tiếp cận internet,Đòi hỏi tỷ lệ độ tương phản ít nhất là 4.5:1.Nhiều công cụ kiểm tra độ tương phản tự động tính toán tỷ lệ độ tương phản, vì vậy hãy chú ý đến tỷ lệ này khi kiểm tra.

Độ tương phản 7:1 của AAA được dựa trên người dùng có tầm nhìn giảm xuống khoảng 20/80, và W3C giả định rằng những người có tầm nhìn giảm xuống dưới 20/80 thường sử dụng công nghệ hỗ trợ để truy cập nội dung.

AAA không phải là yêu cầu bắt buộc mà chỉ là khuyến nghị,Nếu bạn đang thiết kế cho người dùng có thị lực thấp hoặc có đặc điểm màu sắc mà không có công nghệ hỗ trợ, bạn nên chú ý đến tỷ lệ độ tương phản là 7:1.Điều đó là đúng.

Tham khảo:Hiểu tiêu chuẩn đạt được 1.4.6 | Sách hướng dẫn WCAG 2.0 (W3C)

Điểm ② Cũng cần chú ý đến kích thước chữ

Tại điểm ①, đã nói rằng "Tỷ lệ tương phản cần ít nhất là 4.5:1", nhưng thật ra có những trường hợp ngoại lệ.Trong các trường hợp dưới đây, không nhất thiết phải đạt được tỷ lệ 4.5:1.

◆ Các ngoại lệ về tiêu chuẩn tỷ lệ tương phản

・Ngoại lệ ① Văn bản lớn và văn bản in đậm.
Đối với văn bản lớn hoặc văn bản in đậm (văn bản thông thường từ 18 điểm trở lên hoặc văn bản in đậm 14 điểm),Tỷ lệ tương phản là 3:1Nếu vậy sẽ đáp ứng tiêu chuẩn. Điều này là do chữ lớn có tính dễ đọc cao hơn, vì vậy người ta cho rằng việc có tỷ lệ tương phản hơi thấp một chút cũng không có vấn đề.

・ Ngoại lệ ② Văn bản hoặc logo với mục đích trang trí.
Văn bản phụ trợ có mục đích trang trí và logo công ty sẽ không được tính trong các yêu cầu tỷ lệ tương phản này. Những điều này được sử dụng cho thiết kế hoặc nhận diện thương hiệu, không được coi là phương tiện truyền đạt thông tin.

・Ngoại lệ ③ Văn bản trong hình ảnh
Văn bản trong ảnh hoặc hình ảnh cũng được bao gồm trong các trường hợp ngoại lệ. Tuy nhiên,Đối với văn bản quan trọng để cung cấp thông tin, ngay cả khi ở trong hình ảnh cũng phải có tỷ lệ tương phản thích hợp.được khuyến nghị.

Điểm ③ Cần chú ý đến người dùng có đặc điểm thị giác

Đến giờ, chúng tôi đã tập trung giải thích chỉ về tỷ lệ tương phản, nhưng khi xem xét khả năng tiếp cận màu sắc, thực sự chỉ tỷ lệ tương phản là không đủ. Bởi vì,Sự cân nhắc cho người dùng có đặc điểm màu sắcBởi vì điều đó cũng phải được xem xét.

Chẳng hạn, dưới đây là cách sắp xếp các nút thường thấy trên các mẫu email của trang web, và tỷ lệ độ tương phản giữa màu nền và màu chữ của cả hai nút đều tuân theo tiêu chuẩn AA.

◆ Nút đạt tiêu chuẩn độ tương phản AA

Người ta thường nghĩ rằng 'tỷ lệ độ tương phản đã đạt tiêu chuẩn nên khả năng tiếp cận đã được đảm bảo', nhưng đó là một suy nghĩ nhanh chóng. Điều này liên quan tới nút này,Màu D (màu sắc 2 loại 2 màu)Khi bạn nhìn qua bộ lọc của, nó sẽ hiển thị như dưới đây.

◆Cách nhìn thấy nút loại D

Như vậy,Màu sắc của hai nút có thể giống nhau và khó phân biệt ngay từ cái nhìn đầu tiên.Tuy tỷ lệ tương phản đã đạt tiêu chuẩn, nhưng cũng không thể nói rằng tính khả dụng là tốt. Nói cách khác, trong việc phối màu, cần xem xét không chỉ tỷ lệ tương phản mà còn cả đặc điểm về màu sắc.

Ngoài ra, từ góc độ chăm sóc người dùng có đặc điểm về thị giác màu sắc,"Không chỉ truyền tải thông tin bằng sự khác biệt màu sắc"Điều này cũng là một điểm quan trọng cần lưu ý.

Với Uniweb, người dùng có thể thay đổi tỷ lệ tương phản.

Nếu công ty bạn không có tài nguyên để kiểm tra độ tương phản trang web, hãy sử dụngCông cụ khả dụng "Uniweb".Chúng tôi khuyên bạn nên triển khai. Uniwed chỉ cần thêm một dòng mã vào mã nguồn của trang web để cung cấp nhiều tính năng truy cập khác nhau.Triển khai ngay trong ngàyĐây là một công cụ dạng plugin.

Một đặc điểm lớn của Uniweb làNgười dùng có thể truy cập vào trang web và sử dụng nhiều tính năng truy cập khác nhau.Điểm này. Trong các tính năng khả năng tiếp cận được triển khai, có cả chức năng điều chỉnh tỷ lệ tương phản, giúp bạn dễ dàng tăng cường khả năng đọc bằng cách chuyển đổi giữa „màu đảo ngược”, „tương phản tối”, „tương phản sáng” chỉ bằng một cú nhấp chuột.

◆Chức năng thay đổi độ tương phản của Uniweb

Ngoài ra, trong giao diện quản lýBáo cáo chẩn đoán liên quan đến khả năng tiếp cận web của trang.Bạn có thể xác nhận. Trong báo cáo, mức độ phù hợp (A, AA, AAA) sẽ được hiển thị cho từng mục, và cách sửa mã cụ thể cho những khu vực cần sửa cũng sẽ được cung cấp.Bạn sẽ không cần phải tìm kiếm các điểm cần sửa chữa qua nhiều công cụ kiểm tra khác nhau, giúp quá trình hoạt động trở nên hiệu quả hơn.。

◆Giao diện quản lý của Uniweb

Ở phía dưới bên phải của bài viết nàyNhấp vào 'Biểu tượng người hình tròn màu xanh'.Nếu bạn làm như vậy, menu khả năng tiếp cận của Uniweb sẽ hiển thị. Ngoài việc chuyển đổi độ tương phản, nhiều tính năng khả năng tiếp cận khác cũng được cung cấp, vì vậy hãy chắc chắn kiểm tra các chức năng của Uniweb.

Tóm tắt

Trên các trang web có nhiều thông tin từ thị giác,Đảm bảo khả năng nhìn thấy và đọc được cho tất cả người dùng.Chúng ta phải thực hiện điều đó. Do đó, cần hiểu những sự quan tâm cần thiết cho người dùng có thị lực yếu, người cao tuổi, người có đặc điểm về màu sắc, và áp dụng thiết kế khả năng tiếp cận phù hợp cho trang web của mình.

Bộ kiểm tra độ tương phản là một công cụ rất hữu ích trong việc thực hiện thiết kế truy cập. Nhiều công cụ kiểm tra khả năng truy cập web có phí cũng bao gồm tính năng này, nhưngBộ kiểm tra độ tương phản có thể hoàn toàn được sử dụng như một công cụ miễn phí.Vì vậy, hãy bắt đầu kiểm tra trang web của công ty bạn ngay lập tức.

Bài viết này đã tập trung vào việc giải thích việc kiểm tra tỷ lệ tương phản trong khả năng tiếp cận web.Nếu bạn muốn biết thêm chi tiết về khả năng truy cập web, hãy tham khảo các bài viết trước của chúng tôi và "Sổ tay hướng dẫn về việc triển khai khả năng truy cập web" do Cơ quan số cung cấp.。

Tham khảo:Bài viết trước "Những biện pháp về khả năng truy cập web mà người phụ trách trang web cần thực hiện"、Hướng dẫn triển khai khả năng tiếp cận web (Cơ quan Chính phủ số)

Ngoài ra, tại Uniweb của chúng tôi,cũng cung cấp dịch vụ chẩn đoán miễn phí cho trang web của bạn.Chúng tôi đang thực hiện điều này, vì vậy nếu bạn là doanh nghiệp đang xem xét sự tuân thủ khả năng tiếp cận web cho trang web của mình,Liên kết bên dướiHãy đăng ký một cách dễ dàng hơn.

Chẩn đoán khả năng tiếp cận miễn phí (Uniweb)

Bộ kiểm tra độ tương phản