Trình kiểm tra độ tương phản màu WCAG

Đánh giá tỷ lệ tương phản của văn bản và màu nền theo hướng dẫn WCAG 2.1. Tạo các điều chỉnh màu sắc dễ tiếp cận ngay lập tức.

HEX/RGB/HSL
HEX/RGB/HSL
Mọi thứ chạy cục bộ trong trình duyệt của bạn.

Xem trước văn bản trực tiếp

Tiêu đề lớn (18pt In đậm / 24pt Thường)

Đây là một bản xem trước của phong cách văn bản tiêu đề lớn.

Văn bản thường (Dưới 18pt)

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Tỷ lệ tương phản

18.6:1

Trạng thái tuân thủ WCAG 2.1

Yêu cầu WCAG AA
Văn bản thường (4.5:1) PASS
Văn bản lớn (3.0:1) PASS
Yêu cầu WCAG AAA
Văn bản thường (7.0:1) PASS
Văn bản lớn (4.5:1) PASS

Hướng dẫn WCAG 2.1

Dễ dàng xác minh các tiêu chuẩn tương phản để xây dựng giao diện dễ tiếp cận tuân thủ các hướng dẫn Section 508, ADA và WCAG AA hoặc AAA.

Công cụ đề xuất

Tự động điều chỉnh màu sắc theo cách tăng dần dọc theo các tọa độ HSL để tìm các lựa chọn thay thế gần nhất đáp ứng các tiêu chí tỷ lệ tương phản.

Hoàn toàn phía máy khách

Các phép tính được thực hiện cục bộ trong ngữ cảnh trình duyệt của bạn. Không có màu sắc, tệp hoặc tọa độ đo từ xa nào được truyền đến máy chủ của chúng tôi.

Công cụ màu liên quan

Chuyển đổi màu HEX RGB HSL
Chuyển đổi màu sắc và điều chỉnh tọa độ độ sáng.
Công cụ chọn màu hình ảnh
Trích xuất bảng màu từ các bản thiết kế.
Chuyển đổi màu CSS
Chuyển đổi giữa CMYK, HSV, RGB, HSL và HEX định dạng.

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

Tính tỷ lệ tương phản WCAG cho màu nền trước và nền sau và hiển thị kết quả kích thước văn bản phổ biến.

Đầu vào
Hai màu CSS hợp lệ và văn bản xem trước tùy chọn.
Đầu ra
Tỷ lệ tương phản với chỉ báo đạt/không đạt WCAG AA và AAA.
Giới hạn thực tế
Việc tính toán chỉ bao gồm độ tương phản độ chói; nó không chứng nhận giao diện hoặc tính đến việc hiển thị phông chữ, chuyển động, tiêu điểm hoặc các tín hiệu không phải màu sắc.
Quyền riêng tư và xử lý dữ liệu
hai màu CSS hợp lệ và văn bản xem trước tùy chọn được xử lý trong tab trình duyệt này. Convertr không nhận hoặc lưu trữ nó; đóng hoặc tải lại trang sẽ xóa trạng thái làm việc trừ khi công cụ cung cấp tải xuống cục bộ.

Cách sử dụng công cụ này

  1. Cung cấp hai màu CSS hợp lệ và văn bản xem trước tùy chọn trong các điều khiển công cụ.
  2. Chọn các thiết lập ảnh hưởng đến tỷ lệ tương phản với chỉ báo đạt/không đạt WCAG AA và AAA, sau đó chạy công cụ.
  3. Xem xét tỷ lệ tương phản với các chỉ báo đạt/không đạt WCAG AA và AAA trước khi sao chép hoặc tải xuống.

Các lỗi thường gặp

Màu sắc không hợp lệ không thể đo được và độ trong suốt không có nền được xác định có thể làm cho tỷ lệ trở nên vô nghĩa.

Ví dụ thực tế

So sánh văn bản #1f2937 trên #ffffff để xem xét tỷ lệ của nó cho văn bản thường và lớn.