Công cụ kiểm tra độ tương phản màu chuẩn WCAG là gì?
Công cụ kiểm tra độ tương phản màu chuẩn WCAG là công cụ tính mức chênh lệch độ chói giữa màu văn bản và màu nền, rồi đối chiếu tỷ lệ đó với các ngưỡng tương phản văn bản AA và AAA. Người dùng cung cấp hai màu để biết sự kết hợp này có đạt ngưỡng dành cho chữ bình thường hoặc chữ lớn hay không.
Nhu cầu mà công cụ giải quyết là đánh giá màu chữ bằng một căn cứ định lượng, thay vì chỉ dựa vào sở thích hoặc cảm giác trên màn hình. Một cặp màu trông đẹp vẫn có thể khiến chữ khó phân biệt với nền. Điều này đáng chú ý với đoạn văn dài, chú thích hoặc thông tin cần đọc nhanh.
Từ Công cụ, công cụ trả về ba nhóm kết quả: tỷ lệ tương phản, năm trạng thái PASS/FAIL (bốn cho văn bản, một cho phi văn bản) theo nhóm chữ và mức đánh giá, cùng bản xem trước áp dụng hai màu. Kết quả được cập nhật khi đầu vào thay đổi; công cụ cũng cho phép đảo vai trò màu chữ và màu nền.
Phạm vi cần hiểu ngay từ đầu là kiểm tra một cặp màu. Công cụ không quét toàn bộ website và không chứng nhận một trang đã tuân thủ WCAG. Theo kiến thức nền về khả năng tiếp cận, tương phản văn bản chỉ là một phần trong nhiều yêu cầu liên quan đến nội dung và giao diện web.
Những thuật ngữ cần hiểu khi kiểm tra tương phản màu
Mã màu HEX
Mã màu HEX biểu diễn ba kênh đỏ, xanh lá và xanh dương bằng chữ số hệ thập lục phân. Dạng đầy đủ là #RRGGBB; dạng rút gọn là #RGB, trong đó mỗi chữ số được lặp lại khi mở rộng. Ví dụ, #abc tương đương #aabbcc. Đây là đầu vào màu mà phép tính của công cụ hỗ trợ. Không nên nhầm HEX RGB với mã có thêm kênh trong suốt, tên màu hoặc cú pháp rgb() và hsl(); ô nhập không chuyển đổi những dạng đó thành HEX.
Độ chói tương đối
Độ chói tương đối là giá trị mô tả độ sáng của màu theo mô hình tính toán dùng các kênh sRGB đã được tuyến tính hóa và cộng theo trọng số. Nó là cơ sở để so sánh hai màu trong phép tính tương phản. Giá trị này không phải trung bình cộng đơn giản của ba kênh RGB, cũng không phải độ bão hòa. Chẳng hạn, màu có sắc rất rực chưa chắc tạo độ chênh sáng lớn với nền; cảm giác “nổi bật” về sắc màu không thay thế được việc tính độ chói.
Tỷ lệ tương phản
Tỷ lệ tương phản là tỷ số giữa độ chói của màu sáng hơn và màu tối hơn, sau khi cộng 0.05 vào mỗi độ chói. Với màu RGB hợp lệ, kết quả nằm trong khoảng từ 1:1 đến 21:1. Đây không phải phần trăm hay số điểm thể hiện độ đẹp của phối màu. Tỷ lệ càng lớn cho thấy chênh lệch độ chói càng lớn, nhưng không mô tả toàn bộ trải nghiệm đọc. Hai màu khác sắc rõ rệt vẫn có thể cho tỷ lệ thấp.
Mức AA và AAA trong WCAG
AA và AAA là các mức tuân thủ trong bộ hướng dẫn về khả năng tiếp cận nội dung web WCAG. Đối với tương phản văn bản, AAA có ngưỡng cao hơn AA khi xét cùng nhóm chữ. Trong công cụ này, các nhãn đó chỉ dùng để đối chiếu năm phép đối chiếu tương phản được triển khai. Một ô PASS ở mức AAA không có nghĩa website đạt toàn bộ cấp AAA, vì mức tuân thủ còn liên quan đến nhiều tiêu chí khác ngoài màu chữ và nền.
Chữ lớn
Trong bối cảnh tương phản văn bản, chữ lớn là chữ từ 18 pt, hoặc từ 14 pt nếu in đậm. Nhóm này có ngưỡng thấp hơn chữ bình thường. Theo quy đổi đơn vị CSS, 18 pt tương đương 24 CSS px, còn 14 pt xấp xỉ 18.67 CSS px. Đây là kiến thức nền, không phải chức năng đo chữ của công cụ. Không nên xem mọi tiêu đề là chữ lớn hoặc đánh đồng pt với px; cần xác nhận kích thước và độ đậm thực tế.
Đầu vào và cách đọc kết quả kiểm tra
Hai màu cần cung cấp
Đầu vào gồm màu văn bản ở phía trước và màu nền phía sau. Mỗi màu có thể được chọn bằng bảng chọn màu hoặc nhập dưới dạng HEX. Hai màu mặc định trong giao diện là #111111 cho chữ và #fdfd96 cho nền. Mã màu là giá trị biểu diễn RGB, không có đơn vị đo vật lý.
Khi gõ, ô nhập lọc bỏ ký tự không thuộc hệ thập lục phân và thêm dấu # nếu còn ký tự hợp lệ. Cơ chế này chỉ chuẩn hóa ký tự, không hiểu tên màu hay chuyển đổi cú pháp màu khác. Vì vậy, nên cung cấp trực tiếp mã HEX ba hoặc sáu chữ số.
Mã ba chữ số được mở rộng thành sáu chữ số khi bạn rời ô nhập; trước lúc đó, giao diện báo mã chưa hợp lệ và ẩn kết quả. Bảng chọn màu được đồng bộ khi đầu vào có dạng # kèm sáu chữ số HEX hợp lệ.
Tỷ lệ, trạng thái và bản xem trước
Kết quả chính có dạng x.xx : 1, với hai chữ số sau dấu thập phân. Năm ô đánh giá tách riêng AA và AAA cho chữ bình thường và chữ lớn, cộng một ô phi văn bản ở mức AA. Khi áp dụng vào thiết kế, hãy đọc ô tương ứng với loại chữ thực tế, không chọn nhóm có PASS chỉ vì kết quả thuận lợi hơn.
Màu của con số tỷ lệ là tín hiệu bổ sung: xanh nhạt từ 4.5 trở lên, vàng từ 3 đến dưới 4.5, đỏ nhạt khi dưới 3. Nó không thay thế năm trạng thái; chẳng hạn, màu xanh không tự cho biết chữ bình thường đã đạt AAA.
Bản xem trước có một mẫu chữ lớn, đậm và một mẫu chữ bình thường. Các mẫu giúp quan sát phối màu, nhưng không chứng minh chữ trên website của bạn có cùng phông, kích thước hoặc điều kiện hiển thị.
Nếu cặp màu chưa đạt AA cho chữ thường, nút “Tự sửa về mức AA” sẽ chỉnh sáng hoặc tối một màu cho vừa đủ ngưỡng mà không đổi tông màu gốc; nút “Sao chép kết quả” lấy tỷ lệ cùng toàn bộ trạng thái PASS/FAIL. Dưới hai ô nhập còn có các cặp màu mẫu bấm nhanh.
Cách tính tỷ lệ tương phản và xác định PASS/FAIL
Từ mã màu đến độ chói
Chuỗi tính toán được xác nhận từ mã gồm: đổi HEX thành RGB, chuẩn hóa từng kênh, tuyến tính hóa rồi tính độ chói. Mỗi kênh ban đầu là số nguyên từ 0 đến 255. Chia cho 255 sẽ đưa kênh về giá trị c trong khoảng 0 đến 1.
Theo triển khai, nếu c ≤ 0.03928 thì giá trị tuyến tính bằng c/12.92. Nếu c lớn hơn mốc này, giá trị bằng ((c + 0.055)/1.055)2.4. Bước này giúp chuyển giá trị màu sang dạng phù hợp cho phép tính độ chói, thay vì dùng trực tiếp các số RGB.
Sau đó, độ chói được tính theo L = 0.2126R + 0.7152G + 0.0722B, với R, G, B là các kênh đã tuyến tính hóa. Đây là thuật toán không phải bằng chứng về việc cập nhật theo mọi phiên bản tiêu chuẩn.
Công thức và các ngưỡng đánh giá
Tỷ lệ bằng (L sáng hơn + 0.05)/(L tối hơn + 0.05). Hai màu được sắp theo độ chói, không theo vai trò chữ hay nền. Vì thế, đảo hai màu hợp lệ giữ nguyên tỷ lệ và trạng thái, dù bản xem trước thay đổi.
| Nhóm văn bản | Mức đánh giá | Ngưỡng PASS |
|---|---|---|
| Chữ bình thường | AA | ≥ 4.5:1 |
| Chữ bình thường | AAA | ≥ 7:1 |
| Chữ lớn | AA | ≥ 3:1 |
| Chữ lớn | AAA | ≥ 4.5:1 |
| Phi văn bản | AA | ≥ 3:1 |
Dấu ≥ có nghĩa tỷ lệ bằng ngưỡng cũng được tính là đạt. Công cụ hiển thị cả năm phép đối chiếu — bốn cho văn bản và một cho phi văn bản (biểu tượng, viền ô nhập, nút bấm) — nhưng không tự quyết định văn bản của bạn thuộc nhóm nào.
Làm tròn và trường hợp đầu vào không hợp lệ
PASS/FAIL được xét bằng tỷ lệ chưa làm tròn; chỉ số hiển thị được định dạng đến hai chữ số thập phân. Do đó, một kết quả sát ngưỡng có thể trông như đã chạm mốc sau khi làm tròn nhưng vẫn FAIL.
Nếu một mã chưa đủ ba hoặc sáu chữ số HEX hợp lệ, giao diện báo mã màu chưa hợp lệ và ẩn tỷ lệ cùng các ô đánh giá, thay vì hiển thị một con số thay thế. Kết quả cũ không được giữ lại làm căn cứ; chỉ sau khi cả hai mã hoàn chỉnh mới nên diễn giải tỷ lệ của cặp màu.
Ví dụ đọc kết quả với các cặp màu cụ thể
Đen trên trắng và trường hợp đảo màu
Giả sử chữ là #000000, nền là #ffffff, cả hai đều đục và nền đồng nhất, không có ảnh hay lớp phủ. Theo công thức trong mã, màu đen có độ chói 0 và màu trắng có độ chói 1. Tỷ lệ bằng (1 + 0.05)/(0 + 0.05) = 21.
Kết quả hiển thị được suy ra là 21.00 : 1, PASS ở cả năm ô. Đây là tỷ số không có đơn vị vật lý. Nếu đổi thành chữ trắng trên nền đen, hai độ chói vẫn như cũ nên tỷ lệ và trạng thái giữ nguyên; cách phối màu trong bản xem trước sẽ đảo lại.
Với mã rút gọn #fff và #000, phép tính cũng dùng đúng hai màu trắng và đen. Khi xác nhận thay đổi, ô nhập được mở rộng thành #FFFFFF và #000000.
Hai màu giống nhau
Giả sử cả chữ và nền đều là #ffffff, không có độ trong suốt và nền đồng nhất. Hai độ chói bằng nhau, nên tử số và mẫu số trong công thức bằng nhau. Kết quả là 1.00 : 1, thấp hơn ngưỡng nhỏ nhất 3:1; cả năm ô đều FAIL.
Trong tình huống này, kết quả 1:1 đến từ hai màu hợp lệ giống nhau, không phải lỗi đầu vào. Nó cho biết cặp màu không có chênh lệch độ chói để phân biệt chữ với nền, dù bản thân màu trắng không có vấn đề khi dùng riêng.
Màu xám đạt chữ lớn nhưng chưa đạt chữ bình thường
Giả sử chữ là #777777 trên nền trắng #ffffff, nền đồng nhất và không có độ trong suốt. Ba kênh màu xám đều bằng 119/255 sau chuẩn hóa. Áp dụng nhánh lũy thừa cho độ chói xấp xỉ 0.184475; tỷ lệ tương phản xấp xỉ 4.478089.
Giao diện sẽ thể hiện 4.48 : 1. Cặp này đạt chữ lớn AA nhưng chưa đạt chữ bình thường AA, chữ bình thường AAA hoặc chữ lớn AAA; riêng ô phi văn bản AA thì đạt, vì chỉ cần 3:1. Nếu dùng cho đoạn văn bình thường, không thể lấy ô chữ lớn AA làm căn cứ chấp nhận.
Các kết quả trên được tính theo công thức và giả định đã nêu.
Ứng dụng khi chọn màu cho nội dung và giao diện
Chọn màu cho đoạn văn và tiêu đề
Với đoạn văn, chú thích và nội dung nhỏ, hãy đối chiếu nhóm chữ bình thường. Đây là cách tránh chọn màu có vẻ ổn trong mẫu chữ lớn nhưng chưa đáp ứng ngưỡng của nội dung đọc thực tế. Mục tiêu AA hay AAA cần được xác định phù hợp với yêu cầu thiết kế.
Với tiêu đề, trước hết xác nhận kích thước và độ đậm. Tên kiểu “tiêu đề chính” không tự quyết định nhóm tương phản. Nếu chưa đủ điều kiện chữ lớn, vẫn phải đọc kết quả dành cho chữ bình thường.
Khi màu thương hiệu chưa đạt ngưỡng với nền dự kiến, người dùng có thể tự thử sắc độ khác hoặc đổi nền rồi đối chiếu lại. Công cụ phản hồi tỷ lệ cho từng cặp; Công cụ không có chức năng tự đề xuất màu thay thế.
Rà soát cặp màu ở từng trạng thái giao diện
Một thành phần có thể dùng màu khác nhau trong chế độ sáng, chế độ tối hoặc khi tương tác. Nên kiểm tra riêng từng cặp chữ–nền thực tế, thay vì mặc định kết quả của trạng thái ban đầu áp dụng cho mọi trạng thái khác.
Đây là cách rà soát thủ công từng cặp màu, không phải chế độ kiểm tra hàng loạt được công cụ tự thực hiện. Ghi lại cặp màu và nhóm chữ tương ứng giúp áp dụng kết quả đúng vị trí.
Với chữ trên nút, tỷ lệ chỉ giải thích tương phản giữa chữ và nền nút đã nhập. Nó không xác nhận mọi yêu cầu dành cho thành phần giao diện, chẳng hạn cách nhận biết đường viền hoặc trạng thái tương tác.
Kiểm tra bằng tỷ lệ khác gì đánh giá bằng mắt?
Đánh giá bằng mắt giúp nhận ra cảm giác đọc trong bố cục: chữ có quá mảnh không, đoạn văn có dày đặc không, hoặc nền có gây phân tán chú ý không. Tuy nhiên, nhận xét này chịu ảnh hưởng của màn hình, ánh sáng môi trường và khả năng thị giác của người quan sát. Một người đọc rõ không có nghĩa tất cả người dùng đều có trải nghiệm tương tự.
Kiểm tra bằng tỷ lệ cung cấp căn cứ định lượng nhất quán cho hai giá trị màu. Với cùng đầu vào hợp lệ, công thức tạo ra cùng kết quả, thay vì phụ thuộc vào cảm giác “đủ rõ”. Ưu điểm này đặc biệt hữu ích khi nhiều người cùng rà soát một bảng màu.
Dù vậy, tỷ lệ không mô tả đầy đủ phông chữ, độ dày nét, giãn dòng hoặc nội dung. Công cụ không đưa các yếu tố đó vào phép tính. Một cặp màu vượt ngưỡng vẫn cần được đặt trong thiết kế thật để đánh giá khả năng đọc và cách trình bày.
Sắc màu cũng không đồng nghĩa với độ chói. Hai màu khác sắc rõ rệt có thể gần nhau về độ chói; hai màu cùng sắc nhưng một màu sáng, một màu tối có thể chênh lệch lớn. Cách làm hợp lý là kết hợp tỷ lệ với quan sát trên thiết kế thực tế, không dùng cảm giác để bỏ qua FAIL hoặc dùng PASS để bỏ qua vấn đề trình bày.
Giới hạn của công cụ và những điều không nên suy ra
Phạm vi kiểm tra một cặp màu
PASS chỉ xác nhận cặp màu hợp lệ đạt ngưỡng tương ứng trong phép tính. Nó không chứng nhận website đạt AA hoặc AAA, cũng không bảo đảm mọi người đều đọc dễ dàng. Công cụ không có chức năng quét website hay tự đo cỡ chữ; phần gợi ý chỉ chỉnh sáng hoặc tối một màu cho vừa đủ ngưỡng AA, và nút sao chép chỉ xuất kết quả của cặp màu đang kiểm tra.
Công cụ không xử lý pha trộn màu trong suốt, lấy mẫu ảnh nền hoặc phân tích gradient. Một tỷ lệ của hai màu đặc không đại diện cho mọi vị trí trên nền thay đổi. Khi đầu vào chưa hợp lệ, giao diện ẩn kết quả thay vì hiển thị giá trị thay thế; tỷ lệ 1.00 : 1 chỉ xuất hiện khi hai màu hợp lệ giống nhau.
Những điều cần xác nhận trong thiết kế thực tế
Cần xác định màu nền thực sự phía sau chữ, cùng kích thước và độ đậm đang sử dụng. Nếu có lớp phủ hoặc nhiều lớp nền, hãy làm rõ màu hiển thị cuối cùng trước khi diễn giải tỷ lệ. Bản xem trước không xác nhận các điều kiện đó thay bạn.
Bài viết của công cụ. Dữ liệu cũng không đủ để kết luận chính sách lưu trữ, theo dõi hay truyền dữ liệu của toàn website. Vì vậy, không nên suy ra cam kết chỉ xử lý cục bộ, không lưu dữ liệu hoặc bảo mật tuyệt đối.
Câu hỏi thường gặp
Vì sao tỷ lệ hiển thị 4.50 : 1 nhưng chữ bình thường vẫn có thể FAIL?
Vì con số hiển thị được làm tròn đến hai chữ số thập phân, còn trạng thái dùng tỷ lệ gốc. Một giá trị thấp hơn 4.5 nhưng đủ gần có thể hiển thị thành 4.50 mà vẫn chưa đạt ngưỡng chữ bình thường AA. Hãy đọc trạng thái của đúng ô thay vì tự làm tròn lên để coi là đạt. Với phối màu sát ranh giới, nên điều chỉnh để có khoảng chênh rõ hơn và kiểm tra lại kết quả.
Đảo màu văn bản và màu nền có làm thay đổi tỷ lệ tương phản không?
Không, nếu cả hai mã màu hợp lệ. Công thức luôn lấy độ chói lớn hơn làm tử số và độ chói nhỏ hơn làm mẫu số sau khi cộng 0.05, nên vai trò chữ hay nền không ảnh hưởng tỷ lệ. Bốn trạng thái cũng giữ nguyên. Tuy nhiên, trải nghiệm quan sát có thể khác khi đổi từ nền sáng sang nền tối. Kết quả bằng nhau về tương phản không có nghĩa hai cách trình bày giống hệt nhau về cảm giác đọc.
Có thể nhập mã HEX ba chữ số như #fff không?
Có. Bộ phân tích hỗ trợ HEX ba chữ số bằng cách lặp từng chữ số thành một cặp, nên #fff được tính như #ffffff. Khi thay đổi ở ô nhập được xác nhận, mã rút gọn cũng được mở rộng thành sáu chữ số. Khả năng này chỉ áp dụng cho dạng HEX RGB hợp lệ, không mở rộng sang mã có độ trong suốt hoặc tên màu. Nếu một ô còn thiếu ký tự, cần hoàn thiện nó trước khi dùng tỷ lệ.
Vì sao công cụ ẩn kết quả khi tôi chưa nhập xong mã màu?
Khi một trong hai mã chưa đủ ba hoặc sáu chữ số HEX, giao diện báo mã màu chưa hợp lệ và ẩn tỷ lệ cùng các ô đánh giá, thay vì hiển thị một con số tạm thời. Kết quả cũ cũng không được giữ lại. Hãy kiểm tra cả hai mã đã đủ ba hoặc sáu chữ số HEX; chỉ sau khi đầu vào hợp lệ mới nên diễn giải kết quả như tỷ lệ của cặp màu.
Tiêu đề có được dùng ngưỡng chữ lớn chỉ vì nhìn có vẻ to không?
Không. Cần căn cứ vào kích thước và độ đậm thực tế, không chỉ cảm giác hoặc tên kiểu văn bản. Nhóm chữ lớn áp dụng từ 18 pt, hoặc từ 14 pt khi in đậm. Theo đơn vị CSS, các mốc tương ứng là 24 px và khoảng 18.67 px. Công cụ không đo tiêu đề trong trang của bạn. Khi chưa xác nhận đủ điều kiện, nên đối chiếu nhóm chữ bình thường thay vì chọn ngưỡng thấp hơn vì tiện lợi.
Có thể dùng kết quả này cho chữ trên ảnh, gradient hoặc nền trong suốt không?
Không nên dùng một cặp màu đặc để kết luận cho toàn bộ những nền đó. Công cụ không lấy mẫu ảnh, không phân tích các điểm trên gradient và không tính pha trộn độ trong suốt. Bạn cần xác định màu thực sự phía sau chữ tại các vị trí liên quan rồi đánh giá riêng. Nếu nền thay đổi theo vị trí hoặc nội dung, một điểm có tỷ lệ tốt không bảo đảm các điểm khác cũng tốt. Bản xem trước nền đồng nhất không mô phỏng được tình huống này.
Cả năm ô đều PASS có nghĩa website đã đạt WCAG AAA không?
Không. Cả năm ô PASS chỉ cho biết hai màu đã nhập vượt các ngưỡng tương phản văn bản mà công cụ đối chiếu. Website có thể còn cặp màu khác chưa được kiểm tra và nhiều yêu cầu tiếp cận ngoài tương phản. Hơn nữa, việc áp dụng phụ thuộc màu nền thực tế và cách phân loại chữ. Hãy xem kết quả là căn cứ cho một phần đánh giá thiết kế, không phải chứng nhận tuân thủ toàn trang hoặc bảo đảm mọi người đều đọc thuận lợi.