Chuyển đến nội dung
ToolMug

Dùng ↑ ↓ để di chuyển, Enter để mở, Esc để đóng.

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

Nhập màu chữ và màu nền để nhận tỷ lệ tương phản WCAG và xem chữ thường, chữ lớn có đạt AA và AAA không. Nếu chưa đạt, công cụ giữ sắc độ, chỉ điều chỉnh độ sáng và gợi ý màu gần nhất đạt chuẩn để bạn áp dụng bằng một lần nhấn.

Chạy trong trình duyệt — không có dữ liệu nào bạn nhập bị tải lên

Tỷ lệ tương phản

4,54:1

  • Văn bản thường AA ≥ 4.5:1Đạt
  • Văn bản lớn AA ≥ 3:1Đạt
  • Văn bản thường AAA ≥ 7:1Không đạt
  • Văn bản lớn AAA ≥ 4.5:1Đạt

Văn bản tiêu đề lớn

Văn bản thường 16 px cần dễ đọc.

Chữ nhỏ, chú thích và chú giải.

Nút

Màu chữ gần nhất đạt AAA: #595959 (7.00:1)

Cách sử dụng

  1. Chọn màu hoặc nhập màu theo hex, rgb(), hsl(), oklch() hay tên màu.
  2. Đọc tỷ lệ và bốn kết quả WCAG, rồi xem bản xem trước trực tiếp bên dưới.
  3. Nếu chưa đạt, nhấn Dùng màu này cạnh gợi ý để áp dụng.

Giải thích tùy chọn

AA
Tối thiểu 4,5:1 cho chữ thường và 3:1 cho chữ lớn (18 pt / 24 px hoặc 14 pt / khoảng 18,7 px in đậm). Hầu hết quy định và hệ thống thiết kế yêu cầu AA.
AAA
Tối thiểu 7:1 cho chữ thường và 4,5:1 cho chữ lớn, dành cho nội dung cần khả năng đọc cao nhất.
Màu được gợi ý
Giữ sắc độ và độ bão hòa trong không gian màu OKLCH, chỉ đổi độ sáng để tìm màu gần nhất vừa đạt.
Màu trong suốt
Màu chữ có độ trong suốt được đo theo cách nó hiển thị trên nền.

Cách tính tỷ lệ

Mỗi màu được chuyển từ sRGB sang ánh sáng tuyến tính, rồi sang độ chói tương đối:

linear = c ÷ 12.92                      if c ≤ 0.04045
linear = ((c + 0.055) ÷ 1.055) ^ 2.4    otherwise   (c is 0–1)
L = 0.2126 × R + 0.7152 × G + 0.0722 × B
ratio = (L_lighter + 0.05) ÷ (L_darker + 0.05)

Màu lục được tính nhiều nhất vì mắt nhạy với nó nhất. Một số kết quả trên nền trắng:

Màu chữ Tỷ lệ Kết quả
#000000 21 : 1 AAA
#0066cc 5,57 : 1 AA chữ thường, không đạt AAA chữ thường
#767676 4,54 : 1 AA chữ thường
#777777 4,48 : 1 Không đạt AA cho chữ thường, đạt cho chữ lớn

Các định nghĩa WCAG nằm trong Understanding Success Criterion 1.4.3.

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

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

Dùng công thức WCAG 2.x: (độ chói tương đối sáng hơn + 0,05) ÷ (độ chói tương đối tối hơn + 0,05), cho kết quả từ 1:1 đến 21:1. Đen trên trắng là 21:1.

Vì sao #767676 thường được nhắc tới?

Đây là màu xám sáng nhất đạt 4,5:1 (khoảng 4,54:1) trên nền trắng, nên thường là giới hạn dưới cho chữ phụ.

Có cần kiểm tra biểu tượng và đường viền không?

Có. Từ WCAG 2.1, thành phần giao diện và hình ảnh — đường viền nút, ô nhập, biểu tượng — cần đạt ít nhất 3:1 so với màu cạnh bên.

Quyền riêng tư

Công cụ này chạy hoàn toàn trong trình duyệt của bạn. Tệp và văn bản được xử lý ngay trên thiết bị và không bao giờ được tải lên máy chủ của chúng tôi.

Công cụ liên quan