Bỏ qua, tới nội dung chính
Menu

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

Tỉ lệ tương phản 16,67 : 1

Đạt AAA — dùng được cho mọi cỡ chữ

Màu sắc dễ đọc cho mọi người

Bảng mã màu giúp bạn chọn màu dễ đọc.

Chữ nhỏ 13px cho chú thích · đường link

Nút viền

Chữ mẫu: chữ thường (16px) · cần 4,50 : 1 · ✓ Đạt

Về mô phỏng thị lực màu

Mô phỏng gần đúng (mô hình Machado 2009, mức nặng nhất) — chỉ để tham khảo, không thay cho thử với người dùng thật. Đừng dùng màu làm tín hiệu duy nhất: kèm chữ, biểu tượng hoặc gạch chân.

  1. 7,0 : 1 AAA — chữ thường ✓ Đạt
  2. 4,5 : 1 AA — chữ thường · AAA — chữ lớn ✓ Đạt
  3. 3,0 : 1 AA — chữ lớn (từ 24px, hoặc 18,66px in đậm) · thành phần giao diện, icon, viền ô nhập ✓ Đạt

Kiểm tra tương phản cả bảng màu

Dán danh sách HEX, rgb(), biến CSS hoặc JSON. Hàng là màu chữ, cột là màu nền; bấm một ô để xem chi tiết cặp đó ở công cụ phía trên.

AAA ≥ 7 AA ≥ 4,5 AA lớn ≥ 3 (chỉ chữ từ 24px, thành phần giao diện) ✕ < 3

Tỉ lệ tương phản giữa từng cặp màu chữ (hàng) và màu nền (cột)
Nền #1B1E25 Nền #565D6B Nền #FFFFFF Nền #F5F6F8 Nền #2F48D1
Chữ #1B1E25 Cùng màu
Chữ #565D6B Cùng màu
Chữ #FFFFFF Cùng màu
Chữ #F5F6F8 Cùng màu
Chữ #2F48D1 Cùng màu

Mở bảng này trong: Phối màu · Gradient

Độ tương phản màu là gì?

Độ tương phản màu là mức chênh lệch độ sáng giữa hai màu, thường là chữ và nền, biểu diễn bằng tỉ lệ từ 1 : 1 (hai màu giống hệt) đến 21 : 1 (đen trên trắng). Tỉ lệ càng cao, chữ càng dễ đọc — đặc biệt với người thị lực kém, người lớn tuổi hoặc khi dùng điện thoại ngoài nắng.

Cách dùng

  1. Nhập màu chữ và màu nền ở bất kỳ định dạng nào (HEX, rgb(), hsl()) hoặc bấm ô màu để chọn.
  2. Xem tỉ lệ và các dòng kết quả đạt / không đạt theo từng mức WCAG.
  3. Nếu chưa đạt, xem mục Gợi ý sửa màu: công cụ đề xuất màu chữ hoặc màu nền gần nhất đạt AA và AAA. Bấm Dùng để áp dụng ngay.

Các ngưỡng tương phản của WCAG 2.2

Tỉ lệ tương phản tối thiểu theo WCAG 2.2
Đối tượng Mức AA Mức AAA Tiêu chí
Chữ thường 4,5 : 1 7 : 1 1.4.3 và 1.4.6
Chữ lớn (≥ 24px, hoặc ≥ 18,66px in đậm) 3 : 1 4,5 : 1 1.4.3 và 1.4.6
Icon, viền ô nhập, trạng thái focus, biểu đồ 3 : 1 — 1.4.11

Mức AA là yêu cầu phổ biến trong các quy định về khả năng tiếp cận trên thế giới. Logo, chữ trang trí và thành phần đang bị vô hiệu hoá được miễn yêu cầu này. Nên kiểm tra mọi cặp chữ – nền ngay khi xây dựng bảng màu thương hiệu, trước khi màu được dùng khắp nơi.

Tỉ lệ được tính như thế nào?

Mỗi màu được quy về độ chói tương đối L (0 với đen, 1 với trắng) theo công thức của WCAG: từng kênh sRGB được tuyến tính hoá rồi cộng theo trọng số L = 0,2126 R + 0,7152 G + 0,0722 B. Tỉ lệ tương phản bằng (Lsáng + 0,05) ÷ (Ltối + 0,05). Kênh xanh lá chiếm trọng số lớn nhất vì mắt người nhạy với nó nhất — đó là lý do chữ vàng trên nền trắng rất khó đọc dù vàng là màu “đậm”.

Gợi ý sửa màu được tính thế nào?

Công cụ giữ nguyên sắc độ (theo HSL) của màu cần sửa và chỉ pha dần nó về phía đen hoặc trắng — phía nào tương phản hơn với màu còn lại — cho tới khi vừa chạm ngưỡng 4,5 : 1 (AA) hoặc 7 : 1 (AAA). Nhờ vậy màu gợi ý là màu thay đổi ít nhất so với lựa chọn ban đầu của bạn. Ví dụ chữ xám #777777 trên nền trắng đạt 4,47 : 1, chưa qua AA; gợi ý gần nhất là #767676 với 4,54 : 1. Nếu màu còn lại là xám trung bình thì không có màu nào đạt AAA, khi đó bạn cần đổi cả hai màu. Nếu dùng bảng màu có sẵn, bảng Material và bảng Tailwind trên site đã ghi sẵn màu chữ nên dùng cho từng ô.

Giới hạn

  • Công thức không xét độ dày nét chữ, kích thước thực hay hiệu ứng khử răng cưa; chữ mảnh cần tương phản cao hơn ngưỡng tối thiểu.
  • Màu có độ trong suốt phải được trộn với nền phía sau trước khi kiểm tra.
  • Đạt tỉ lệ chưa chắc đã dễ đọc với người mù màu: đừng dùng riêng màu sắc để truyền đạt thông tin.

Nguồn: W3C — WCAG 2.2, tiêu chí 1.4.3 Contrast (Minimum).

Cập nhật lần cuối: · Phương pháp và nguồn dữ liệu · Nhật ký cập nhật · Báo lỗi trang này

Công cụ liên quan