Công cụ kiểm tra độ tương phản

Nhập màu chữ và màu nền để xem tỷ lệ tương phản WCAG và kiểm tra xem các mức độ AA và AAA có đạt chuẩn hay không.

—Tỷ lệ tương phản
Văn bản thườngAA4.5:1—
Văn bản thườngAAA7:1—
Văn bản lớnAA3:1—
Văn bản lớnAAA4.5:1—
Giao diện & đồ họa3:1—
Nhập màu chữ và màu nền để kiểm tra.

Mọi quá trình kiểm tra đều chạy trong trình duyệt của bạn. Không có thông tin nào bạn nhập được tải lên BroBroGo.

Hỏi đáp

Kết quả đạt chuẩn AA và AAA có ý nghĩa gì?

AA là mức độ mà hầu hết các trang web hướng tới: yêu cầu tỷ lệ tương phản tối thiểu là 4.5:1 cho văn bản thường và 3:1 cho văn bản lớn. AAA nghiêm ngặt hơn — yêu cầu 7:1 cho văn bản thường và 4.5:1 cho văn bản lớn. Tỷ lệ tương phản chạy từ 1:1 (không có độ tương phản) đến 21:1 (chữ đen trên nền trắng).

Những gì được tính là văn bản lớn (large text)?

Chữ lớn được tính từ cỡ chữ 18pt (khoảng 24px) trở lên, hoặc 14pt (khoảng 18.5px) nếu được in đậm. Văn bản lớn hơn vẫn dễ đọc ở độ tương phản thấp hơn, vì vậy nó đạt chuẩn AA ở mức 3:1 và AAA ở mức 4.5:1 thay vì các ngưỡng khắt khe hơn của văn bản thông thường.

Tôi có thể nhập những định dạng màu nào?

Bạn có thể nhập giá trị hex như #1a1a1a, giá trị rgb() như rgb(26, 26, 26), hoặc giá trị hsl() — hoặc nhấp vào một trong hai ô màu để chọn trực tiếp. Sử dụng nút hoán đổi để đảo ngược màu chữ và màu nền.

Đây là tiêu chuẩn WCAG 2 hay phương pháp APCA mới hơn?

Công cụ này sử dụng công thức WCAG 2.1 / 2.2, vốn là tiêu chuẩn được các quy tắc và kiểm tra khả năng tiếp cận tham chiếu hiện nay. APCA là một phương pháp mới hơn, dựa trên cảm nhận trực quan tốt hơn đang được soạn thảo cho WCAG 3 — rất hứa hẹn nhưng chưa phải là tiêu chuẩn tuân thủ chính thức, vì vậy kết quả đạt/không đạt ở đây không sử dụng nó.

Được viết và kiểm tra bởi đội ngũ biên tập BroBroGo.Cập nhật lần cuối:

Giới thiệu về Công cụ kiểm tra độ tương phản

Công cụ kiểm tra độ tương phản là một giải pháp trực tuyến hỗ trợ bạn nhập màu chữ và màu nền để xác định tỷ lệ tương phản của chúng theo tiêu chuẩn WCAG 2.1 / 2.2. Sau khi tính toán, công cụ sẽ hiển thị chi tiết các mức độ tiếp cận (AA và AAA) đạt hay không đạt đối với văn bản thường, văn bản lớn và các thành phần giao diện người dùng.

Việc đảm bảo độ tương phản phù hợp đóng vai trò vô cùng quan trọng trong thiết kế và phát triển web. Công cụ này được thiết kế đặc biệt để hỗ trợ:

  • Nhà thiết kế: Kiểm tra khả năng đọc của văn bản và các thành phần thiết kế.
  • Nhà phát triển: Đảm bảo các tiêu chuẩn về khả năng tiếp cận (accessibility) được đáp ứng đầy đủ.
  • Đội ngũ nội dung: Xác minh độ tương phản màu sắc cho các tài liệu và nội dung xuất bản.

Khi bắt đầu, công cụ sử dụng các màu sắc mặc định ban đầu là #4f46e5 cho màu chữ và #ffffff cho màu nền, mang lại tỷ lệ tương phản ban đầu là 6.29.

Dữ liệu đầu vào và định dạng được hỗ trợ

Để thực hiện kiểm tra, công cụ yêu cầu hai thông tin đầu vào chính:

  • Màu chữ: Một giá trị màu sắc đại diện cho phần chữ hiển thị.
  • Màu nền: Một giá trị màu sắc đại diện cho phần nền phía sau chữ.

Cả hai trường thông tin này đều chấp nhận các định dạng màu sắc phổ biến bao gồm:

  • Mã Hex (ví dụ: #1a1a1a).
  • Giá trị rgb() (ví dụ: rgb(26, 26, 26)).
  • Giá trị hsl().

Ngoài ra, giao diện còn tích hợp nút hoán đổi giúp bạn nhanh chóng đảo ngược vị trí giữa màu chữ và màu nền. Trong trường hợp nhập sai định dạng, hệ thống sẽ hiển thị các thông báo lỗi cụ thể:

  • Nếu màu chữ không hợp lệ: "Vui lòng nhập màu chữ hợp lệ, ví dụ: #1a1a1a or rgb(26, 26, 26)."
  • Nếu màu nền không hợp lệ: "Vui lòng nhập màu nền hợp lệ, ví dụ: #ffffff hoặc rgb(255, 255, 255)."

Kết quả đầu ra và cách diễn giải

Sau khi xử lý dữ liệu bằng công thức WCAG 2.1 / 2.2, công cụ sẽ trả về các kết quả đo lường trực quan:

  • Tỷ lệ tương phản: Được hiển thị dưới dạng "X:1". Tỷ lệ này dao động từ 1:1 (hoàn toàn không có độ tương phản) cho đến 21:1 (tương phản tuyệt đối giữa chữ đen trên nền trắng).
  • Văn bản thường: Hiển thị trạng thái "Đạt" hoặc "Không đạt" đối với hai cấp độ AA và AAA.
  • Văn bản lớn: Hiển thị trạng thái "Đạt" hoặc "Không đạt" đối với hai cấp độ AA và AAA.
  • Giao diện & đồ họa: Chỉ đối chiếu với một ngưỡng duy nhất là 3:1 để trả về kết quả "Đạt" hoặc "Không đạt". Dòng này không phân chia ranh giới giữa hai cấp độ AA và AAA, do đó công cụ chỉ hiển thị một kết quả duy nhất.

Dựa trên các thông số trên, công cụ sẽ đưa ra một thông điệp tổng hợp (Kết luận) để chỉ ra mức độ đạt chuẩn cao nhất của cặp màu:

  • "Đạt chuẩn AA và AAA cho văn bản thường."
  • "Đạt chuẩn AA cho văn bản thường."
  • "Chỉ đạt chuẩn AA cho văn bản lớn."
  • "Dưới mức tối thiểu của chuẩn AA — hãy tăng độ tương phản."

Các quy tắc và ngưỡng tiêu chuẩn WCAG

Để đánh giá chính xác trạng thái "Đạt" hay "Không đạt", công cụ áp dụng nghiêm ngặt các quy tắc và ngưỡng tỷ lệ của tiêu chuẩn WCAG 2.1 / 2.2:

  • Đối với văn bản thường:
    • Cấp độ AA yêu cầu tỷ lệ tương phản tối thiểu là 4.5:1.
    • Cấp độ AAA yêu cầu tỷ lệ tương phản tối thiểu là 7:1.
  • Đối với văn bản lớn:
    • Cấp độ AA yêu cầu tỷ lệ tương phản tối thiểu là 3:1.
    • Cấp độ AAA yêu cầu tỷ lệ tương phản tối thiểu là 4.5:1.
    • Định nghĩa về văn bản lớn: Được quy định là văn bản có kích cỡ từ 18pt (khoảng 24px) trở lên, hoặc từ 14pt (khoảng 18.5px) trở lên nếu được in đậm.
  • Đối với thành phần giao diện và đồ họa:
    • Yêu cầu tỷ lệ tương phản tối thiểu là 3:1 (đây là ngưỡng duy nhất và không phân tách AA/AAA).

Bảo mật và quyền riêng tư dữ liệu

Khi sử dụng công cụ này, bạn hoàn toàn có thể yên tâm về vấn đề bảo mật thông tin. Mọi quá trình kiểm tra đều chạy trực tiếp trong trình duyệt của bạn. Không có bất kỳ thông tin nào bạn nhập được tải lên hệ thống của BroBroGo.

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

Kết quả đạt chuẩn AA và AAA có ý nghĩa gì?

AA là mức độ mà hầu hết các trang web hướng tới: yêu cầu tỷ lệ tương phản tối thiểu là 4.5:1 cho văn bản thường và 3:1 cho văn bản lớn. AAA nghiêm ngặt hơn — yêu cầu 7:1 cho văn bản thường và 4.5:1 cho văn bản lớn. Tỷ lệ tương phản chạy từ 1:1 (không có độ tương phản) đến 21:1 (chữ đen trên nền trắng).

Những gì được tính là văn bản lớn (large text)?

Chữ lớn được tính từ cỡ chữ 18pt (khoảng 24px) trở lên, hoặc 14pt (khoảng 18.5px) nếu được in đậm. Văn bản lớn hơn vẫn dễ đọc ở độ tương phản thấp hơn, vì vậy nó đạt chuẩn AA ở mức 3:1 và AAA ở mức 4.5:1 thay vì các ngưỡng khắt khe hơn của văn bản thông thường.

Tôi có thể nhập những định dạng màu nào?

Bạn có thể nhập giá trị hex như #1a1a1a, giá trị rgb() như rgb(26, 26, 26), hoặc giá trị hsl() — hoặc nhấp vào một trong hai ô màu để chọn trực tiếp. Sử dụng nút hoán đổi để đảo ngược màu chữ và màu nền.

Đây là tiêu chuẩn WCAG 2 hay phương pháp APCA mới hơn?

Công cụ này sử dụng công thức WCAG 2.1 / 2.2, vốn là tiêu chuẩn được các quy tắc và kiểm tra khả năng tiếp cận tham chiếu hiện nay. APCA là một phương pháp mới hơn, dựa trên cảm nhận trực quan tốt hơn đang được soạn thảo cho WCAG 3 — rất hứa hẹn nhưng chưa phải là tiêu chuẩn tuân thủ chính thức, vì vậy kết quả đạt/không đạt ở đây không sử dụng nó.

Bộ chuyển đổi màu sắcChuyển đổi màu sắc giữa HEX, RGB, HSL, HSV, CMYK và LAB — chỉnh sửa bất kỳ trường nào và các trường còn lại sẽ tự động cập nhật.Công cụ lấy màu từ ảnhChọn bất kỳ điểm ảnh nào từ hình ảnh và đọc mã HEX, RGB và HSL của nó, với kính lúp hỗ trợ lấy mẫu chính xác.Công cụ chuyển đổi định dạng ảnhChuyển đổi hình ảnh JPG, PNG, WebP, HEIC và AVIF ngay trong trình duyệt của bạn.Bộ tính tỷ lệ khung hìnhChuyển đổi bất kỳ kích thước rộng × cao nào thành tỷ lệ gọn gàng như 16:9, hoặc chọn một tỷ lệ để tính cạnh còn thiếu — dùng cho video, ảnh chụp và màn hình.Trình tạo Box ShadowKéo các thanh trượt để tạo hiệu ứng box-shadow, xếp chồng các lớp để tạo chiều sâu và sao chép mã CSS hoàn thiện ngay lập tức.Trình tạo GradientTạo dải màu tuyến tính, tỏa tròn hoặc hình nón, thêm các điểm dừng màu và thiết lập hướng, sau đó sao chép mã CSS chỉ với một cú nhấp chuột.Bộ kiểm tra màn hìnhKiểm tra mọi màn hình bằng các mẫu hình toàn màn hình — điểm ảnh chết, hở sáng màn hình, phân dải, gamma, hiện tượng lưu ảnh, tần số quét và nhiều thông số khác.