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

Giới thiệu về Kiểm tra độ tương phản WCAG

Với công cụ kiểm tra độ tương phản WCAG trực tuyến miễn phí của chúng tôi giúp nhà thiết kế, lập trình viên và chuyên gia về khả năng tiếp cận xác minh rằng các tổ hợp màu chữ và màu nền đáp ứng yêu cầu về độ tương phản của Hướng dẫn về khả năng tiếp cận nội dung web (WCAG) 2.1. Độ tương phản màu đạt chuẩn giúp mọi người dùng, kể cả người có thị lực kém hoặc khiếm khuyết thị giác màu, có thể đọc và tương tác với nội dung web của bạn.

Công cụ tính tỷ lệ tương phản giữa hai màu bất kỳ bằng công thức độ chói tương đối chính thức của W3C và báo ngay tổ hợp đó đạt hay không đạt các mức tuân thủ WCAG AA và WCAG AAA cho cả chữ thường và chữ lớn. Mọi phép tính được thực hiện theo thời gian thực ngay trong trình duyệt của bạn, không có dữ liệu nào được gửi đến máy chủ.

Dù bạn đang kiểm tra khả năng tiếp cận, thiết kế giao diện mới hay rà soát nội dung hiện có để tuân thủ, công cụ kiểm tra độ tương phản này đều cho bạn kết quả chính xác theo tiêu chuẩn, kèm bản xem trước chữ trực tiếp và gợi ý cụ thể để sửa các tổ hợp màu không đạt.

Tìm hiểu các yêu cầu về độ tương phản WCAG

Bộ Hướng dẫn về khả năng tiếp cận nội dung web (WCAG) là tiêu chuẩn được quốc tế công nhận về khả năng tiếp cận web, do World Wide Web Consortium (W3C) ban hành. WCAG quy định các ngưỡng tỷ lệ tương phản cụ thể để đảm bảo chữ dễ đọc với người dùng có khả năng thị giác khác nhau.

• WCAG mức AA (chữ thường): Yêu cầu tỷ lệ tương phản tối thiểu 4,5:1. Mức này áp dụng cho văn bản nội dung, đoạn văn và mọi chữ nhỏ hơn 18pt (24px) hoặc 14pt in đậm (18,66px in đậm).
• WCAG mức AA (chữ lớn): Yêu cầu tỷ lệ tương phản tối thiểu 3:1. Chữ lớn được định nghĩa là chữ có cỡ ít nhất 18pt (24px) hoặc 14pt in đậm (18,66px in đậm).
• WCAG mức AAA (chữ thường): Yêu cầu tỷ lệ tương phản tối thiểu 7:1. Đây là mức tuân thủ khả năng tiếp cận cao nhất cho chữ cỡ thường.
• WCAG mức AAA (chữ lớn): Yêu cầu tỷ lệ tương phản tối thiểu 4,5:1 cho chữ lớn ở mức tuân thủ AAA.

Đạt tối thiểu WCAG AA được xem là tiêu chuẩn cơ bản của thiết kế web có khả năng tiếp cận và là yêu cầu của nhiều khung pháp lý trên thế giới, bao gồm Đạo luật Người khuyết tật Hoa Kỳ (ADA), Đạo luật Tiếp cận châu Âu và Mục 508 của Đạo luật Phục hồi chức năng. WCAG AAA cung cấp mức tiếp cận nâng cao, được khuyến nghị khi khả thi.

Cách tính tỷ lệ tương phản

Tỷ lệ tương phản giữa hai màu được xác định dựa trên độ chói tương đối của từng màu, theo định nghĩa trong đặc tả WCAG 2.1. Độ chói tương đối đo độ sáng cảm nhận của một màu trên thang từ 0 (đen đậm nhất) đến 1 (trắng sáng nhất).

Phép tính gồm ba bước. Đầu tiên, mỗi kênh màu (đỏ, lục, lam) được chuyển từ giá trị sRGB 8 bit (0-255) sang giá trị sRGB chuẩn hóa (0-1) bằng cách chia cho 255. Thứ hai, mỗi giá trị chuẩn hóa được hiệu chỉnh gamma: nếu giá trị từ 0,04045 trở xuống thì chia cho 12,92; ngược lại thì biến đổi bằng công thức ((value + 0.055) / 1.055) ^ 2.4. Thứ ba, các giá trị kênh đã tuyến tính hóa được kết hợp với hệ số trọng số: L = 0.2126 * R + 0.7152 * G + 0.0722 * B.

Tỷ lệ tương phản cuối cùng được tính bằng (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à độ chói tương đối của màu tối hơn. Kết quả là một giá trị từ 1:1 (không có tương phản, hai màu giống nhau) đến 21:1 (tương phản tối đa, đen thuần trên trắng thuần).

Tính năng chính

• Tính tỷ lệ tương phản theo thời gian thực bằng công thức độ chói WCAG 2.1 chính thức của W3C
• Chỉ báo đạt/không đạt cho các mức tuân thủ WCAG AA và AAA, cho cả chữ thường và chữ lớn
• Bộ chọn màu tương tác và ô nhập hex cho cả màu chữ và màu nền
• Hoán đổi màu chỉ với một cú nhấn để thử các tổ hợp màu đảo ngược
• Mười tổ hợp màu đặt sẵn nhanh, gồm các cặp màu đạt chuẩn thông dụng
• Xem trước chữ trực tiếp để thấy màu của bạn trông thế nào ở cỡ chữ thường và chữ lớn
• Tự động gợi ý màu chữ gần nhất đạt chuẩn khi tổ hợp hiện tại không đạt
• Thông tin kỹ thuật về độ chói của cả màu chữ và màu nền
• Hỗ trợ đầy đủ chế độ tối để dùng thoải mái trong mọi môi trường
• Mọi xử lý chạy cục bộ trong trình duyệt, không truyền dữ liệu đến máy chủ bên ngoài

Cách sử dụng Kiểm tra độ tương phản WCAG

1. Đặt màu chữ: Nhấn vào ô chọn màu hoặc gõ giá trị hex (ví dụ: #1A1A2E) vào ô văn bản để đặt màu chữ.
2. Đặt màu nền: Tương tự, dùng bộ chọn màu hoặc ô nhập hex để đặt màu nền phía sau chữ.
3. Xem kết quả: Tỷ lệ tương phản và kết quả đạt/không đạt cho cả bốn mức WCAG được hiển thị ngay khi bạn đổi màu.
4. Xem trước trực tiếp: Cuộn xuống để xem chữ thực tế hiển thị với tổ hợp màu bạn chọn ở cả cỡ chữ thường và cỡ chữ lớn.
5. Áp dụng gợi ý: Nếu tổ hợp không đạt WCAG AA, công cụ sẽ hiện một màu chữ gợi ý. Nhấn Áp dụng để dùng màu đó.
6. Thử các mẫu có sẵn: Dùng Mẫu nhanh để thử các tổ hợp màu đạt chuẩn hoặc không đạt chuẩn quen thuộc.
7. Hoán đổi màu: Nhấn nút Hoán đổi màu để đảo ngược lựa chọn màu chữ và màu nền.

Vì sao độ tương phản màu quan trọng với khả năng tiếp cận

Khoảng 1 trên 12 nam giới và 1 trên 200 nữ giới trên thế giới bị một dạng khiếm khuyết thị giác màu nào đó. Ngoài ra, hàng triệu người bị thị lực kém, thay đổi thị lực theo tuổi tác hoặc gặp hạn chế theo hoàn cảnh như màn hình bị chói. Độ tương phản màu đủ mức là một trong những cách hiệu quả và đơn giản nhất để giúp mọi người dùng này tiếp cận nội dung web.

Độ tương phản kém giữa chữ và nền là một trong những lỗi khả năng tiếp cận phổ biến nhất khi kiểm tra web. Bằng cách dùng công cụ kiểm tra độ tương phản WCAG trong quá trình thiết kế và phát triển, các nhóm có thể phát hiện và sửa lỗi tương phản trước khi đưa lên sản phẩm chính thức, giảm chi phí khắc phục và đảm bảo tuân thủ quy định về khả năng tiếp cận ngay từ đầu.

Độ tương phản màu tốt cũng mang lại lợi ích cho người dùng không có khuyết tật. Nó cải thiện khả năng đọc dưới ánh nắng gắt, trên màn hình chất lượng thấp và trong môi trường dễ xao nhãng. Thiết kế dễ tiếp cận là thiết kế bao trùm, tạo ra trải nghiệm tốt hơn cho tất cả mọi người.

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