WCAG Color Contrast Checker Đánh giá màu sắc

Đá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 liên tục dọc theo các định dạng HSL để tìm các lựa chọn thay thế gần nhất đáp ứng các tiêu chí tỷ lệ đối lập.

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 toán tỷ lệ đối lập WCAG cho màu trước và nền và hiển thị kết quả chung với kích thước văn bản.

Đầu vào
2 màu CSS hợp lệ và văn bản dự báo tùy chọn.
Đầu ra
- Mối quan hệ tương phản với các chỉ số WCAG AA và AAA qua hoặc thất bại.
Giới hạn thực tế
Việc tính toán chỉ bao gồm sự tương phản của ánh sáng; nó không chứng nhận một giao diện hoặc tài khoản cho việc trình bày chữ cái, chuyển động, tập trung hoặc không có 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. Converter không nhận hoặc lưu trữ nó; đóng cửa hoặc tải lại trang làm sạch trạng thái hoạt động trừ khi công cụ này đặc biệt cung cấp một tải xuống địa phương.

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 WCAG AA và AAA thông qua hoặc không có chỉ số, sau đó chạy công cụ.
  3. Xem xét tỷ lệ tương phản với các chỉ số WCAG AA và AAA qua hoặc thất bại trước khi sao chép hoặc tải xuống nó.

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

Màu sắc không hợp lệ không thể được đo lường, và minh bạch mà không có nền tảng được giải quyết có thể làm cho tỷ lệ vô nghĩa.

Ví dụ thực tế

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