Contrast ratio checker và kiểm tra độ tương phản màu
Công cụ contrast ratio checker hỗ trợ kiểm tra độ tương phản màu trực quan và chính xác theo tiêu chuẩn W3C WCAG 2.1. Bạn có thể nhập mã màu HEX hoặc chọn màu từ bảng màu để xem tỷ lệ tương phản cùng kết quả kiểm tra tự động cho chữ thường và chữ lớn. Toàn bộ quá trình tính toán diễn ra ngay trong trình duyệt của bạn mà không cần đăng ký hay tải dữ liệu lên máy chủ.
Cách kiểm tra độ tương phản màu trực tuyến
Để thực hiện kiểm tra độ tương phản màu giữa văn bản và nền, bạn thực hiện theo các bước sau:
- Nhập mã HEX 3 hoặc 6 ký tự vào ô màu chữ hoặc màu nền (hệ thống tự động bỏ qua ký tự
#nếu có). - Nhấp vào ô màu để mở bộ chọn màu nguyên bản trên thiết bị nếu muốn điều chỉnh màu trực quan.
- Xem tỷ lệ tương phản và nhãn trạng thái cập nhật tự động ngay phía dưới.
- Nhấp vào nút Đảo màu để hoán đổi nhanh giữa màu chữ và màu nền khi cần kiểm tra thiết kế đảo ngược.
Tiêu chuẩn WCAG color contrast checker cho chữ thường và chữ lớn
Công cụ Kiểm tra độ tương phản màu đánh giá tỷ lệ dựa trên công thức độ chói tương đối chuẩn của W3C. Tiêu chuẩn WCAG 2.1 phân định rõ hai mức độ tuân thủ đối với chữ thường và chữ lớn.
Mức AA yêu cầu tỷ lệ tương phản tối thiểu 4.5:1 cho chữ thường và 3.0:1 cho chữ lớn. Mức AAA yêu cầu khắt khe hơn với tỷ lệ 7.0:1 cho chữ thường và 4.5:1 cho chữ lớn. Kết quả sẽ hiển thị nhãn Đạt hoặc Trượt đồng thời cho cả bốn tiêu chí.
Quy định kích thước chữ lớn và chữ thường theo WCAG
Trong kiểm tra độ tương phản, chữ lớn (large text) được quy định là văn bản có kích thước từ 18pt (tương đương 24px) với kiểu chữ thường, hoặc từ 14pt (tương đương 18.66px) trở lên nếu sử dụng kiểu chữ in đậm (bold).
Các văn bản có kích thước nhỏ hơn ngưỡng trên đều được xếp vào nhóm chữ thường (normal text) và cần đạt tỷ lệ tương phản cao hơn để bảo đảm tính dễ đọc.
Check độ tương phản màu với mã HEX và bộ chọn màu
Bạn có thể sao chép mã HEX từ các công cụ thiết kế như Figma, Adobe XD hoặc file CSS và dán trực tiếp vào ô nhập liệu. Ô nhập nhận diện chính xác mã hexadecimal 3 hoặc 6 ký tự (từ 0–9, A–F) và tự động lọc bỏ các ký tự thừa.
Ngoài ra, ô nhập mã màu và bộ chọn màu trên thiết bị luôn đồng bộ hai chiều. Việc điều chỉnh trên bảng chọn màu sẽ cập nhật mã HEX ngay lập tức và ngược lại.
Các câu hỏi thường gặp
Tỷ lệ tương phản tối thiểu theo chuẩn WCAG AA là bao nhiêu?
Chuẩn WCAG 2.1 Level AA yêu cầu tỷ lệ tương phản tối thiểu 4.5:1 đối với chữ thường và 3.0:1 đối với chữ lớn. Công cụ sẽ tự động tính toán và đối chiếu màu sắc của bạn với cả ngưỡng AA và AAA cùng lúc.
Tỷ lệ tương phản màu sắc như thế nào là đủ dễ đọc?
Tỷ lệ tương phản từ 4.5:1 trở lên là mức cơ bản để đảm bảo văn bản thường đạt chuẩn WCAG 2.1 AA. Nếu muốn tối ưu khả năng truy cập cho người thị lực kém, bạn nên hướng tới tỷ lệ từ 7.0:1 trở lên tương ứng với chuẩn AAA.
Chữ kích thước bao nhiêu thì được tính là chữ lớn (large text)?
Chữ lớn theo chuẩn WCAG được tính từ 18pt (24px) đối với phông chữ thường, hoặc từ 14pt (18.66px) trở lên nếu là chữ in đậm. Chữ lớn có ngưỡng yêu cầu độ tương phản thấp hơn chữ thường do kích thước nét chữ dễ quan sát hơn.
Công cụ kiểm tra độ tương phản màu này có miễn phí không?
Công cụ hoàn toàn miễn phí và không giới hạn số lần sử dụng. Bạn có thể kiểm tra màu sắc trực tiếp mà không cần đăng ký tài khoản hay cài đặt phần mềm.
Tôi có thể kiểm tra độ tương phản bằng mã màu HEX không?
Có, bạn chỉ cần gõ hoặc dán mã HEX 3 hoặc 6 ký tự vào ô màu chữ hoặc màu nền. Kết quả tỷ lệ tương phản và trạng thái Đạt hoặc Trượt sẽ cập nhật tức thì.
Dữ liệu mã màu của tôi có bị lưu lại hoặc gửi lên máy chủ không?
Không, toàn bộ phép tính độ chói tương đối đều được xử lý bằng JavaScript ngay trong trình duyệt của bạn. Dữ liệu màu sắc không bao giờ được gửi về máy chủ hay lưu trữ ở bất kỳ đâu.
Nút Đảo màu dùng để làm gì?
Nút Đảo màu giúp bạn tráo đổi nhanh vị trí giữa màu chữ và màu nền chỉ bằng một cú nhấp. Tính năng này tiện lợi khi bạn muốn đánh giá phối màu đảo ngược cho giao diện.
