Trình kiểm tra tương phản màu

Kiểm tra tỷ lệ tương phản WCAG 2.1 cho khả năng tiếp cận.

Dữ liệu của bạn không rời khỏi thiết bị
Văn bản lớn (24 px đậm)
Văn bản thông thường ở 16 px · The quick brown fox jumps over the lazy dog.
-
Tỷ lệ tương phản
AA Bình thường
≥ 4.5:1
-
AA Lớn
≥ 3:1
-
AAA Bình thường
≥ 7:1
-
AAA Lớn
≥ 4.5:1
-

Cách sử dụng

  1. Chọn màu tiền cảnh (văn bản) và màu nền.
  2. Tỷ lệ tương phản được cập nhật ngay lập tức.
  3. Kiểm tra xếp hạng WCAG (AA/AAA) cho văn bản bình thường và lớn.
  4. Nhấp Hoán đổi để đảo các màu.

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

WCAG là gì?

WCAG (Web Content Accessibility Guidelines) là các tiêu chuẩn quốc tế để làm cho nội dung web dễ tiếp cận. Cấp AA là tiêu chuẩn yêu cầu phổ biến nhất. Cấp AAA là cao nhất.

Cái gì được coi là «văn bản lớn»?

Văn bản lớn được định nghĩa là ít nhất 18 pt (24 px) hoặc 14 pt (18,66 px) đậm. Nó có yêu cầu tương phản thấp hơn vì nó dễ đọc hơn.

Tỷ lệ tương phản nào để hướng tới?

Đối với phần thân văn bản, hướng tới ít nhất 4,5 : 1 (AA). Để có khả năng tiếp cận tốt nhất, hướng tới 7 : 1 (AAA). Tiêu đề và văn bản lớn cần ít nhất 3 : 1.

WCAG thực sự đo lường điều gì

«Độ tương phản» trong khả năng tiếp cận web không phải là «màu sắc trông khác nhau như thế nào», mà là một tỷ lệ độ sáng tương đối chính xác giữa hai màu. Độ sáng là giá trị gần đúng theo nhận thức về độ sáng của màu đối với người quan sát có thị lực bình thường. Tỷ lệ chạy từ 1:1 (hai màu có độ sáng giống nhau, vô hình với nhau) đến 21:1 (đen thuần #000000 so với trắng thuần #ffffff). Ba tiêu chí thành công WCAG chuẩn sử dụng tỷ lệ này:

Ngưỡng 4,5:1 không phải tùy tiện. Cách dẫn xuất riêng của WCAG dùng đường cơ sở ANSI 3:1 cho thị lực bình thường nhân với 1,5 cho người dùng có thị lực 20/40 (ngưỡng thường được dùng để xác định «thị lực kém» về mặt pháp lý). 4,5 = 3 × 1,5. Ngưỡng AAA 7:1 mở rộng logic tương tự cho thị lực khoảng 20/80. Logo, tên thương hiệu, và văn bản ngẫu nhiên hoặc trang trí được miễn trừ, nhưng mọi thứ khác đều phải tuân theo quy tắc.

Công thức

Công thức tương phản trong kỹ thuật G18 của WCAG có ba bước. Đầu vào là các giá trị kênh sRGB 8-bit (0-255), mỗi giá trị được chuyển đổi sang phạm vi 0-1 trước:

  1. Tuyến tính hóa sRGB (hoàn tác đường cong gamma). Với mỗi kênh V: nếu V ≤ 0,04045, V_linear = V ÷ 12,92; ngược lại V_linear = ((V + 0,055) ÷ 1,055)^2,4. (Các tài liệu WCAG cũ dùng 0,03928; W3C đã cập nhật errata thành 0,04045 để khớp với đặc tả sRGB chính thức, sự khác biệt về số là không đáng kể.)
  2. Tính độ sáng tương đối: L = 0,2126·R + 0,7152·G + 0,0722·B (đã tuyến tính hóa). Các trọng số lấy từ hàm độ sáng quang học của người quan sát chuẩn CIE 1931, mắt người nhạy cảm nhất với màu xanh lá (~71%), rồi đến đỏ (~21%), rồi xanh lam (~7%). Đây là lý do tại sao văn bản xanh lam thuần trên nền trắng có thể không đạt tương phản dù các màu trông rất khác nhau.
  3. Tính tỷ lệ: (L1 + 0,05) ÷ (L2 + 0,05), trong đó L1 là màu sáng hơn và L2 là màu tối hơn. Độ lệch 0,05 mô phỏng ánh sáng môi trường trên màn hình thông thường, và ngăn tỷ lệ bị tràn khi một màu gần đen.

Ví dụ tính toán cho đen trên trắng: trắng có L = 1,0, đen có L = 0, vì vậy tỷ lệ là (1 + 0,05) ÷ (0 + 0,05) = 21. Đó là độ tương phản tối đa có thể trong sRGB.

Thế nào được tính là «văn bản lớn»?

WCAG định nghĩa văn bản cỡ lớn là ít nhất 18 point (độ đậm thường) hoặc 14 point đậm. Quy đổi sang CSS pixels theo tỷ lệ 1pt = 1,333px do W3C công bố:

Hầu hết trình duyệt mặc định văn bản thân trang là 16px / 12pt, không phải cỡ lớn. Một lỗi phổ biến là coi mọi tiêu đề là cỡ lớn; một <h3> được định kiểu ở 18px thường vẫn thuộc quy tắc văn bản thường 4,5:1.

Trường hợp biên nổi tiếng: #767676 trên nền trắng

Nhà thiết kế theo đuổi chủ nghĩa tối giản thường chọn màu xám trung tính cho văn bản. Hai giá trị trông giống nhau với mắt thường lại nằm ở hai phía đối lập của ngưỡng WCAG:

Màu nền trướcMàu nền sauTỷ lệAA Bình thường
#000000#ffffff21.00Đạt (tối đa)
#595959#ffffff~7.0Đạt + AAA
#767676#ffffff4.54Đạt (vừa đủ)
#777777#ffffff4.48Không đạt
#959595#ffffff3.00Không đạt (chỉ cỡ lớn)
#ffff00#ffffff1.07Không đạt

Một lần dịch chuyển hex một ký tự, sự khác biệt giữa #767676 và #777777: chuyển màu xám trông giống nhau từ đạt sang không đạt, vì WCAG cấm rõ ràng việc làm tròn tỷ lệ lên. WebAIM đặc biệt chỉ ra #777777 là «màu xám được dùng phổ biến» không đáp ứng AA. Điểm này tạo ra một phần đáng kể lỗi kiểm tra tự động trong các lần quét site thực tế.

Điểm yếu của công thức

Công thức độ sáng tương đối nhanh và xác định, nhưng có những điểm yếu về nhận thức đã được ghi nhận rõ:

APCA (Accessible Perceptual Contrast Algorithm) là ứng viên thay thế đang được thử nghiệm cho WCAG 3. Nó trả về một giá trị Lc có dấu duy nhất từ khoảng −108 đến +106, nhận biết cực tính, và bao gồm bảng tra font-weight / cỡ chữ. APCA hiện là tài liệu tham khảo phi thương mại beta, không phải mục tiêu tuân thủ pháp lý (các site production vẫn nên nhắm WCAG 2.1 / 2.2 AA) nhưng là kiểm tra khả năng đọc chính xác hơn, đặc biệt cho dark mode. Chrome DevTools có bản xem trước APCA tích hợp trong color picker.

Tại sao điều này quan trọng về mặt pháp lý

WCAG 2.2 trở thành Khuyến nghị W3C vào ngày 5 tháng 10 năm 2023, nhưng các tiêu chí tương phản tiếp tục không thay đổi so với 2.1. Tương phản màu sắc là một trong những vấn đề được trích dẫn nhiều nhất trong các vụ kiện về khả năng tiếp cận kỹ thuật số, và một số khu vực pháp lý thực tế đã bắt buộc điều này:

Tương phản màu so với mù màu

Một điểm nhầm lẫn phổ biến: tỷ lệ WCAG dựa trên độ sáng và vẫn hữu ích cho hầu hết người dùng mù màu; tỷ lệ 4,5:1 dẫn xuất từ độ sáng tương ứng với tín hiệu nhận thức mạnh ngay cả khi mất các tín hiệu màu sắc. Đó là lý do tại sao các tiêu chí tương phản đặt cạnh một tiêu chí riêng, 1.4.1 Sử dụng Màu sắc, cấm dựa vào màu sắc một mình để truyền tải thông tin. Tương phản không cho biết biểu đồ đỏ-xanh lá có thể đọc được với người mù màu (deuteranope) hay không, chỉ cho biết mỗi màu riêng lẻ có tương phản với nền biểu đồ hay không. Biểu đồ và UI có trạng thái cần các mẫu, nhãn hoặc hình dạng xếp chồng lên màu sắc.

Danh sách kiểm tra thực tế

Thêm câu hỏi

Tại sao vàng thuần trên trắng không đạt dù trông sáng?

Vàng (#ffff00) trên trắng là 1,07:1, gần như không có độ tương phản. Công thức độ sáng gán trọng số cho xanh lá là 71% và đỏ là 21%, vì vậy màu vàng (R+G) có độ sáng rất gần với màu trắng. Vàng trên đen, ngược lại, là 19,56:1, một trong những tổ hợp dễ đọc nhất được biết đến, đó là lý do nó được dùng cho biển báo đường và cảnh báo mũ bảo hiểm.

Tôi có nên luôn nhắm mục tiêu AAA không?

Không. WCAG chính thức nói: «Không khuyến nghị yêu cầu tuân thủ Level AAA như chính sách chung cho toàn bộ site vì không thể đáp ứng tất cả Tiêu chí Thành công Level AAA cho một số nội dung.» AA là mục tiêu pháp lý ở hầu hết mọi nơi; AAA dành cho nội dung thông tin có tầm quan trọng cao (nội dung dài, tài liệu chính phủ dành cho công chúng, ấn phẩm ưu tiên khả năng tiếp cận).

Công cụ tự động có thể phát hiện mọi lỗi tương phản không?

Không. axe-core, Lighthouse và các công cụ kiểm tra tương tự đánh dấu lỗi văn bản trên màu phẳng đáng tin cậy, nhưng chúng không thể kiểm tra văn bản chồng lên hình ảnh nền, CSS gradient, nền pseudo-element, hoặc màu viền CSS; những thứ đó được đánh dấu là «chưa hoàn chỉnh» và cần xem xét thủ công. Công cụ chọn màu trực tiếp như thế này độc lập hữu ích để lấy mẫu màu nền chủ đạo từ hình ảnh và kiểm tra cặp văn bản/nền trước khi triển khai.

Công cụ này có hỗ trợ độ trong suốt / alpha không?

Trang này kiểm tra các cặp hex mờ đục. Nếu văn bản hoặc nền của bạn dùng alpha, độ tương phản thực tế phụ thuộc vào những gì ở phía sau nó; bạn cần tính màu nền trước đã ghép trước rồi kiểm tra màu mờ đục kết quả.

Có dữ liệu nào được gửi đến máy chủ không?

Không. Công thức độ sáng và tỷ lệ được tính toán trong trình duyệt của bạn; các màu không bao giờ rời khỏi thiết bị của bạn. Trang hoạt động offline sau khi đã tải.

Công cụ liên quan

Bộ chuyển đổi màu Trình tạo bảng màu trực tuyến miễn phí Trình tạo gradient CSS