Kiểm tra tương phản – Tỷ lệ tương phản WCAG

Kiểm tra tương phản màu cho trợ năng

Tương phản màu ảnh hưởng trực tiếp đến khả năng đọc. Khi chữ không đủ nổi bật so với nền, nội dung trở nên khó đọc — đặc biệt với người có thị lực kém hoặc khiếm khuyết về nhận biết màu sắc.

Công cụ này tính tỷ lệ tương phản giữa hai màu bất kỳ và đánh giá theo tiêu chí WCAG 2.1. Nhập màu ở định dạng HEX, RGB hoặc HSL để nhận kết quả ngay lập tức.

Tìm hiểu các mức tương phản WCAG

Hướng dẫn về Khả năng tiếp cận Nội dung Web (WCAG) quy định tỷ lệ tương phản tối thiểu để đảm bảo văn bản dễ đọc. Có hai mức tuân thủ:

• WCAG AA, chữ thường — tỷ lệ tương phản ít nhất 4.5:1
• WCAG AA, chữ lớn — tỷ lệ tương phản ít nhất 3:1 (chữ lớn: từ 18pt hoặc từ 14pt in đậm)
• WCAG AAA, chữ thường — tỷ lệ tương phản ít nhất 7:1
• WCAG AAA, chữ lớn — tỷ lệ tương phản ít nhất 4.5:1

AA là mức tiêu chuẩn mà hầu hết website và ứng dụng hướng tới. AAA là mức nâng cao, được khuyến nghị cho nội dung cần độ dễ đọc tối đa.

Cách sử dụng công cụ kiểm tra tương phản

1. Nhập màu chữ (foreground) — ở định dạng HEX, RGB hoặc HSL
2. Nhập màu nền ở bất kỳ định dạng được hỗ trợ nào
3. Xem tỷ lệ tương phản và bản xem trước trực tiếp của chữ trên nền đó
4. Kiểm tra kết quả đạt/không đạt cho các mức WCAG AA và AAA
5. Dùng nút hoán đổi để nhanh chóng đảo ngược màu chữ và màu nền

Khi nào cần kiểm tra tương phản màu

• Khi chọn màu chữ và màu nền cho website hoặc ứng dụng
• Khi xác minh hệ thống thiết kế đáp ứng yêu cầu trợ năng
• Khi kiểm tra màu nút, liên kết hoặc biểu tượng trên các nền khác nhau
• Khi kiểm tra tổ hợp màu trong chế độ tối (dark mode)
• Khi tuân thủ các tiêu chuẩn trợ năng pháp lý (ADA, EAA, Section 508)

Chính xác, tức thì và miễn phí

Công cụ tính tỷ lệ tương phản theo công thức độ chói tương đối chuẩn WCAG 2.1. Mọi phép tính đều thực hiện ngay trong trình duyệt — không có dữ liệu nào được gửi đến máy chủ.

Cần tìm hoặc chuyển đổi màu trước? Hãy dùng Bộ chọn màu để trích xuất màu từ hình ảnh, hoặc Bộ chuyển đổi màu để chuyển giữa HEX, RGB và HSL.

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

Tỷ lệ tương phản bao nhiêu thì tốt cho văn bản?

Với chữ kích thước thông thường, WCAG AA yêu cầu tỷ lệ tương phản ít nhất 4.5:1. Với chữ lớn (18pt hoặc 14pt in đậm trở lên), mức tối thiểu là 3:1. Ở mức trợ năng cao nhất (WCAG AAA), chữ thường cần ít nhất 7:1.

Sự khác biệt giữa WCAG AA và AAA là gì?

AA là mức tuân thủ tiêu chuẩn mà hầu hết website và ứng dụng nên đạt được. AAA là mức nâng cao với yêu cầu tương phản nghiêm ngặt hơn, được khuyến nghị cho nội dung cần độ dễ đọc tối đa, chẳng hạn như trang web chính phủ hoặc y tế.

Chữ lớn theo WCAG được định nghĩa như thế nào?

Chữ lớn được định nghĩa là cỡ 18 điểm (24px) trở lên ở độ đậm thường, hoặc 14 điểm (khoảng 18,66px) trở lên khi in đậm. Chữ lớn có yêu cầu tương phản thấp hơn vì kích thước giúp nó dễ đọc hơn.

Công cụ này hỗ trợ những định dạng màu nào?

Bạn có thể nhập màu ở định dạng HEX (ví dụ: #1E293B), RGB (ví dụ: rgb(30, 41, 59)) hoặc HSL (ví dụ: hsl(222, 33%, 17%)). Công cụ tự động nhận diện định dạng.

Tỷ lệ tương phản được tính như thế nào?

Tỷ lệ tương phản được tính theo công thức WCAG 2.1: (L1 + 0.05) / (L2 + 0.05), trong đó L1 là độ chói tương đối của màu sáng hơn và L2 là của màu tối hơn. Kết quả dao động từ 1:1 (không có tương phản) đến 21:1 (tương phản tối đa, đen trên trắng).

Công cụ có hoạt động trên điện thoại không?

Có. Công cụ kiểm tra tương phản hoạt động trên mọi thiết bị có trình duyệt hiện đại — máy tính, máy tính bảng hay điện thoại.

Công cụ này có miễn phí không?

Có. ColourPicker.app hoàn toàn miễn phí, không cần đăng ký tài khoản.

Tôi có thể kiểm tra tương phản cho thành phần giao diện, không chỉ văn bản không?

WCAG 2.1 cũng yêu cầu tỷ lệ tương phản tối thiểu 3:1 cho các thành phần giao diện và đối tượng đồ họa có ý nghĩa (Tiêu chí thành công 1.4.11). Bạn có thể dùng công cụ này để kiểm tra cả những tổ hợp đó — công thức tính hoàn toàn giống nhau.