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

Nhập hai màu và xem ngay tỷ lệ tương phản WCAG với hướng dẫn AA và AAA.

Xem trước

Mẫu chữ thường với màu của bạn

Mẫu chữ lớn

Tỷ lệ tương phản

Nhập cả hai màu để xem tỷ lệ

Kết quả WCAG

  • AA thường(4.5:1)Không đạt
  • AA chữ lớn(3:1)Không đạt
  • AAA thường(7:1)Không đạt
  • AAA chữ lớn(4.5:1)Không đạt

Nhập màu chữ và nền bằng hex hoặc RGB để tính ngay tỷ lệ tương phản WCAG, xem kết quả AA/AAA, xem trước chữ và nhận gợi ý điều chỉnh tùy chọn.

Cách dùng công cụ kiểm tra độ tương phản màu

Nhập hoặc dán màu chữ và màu nền. Công cụ chuẩn hóa đầu vào hợp lệ thành hex chữ hoa, tính ngay tỷ lệ tương phản WCAG và hiển thị đạt/không đạt cho ngưỡng AA và AAA. Dùng Gợi ý sửa, chia sẻ qua URL hoặc đặt lại.

Ngưỡng tỷ lệ tương phản WCAG

WCAG 2.x yêu cầu tối thiểu 4,5:1 cho chữ thường (AA), 3:1 cho chữ lớn (AA), 7:1 cho chữ thường (AAA) và 4,5:1 cho chữ lớn (AAA). Công cụ luôn hiển thị đủ bốn kết quả để so sánh.

Định dạng màu được hỗ trợ

Nhập #RGB, #RRGGBB, rgb(r,g,b) hoặc r,g,b cách nhau bằng dấu phẩy. Kênh phải là số nguyên 0–255. Độ trong suốt alpha, hex 8 chữ số, HSL/HSLA và màu CSS có tên không được hỗ trợ trong v1.

Ý nghĩa đạt và không đạt

Đạt nghĩa là tỷ lệ tính được đáp ứng hoặc vượt ngưỡng của mức đó. Không đạt nghĩa là chưa đạt. Nhãn và biểu tượng đi kèm màu để kết quả dễ hiểu mà không chỉ dựa vào màu.

Câu Hỏi Thường Gặp

Tại sao alpha và gradient không được hỗ trợ?

Phiên bản 1 chỉ đánh giá màu sRGB hoàn toàn đục. Trộn alpha và gradient cần quy tắc tổ hợp mà công cụ chưa mô hình hóa; vì vậy rgba(), hex 8 chữ số và phân tích gradient nằm ngoài MVP.

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

Công cụ dùng công thức độ chói tương đối WCAG cho sRGB đục: tuyến tính hóa từng kênh, tính độ chói, rồi (sáng hơn + 0,05) / (tối hơn + 0,05). Hiển thị làm tròn hai chữ số thập phân; kiểm tra ngưỡng dùng giá trị đầy đủ.

Gợi ý sửa làm gì?

Di chuyển có quy tắc màu chữ hoặc nền đã chọn dọc đường độ sáng về đen hoặc trắng cho đến khi đạt mức WCAG đã chọn, trả về hex phù hợp gần nhất và tỷ lệ kết quả nếu có.

Tôi có thể chia sẻ cặp màu cụ thể không?

Có. Giá trị chữ, nền và cỡ chữ hợp lệ được đồng bộ vào tham số URL (ví dụ ?fg=000000&bg=FFFFFF&size=normal) để liên kết trực tiếp tới kết quả.

Trang có lưu màu của tôi không?

Tính toán chạy hoàn toàn trong trình duyệt. Cặp màu hợp lệ cuối có thể lưu trong localStorage trên thiết bị; Đặt lại xóa nhập liệu, tham số URL và trạng thái đã lưu.