Go Toolstack

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

Kiểm tra tỷ lệ tương phản màu chữ và màu nền theo tiêu chuẩn khả năng tiếp cận WCAG 2.1

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

Kiểm tra tỷ lệ tương phản màu chữ và màu nền theo tiêu chuẩn khả năng tiếp cận WCAG 2.1

Cách thức hoạt động

1
Enter Query Details
Specify the parameters, location, or query data you want to look up.
2
Fetch or Validate Data
Retrieve or validate information securely within your session.
3
Inspect Detailed Results
Review schedules, reference figures, or comprehensive data tables.

Các tiện ích bổ sung cho quy trình làm việc của bạn

Trung tâm Công cụ Lập trình viên • Quy trình làm việc & Hướng dẫn so sánh

Khám phá toàn bộ công cụ công cụ lập trình viên, giới hạn trình duyệt và hướng dẫn lựa chọn.

Khám phá trung tâm →
Trình định dạng JSON

Định dạng, làm đẹp, nén và kiểm tra cú pháp JSON trực tuyến theo chuẩn RFC 8259
Bộ chuyển đổi Base64

Mã hóa và giải mã văn bản UTF-8 hoặc tệp nhị phân sang định dạng Base64
Định dạng SQL

Làm đẹp và định dạng câu lệnh SQL với thụt lề chuẩn và viết hoa từ khóa

Hướng dẫn blog liên quan

Hướng dẫn kỹ thuật, khắc phục sự cố và quy trình tối ưu thực tế

Trung tâm kiến thức

Kiểm tra độ tương phản màu sắc WCAG: Đảm bảo khả năng tiếp cận Web AA và AAA

Khả năng tiếp cận web (Web Accessibility) không chỉ là yêu cầu pháp lý ở nhiều quốc gia mà còn là trách nhiệm đạo đức của người làm sản phẩm số. Hàng triệu người dùng trên thế giới gặp phải các vấn đề về suy giảm thị lực, mù màu hoặc thường xuyên sử dụng điện thoại ngoài trời nắng gắt, khiến họ không thể đọc được nội dung nếu chữ và màu nền thiếu độ tương phản cần thiết.

Công cụ này kiểm tra tỷ lệ tương phản chính xác giữa màu chữ (Foreground) và màu nền (Background) theo hướng dẫn WCAG 2.1 (Web Content Accessibility Guidelines) của tổ chức W3C, cung cấp đánh giá rõ ràng cho hai cấp độ tiêu chuẩn: Cấp độ AA (Tối thiểu) và Cấp độ AAA (Nâng cao) cho cả văn bản thông thường và văn bản cỡ lớn.

Công thức & Nguyên lý kỹ thuật

Tỷ lệ tương phản = (L1 + 0.05) / (L2 + 0.05) | L1: Độ chói tương đối sáng hơn, L2: Độ chói tương đối tối hơn (Tỷ lệ từ 1:1 đến 21:1)

Độ chói tương đối (Relative Luminance) được tính toán theo tiêu chuẩn sRGB bằng cách tuyến tính hóa các kênh màu R, G, B và áp dụng hệ số nhạy cảm thị giác: L = 0.2126*R + 0.7152*G + 0.0722*B.

Thực hành tốt nhất & Hướng dẫn thiết yếu

  • Mục tiêu tối thiểu đạt chuẩn AA: Đối với văn bản thông thường (dưới 18pt), tỷ lệ tương phản bắt buộc phải đạt tối thiểu 4.5:1; đối với văn bản lớn hoặc in đậm, tỷ lệ tối thiểu là 3:1.
  • Mục tiêu cấp cao đạt chuẩn AAA: Đối với các trang web chính phủ, ngân hàng hoặc y tế công cộng, hãy hướng tới tỷ lệ 7:1 cho văn bản thông thường và 4.5:1 cho văn bản lớn.
  • Kiểm tra trạng thái Placeholder: Chữ gợi ý mờ (placeholder) trong ô nhập liệu cũng phải đảm bảo tỷ lệ đọc được để không làm khó người dùng khi điền biểu mẫu.
  • Đừng chỉ dựa vào màu sắc: Ngoài độ tương phản, hãy bổ sung thêm biểu tượng (icon) hoặc gạch chân văn bản để thông tin rõ ràng cho người mù màu hoàn toàn.

Câu hỏi thường gặp (FAQ)

Tỷ lệ tương phản tối đa có thể đạt được là bao nhiêu?
Tỷ lệ tối đa là 21:1, đạt được khi kết hợp giữa màu đen hoàn toàn (#000000) và màu trắng hoàn toàn (#FFFFFF).
Thế nào được định nghĩa là 'Văn bản lớn' (Large Text)?
Theo WCAG, văn bản lớn được định nghĩa là văn bản có kích thước từ 18pt (xấp xỉ 24px) trở lên hoặc văn bản in đậm (bold) từ 14pt (xấp xỉ 18.5px) trở lên.
Nếu tỷ lệ tương phản không đạt chuẩn thì khắc phục thế nào?
Bạn có thể làm đậm màu chữ hơn một chút (đối với nền sáng) hoặc giảm độ sáng của màu nền để đẩy tỷ lệ tương phản vượt qua mốc 4.5:1.
Công cụ có hỗ trợ nhập mã màu RGBA hoặc HSL không?
Có. Bộ chuyển đổi màu sắc tích hợp hỗ trợ cả mã HEX, RGB, HSL và tự động tính toán kênh màu chuẩn xác.