Chuyển đến công cụ
JoeLucky

Nhấn ★ trên công cụ để lưu lại

Danh mục công cụ

Mã nguồn thành ảnhTạo gradient CSSGlassmorphism CSSTạo box-shadowTạo loader CSSTạo blob SVGSVG sang PNGKiểm tra độ tương phản màuChuyển đổi PX / REM / EM
JoeLucky

Công cụ trực tuyến thiết thực, tất cả trong một nơi

Chính sách quyền riêng tưĐiều khoản dịch vụ

© 2026 JoeLucky®. Bảo lưu mọi quyền.

  1. JoeLucky
  2. /CSS và thiết kế
  3. /Kiểm tra độ tương phản màu

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

Kiểm tra tỷ lệ tương phản WCAG giữa hai màu và xem kết quả đạt hay không đạt AA, AAA.

Văn bản mẫu — Cô gái Việt Nam yêu quý xinh đẹp và dịu dàng
18.88:1Tỷ lệ tương phản (công thức WCAG)
Chữ thường AA (≥ 4,5:1)Đạt
Chữ thường AAA (≥ 7:1)Đạt
Chữ lớn AA (≥ 3:1)Đạt
Chữ lớn AAA (≥ 4,5:1)Đạt

Công cụ này chỉ báo kết quả thô của công thức tương phản WCAG và đạt/không đạt theo bốn ngưỡng — không có nghĩa là «trang này tuân thủ WCAG». Việc tuân thủ thực tế còn phụ thuộc cỡ chữ, độ đậm và phần còn lại của thiết kế.

CSS VÀ THIẾT KẾ TƯƠNG TỰ

Xem tất cả
Mã nguồn thành ảnh

Biến đoạn mã thành ảnh chụp màn hình đẹp mắt.

Mở →
Tạo gradient CSS

Thiết kế gradient tuyến tính, tỏa tròn và conic bằng giao diện trực quan, sao chép CSS ngay.

Mở →
Glassmorphism CSS

💬 Bình luận

?

Chưa có bình luận nào. Hãy là người đầu tiên!

Kiểm tra độ tương phản màu LÀ GÌ?

Trình kiểm tra độ tương phản màu tính tỷ lệ tương phản giữa màu chữ và màu nền bằng công thức WCAG, đánh dấu trạng thái đạt AA/AAA cho văn bản thường và cỡ lớn.

Quan trọng

  1. Đạt/không đạt luôn được hiển thị bằng cả chữ và biểu tượng — không bao giờ chỉ bằng màu.
  2. Công cụ này chỉ kiểm tra một cặp màu — đạt không có nghĩa cả trang tuân thủ WCAG.

Cách sử dụng?

  1. Chọn màu chữ và màu nền (mẫu màu hoặc nhập hex).
  2. Xem bản xem trước trực tiếp và kết quả tương phản.

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

Đạt AA có nghĩa trang của tôi tuân thủ WCAG không?

Không hẳn. Công cụ này chỉ báo kết quả tính tỷ lệ tương phản thô và đạt/không đạt theo bốn ngưỡng — việc tuân thủ WCAG thực sự còn phụ thuộc vào cỡ chữ, độ đậm và thiết kế tổng thể của bạn.

Vì sao đạt/không đạt không chỉ được thể hiện bằng màu?

Chỉ dùng màu (vd. chấm xanh hoặc đỏ) thì người mù màu không tiếp cận được, nên mỗi ngưỡng luôn hiển thị cả biểu tượng lẫn nhãn chữ (Đạt/Không đạt).

Nền bán trong suốt được xử lý thế nào?

Nền trong suốt cần thêm một màu “nền canvas” đục — công cụ dùng logic tổng hợp màu sẵn có của lõi để tính ra màu đục kết quả trước khi tính độ tương phản.

Tạo mã làm mờ nền và viền trong suốt theo thời gian thực.

Mở →