Skip to main content
appkiro.com

Kiểm tra độ tương phản màu theo WCAG

Tính tỷ lệ tương phản cho một cặp HEX tiền cảnh/nền và xem các tiêu chí đạt/chưa đạt cho chữ và thành phần UI mà công cụ kiểm tra triển khai.

Quy trình đã xác minh chạy trong trình duyệt. Tệp và giá trị màu ở lại trên trang, trừ khi một tùy chọn ghi rõ việc mở URL mạng.

Chữ lớn (24px+)

Chữ thường 16px. Nội dung mẫu để đánh giá độ dễ đọc.

Chữ nhỏ 14px cho chú thích và nội dung phụ.

Tỷ lệ tương phản

Trả lời nhanh

Tính tỷ lệ tương phản cho một cặp HEX tiền cảnh/nền và xem các tiêu chí đạt/chưa đạt cho chữ và thành phần UI mà công cụ kiểm tra triển khai. Một cặp màu đạt không có nghĩa toàn trang đáp ứng WCAG hay yêu cầu pháp lý. Dữ liệu đầu vào hiện tại không phối hợp lớp màu tiền cảnh trong suốt lên nền.

Công cụ này làm gì

Tính tỷ lệ tương phản cho một cặp HEX tiền cảnh/nền và xem các tiêu chí đạt/chưa đạt cho chữ và thành phần UI mà công cụ kiểm tra triển khai. Kiểm tra một cặp chữ/nền hoặc thành phần/nền, sau đó xác minh typography, trạng thái, focus và tín hiệu không phụ thuộc màu trong giao diện thật.

Khả năng đã xác minh

Cung cấp giá trị ban đầu

Tính tỷ lệ tương phản cho một cặp HEX tiền cảnh/nền và xem các tiêu chí đạt/chưa đạt cho chữ và thành phần UI mà công cụ kiểm tra triển khai.

Điều chỉnh tùy chọn cần thiết

Độ chói tương đối được tính từ các kênh sRGB đã tuyến tính hóa rồi so với ngưỡng 4,5:1, 3:1 và 7:1. Gợi ý sửa tìm độ sáng HSL mới trong khi giữ sắc độ và độ bão hòa.

Kiểm tra giới hạn chính xác

Một cặp màu đạt không có nghĩa toàn trang đáp ứng WCAG hay yêu cầu pháp lý. Dữ liệu đầu vào hiện tại không phối hợp lớp màu tiền cảnh trong suốt lên nền. Đối chiếu kết quả với nơi sử dụng dự kiến trước khi dùng lại.

Khi nào nên dùng

  • Kiểm tra một cặp chữ/nền hoặc thành phần/nền, sau đó xác minh typography, trạng thái, focus và tín hiệu không phụ thuộc màu trong giao diện thật.
  • Độ chói tương đối được tính từ các kênh sRGB đã tuyến tính hóa rồi so với ngưỡng 4,5:1, 3:1 và 7:1. Gợi ý sửa tìm độ sáng HSL mới trong khi giữ sắc độ và độ bão hòa. Trong mục “Khi nào nên dùng 2”, lưu ý này áp dụng riêng cho Kiểm tra độ tương phản màu theo WCAG.
  • Kiểm tra một cặp chữ/nền hoặc thành phần/nền, sau đó xác minh typography, trạng thái, focus và tín hiệu không phụ thuộc màu trong giao diện thật. Dùng công cụ liên quan đầu tiên để tiếp tục từ kết quả của Kiểm tra độ tương phản màu theo WCAG mà không đổi ngôn ngữ.

Cách sử dụng

  1. Cung cấp giá trị ban đầu

    Tính tỷ lệ tương phản cho một cặp HEX tiền cảnh/nền và xem các tiêu chí đạt/chưa đạt cho chữ và thành phần UI mà công cụ kiểm tra triển khai. Trong mục “Cách sử dụng: Cung cấp giá trị ban đầu”, lưu ý này áp dụng riêng cho Kiểm tra độ tương phản màu theo WCAG.

  2. Điều chỉnh tùy chọn cần thiết

    Độ chói tương đối được tính từ các kênh sRGB đã tuyến tính hóa rồi so với ngưỡng 4,5:1, 3:1 và 7:1. Gợi ý sửa tìm độ sáng HSL mới trong khi giữ sắc độ và độ bão hòa. Trong mục “Cách sử dụng: Điều chỉnh tùy chọn cần thiết”, lưu ý này áp dụng riêng cho Kiểm tra độ tương phản màu theo WCAG.

  3. Kiểm tra và tiếp tục

    Kiểm tra một cặp chữ/nền hoặc thành phần/nền, sau đó xác minh typography, trạng thái, focus và tín hiệu không phụ thuộc màu trong giao diện thật. Trong mục “Cách sử dụng: Kiểm tra và tiếp tục”, lưu ý này áp dụng riêng cho Kiểm tra độ tương phản màu theo WCAG.

  4. Kiểm tra giới hạn chính xác

    Một cặp màu đạt không có nghĩa toàn trang đáp ứng WCAG hay yêu cầu pháp lý. Dữ liệu đầu vào hiện tại không phối hợp lớp màu tiền cảnh trong suốt lên nền. Đối chiếu kết quả với nơi sử dụng dự kiến trước khi dùng lại. Đọc giới hạn đã nêu trước khi dùng kết quả cho quyết định môi trường thực tế hoặc khả năng tiếp cận.

Giải thích tùy chọn

Cung cấp giá trị ban đầu

Tính tỷ lệ tương phản cho một cặp HEX tiền cảnh/nền và xem các tiêu chí đạt/chưa đạt cho chữ và thành phần UI mà công cụ kiểm tra triển khai. Trong mục “Giải thích tùy chọn: Cung cấp giá trị ban đầu”, lưu ý này áp dụng riêng cho Kiểm tra độ tương phản màu theo WCAG.

Điều chỉnh tùy chọn cần thiết

Độ chói tương đối được tính từ các kênh sRGB đã tuyến tính hóa rồi so với ngưỡng 4,5:1, 3:1 và 7:1. Gợi ý sửa tìm độ sáng HSL mới trong khi giữ sắc độ và độ bão hòa. Trong mục “Giải thích tùy chọn: Điều chỉnh tùy chọn cần thiết”, lưu ý này áp dụng riêng cho Kiểm tra độ tương phản màu theo WCAG.

Kết quả được tạo như thế nào

Độ chói tương đối được tính từ các kênh sRGB đã tuyến tính hóa rồi so với ngưỡng 4,5:1, 3:1 và 7:1. Gợi ý sửa tìm độ sáng HSL mới trong khi giữ sắc độ và độ bão hòa. Trong mục “Kết quả được tạo như thế nào”, lưu ý này áp dụng riêng cho Kiểm tra độ tương phản màu theo WCAG.

Độ chính xác và giới hạn

  • Một cặp màu đạt không có nghĩa toàn trang đáp ứng WCAG hay yêu cầu pháp lý. Dữ liệu đầu vào hiện tại không phối hợp lớp màu tiền cảnh trong suốt lên nền.
  • Bộ nhớ tạm, giải mã tệp, tải xuống và tùy chọn cần quyền phụ thuộc khả năng của trình duyệt hiện tại.

Xử lý và quyền riêng tư

Quy trình đã xác minh chạy trong trình duyệt. Tệp và giá trị màu ở lại trên trang, trừ khi một tùy chọn ghi rõ việc mở URL mạng.

Mẹo sử dụng

  • Bắt đầu từ mẫu đã biết rồi chỉ đổi từng tùy chọn để dễ hiểu tác động.
  • Đọc giới hạn đã nêu trước khi dùng kết quả cho quyết định môi trường thực tế hoặc khả năng tiếp cận.

Xử lý sự cố

Dữ liệu đầu vào hoặc thao tác không hoạt động

Kiểm tra phạm vi hoặc yêu cầu tệp đang hiển thị, đặt lại công cụ rồi thử dữ liệu đầu vào nhỏ hơn hoặc được trình duyệt hỗ trợ. Tùy chọn cần quyền có thể yêu cầu ngữ cảnh bảo mật.

Độ chính xác và giới hạn

Một cặp màu đạt không có nghĩa toàn trang đáp ứng WCAG hay yêu cầu pháp lý. Dữ liệu đầu vào hiện tại không phối hợp lớp màu tiền cảnh trong suốt lên nền. Trong mục “Xử lý sự cố: Độ chính xác và giới hạn”, lưu ý này áp dụng riêng cho Kiểm tra độ tương phản màu theo WCAG.

Kiểm tra giới hạn chính xác

Một cặp màu đạt không có nghĩa toàn trang đáp ứng WCAG hay yêu cầu pháp lý. Dữ liệu đầu vào hiện tại không phối hợp lớp màu tiền cảnh trong suốt lên nền. Đặt lại công cụ rồi thử bằng giá trị chắc chắn được hỗ trợ trước khi kết luận lỗi thuật toán.

Câu hỏi về công cụ

Kiểm tra độ tương phản màu theo WCAG làm gì?

Tính tỷ lệ tương phản cho một cặp HEX tiền cảnh/nền và xem các tiêu chí đạt/chưa đạt cho chữ và thành phần UI mà công cụ kiểm tra triển khai. Trong mục “Kiểm tra độ tương phản màu theo WCAG làm gì?”, lưu ý này áp dụng riêng cho Kiểm tra độ tương phản màu theo WCAG.

Giới hạn quan trọng nhất là gì?

Một cặp màu đạt không có nghĩa toàn trang đáp ứng WCAG hay yêu cầu pháp lý. Dữ liệu đầu vào hiện tại không phối hợp lớp màu tiền cảnh trong suốt lên nền. Trong mục “Giới hạn quan trọng nhất là gì?”, lưu ý này áp dụng riêng cho Kiểm tra độ tương phản màu theo WCAG.

Dữ liệu được xử lý ở đâu?

Quy trình đã xác minh chạy trong trình duyệt. Tệp và giá trị màu ở lại trên trang, trừ khi một tùy chọn ghi rõ việc mở URL mạng. Trong mục “Dữ liệu được xử lý ở đâu?”, lưu ý này áp dụng riêng cho Kiểm tra độ tương phản màu theo WCAG.

Cần chuẩn bị dữ liệu đầu vào nào cho Kiểm tra độ tương phản màu theo WCAG?

Tính tỷ lệ tương phản cho một cặp HEX tiền cảnh/nền và xem các tiêu chí đạt/chưa đạt cho chữ và thành phần UI mà công cụ kiểm tra triển khai. Tính tỷ lệ tương phản cho một cặp HEX tiền cảnh/nền và xem các tiêu chí đạt/chưa đạt cho chữ và thành phần UI mà công cụ kiểm tra triển khai.

Cần kiểm tra gì trước khi dùng kết quả của Kiểm tra độ tương phản màu theo WCAG?

Một cặp màu đạt không có nghĩa toàn trang đáp ứng WCAG hay yêu cầu pháp lý. Dữ liệu đầu vào hiện tại không phối hợp lớp màu tiền cảnh trong suốt lên nền. Đối chiếu kết quả với nơi sử dụng dự kiến trước khi dùng lại. Trong mục “Cần kiểm tra gì trước khi dùng kết quả của Kiểm tra độ tương phản màu theo WCAG?”, lưu ý này áp dụng riêng cho Kiểm tra độ tương phản màu theo WCAG.

Quy trình nào có thể tiếp nối Kiểm tra độ tương phản màu theo WCAG?

Dùng công cụ liên quan đầu tiên để tiếp tục từ kết quả của Kiểm tra độ tương phản màu theo WCAG mà không đổi ngôn ngữ. Kiểm tra một cặp chữ/nền hoặc thành phần/nền, sau đó xác minh typography, trạng thái, focus và tín hiệu không phụ thuộc màu trong giao diện thật.

Kiểm tra một cặp chữ/nền hoặc thành phần/nền, sau đó xác minh typography, trạng thái, focus và tín hiệu không phụ thuộc màu trong giao diện thật. Trong mục “Tiếp tục quy trình màu”, lưu ý này áp dụng riêng cho Kiểm tra độ tương phản màu theo WCAG.

Tiếp tục bằng công cụ liên quan

Dùng công cụ liên quan đầu tiên để tiếp tục từ kết quả của Kiểm tra độ tương phản màu theo WCAG mà không đổi ngôn ngữ.

Mô phỏng mù màu để kiểm tra thiết kế