./prontouso.com

TIỆN ÍCH THIẾT KẾ

Kiểm Tra Độ Tương Phản Màu

Kiểm tra tỷ lệ tương phản màu sắc theo chuẩn khả năng tiếp cận WCAG 2.1 cấp độ AA và AAA cho văn bản thông thường, văn bản lớn và các thành phần giao diện.

Trạng thái công cụChạy trên trình duyệt của bạn
Xem trước

Tùy chọn

Normal text looks like this.

Văn bản lớn

\

Kết quả

Meets AA for text
Tỷ lệ tương phản
17.08:1
CategoryAAAAA
Văn bản lớnĐạtĐạt
Small textĐạtĐạt
Graphics and UIĐạtN/A

Cách thức hoạt động

  1. Nhập dữ liệu của bạn

    Điền các giá trị cần thiết, dán văn bản hoặc tải lên tệp bạn muốn xử lý.

  2. Xem kết quả tức thì

    Hầu hết các công cụ cập nhật theo thời gian thực khi bạn nhập liệu; một số công cụ sử dụng một nút hành động duy nhất.

  3. Sử dụng kết quả

    Sao chép, tải xuống hoặc chia sẻ kết quả được tạo — bạn luôn có toàn quyền kiểm soát dữ liệu của mình.

Quyền riêng tư & xử lý dữ liệu — Chạy cục bộ 100% trên trình duyệt của bạn. Công cụ này không tải dữ liệu của bạn lên máy chủ.

Kiểm Tra Độ Tương Phản Màu là gì?

Check the WCAG contrast ratio between a text color and a background color, and see whether it passes AA and AAA at both normal and large text sizes.

TÌM HIỂU CÁCH HOẠT ĐỘNG CỦA CÔNG CỤ

How to check color contrast

What the ratio means

The contrast ratio ranges from 1:1 (identical colors) to 21:1 (black on white), calculated from each color's relative luminance using the formula defined in the WCAG 2.x specification.

AA and AAA thresholds

  • AA, normal text: at least 4.5:1.
  • AA, large text: at least 3:1.
  • AAA, normal text: at least 7:1.
  • AAA, large text: at least 4.5:1.
  • Large text means 18pt (24px) regular weight, or 14pt (about 18.7px) bold, per the WCAG definition.

Reading the preview

The sample box shows both text sizes rendered with your two colors, which is a faster way to judge readability than the ratio number alone.

How to use it

  • Pick or type a foreground (text) color and a background color.
  • Read the contrast ratio and the four pass/fail results.
  • Use the swap button to check the pair in the other direction.

Contrast notes

The ratio uses WCAG 2.x relative luminance math for sRGB colors. Transparency should be tested against the final composited background color.

Các Câu Hỏi Thường Gặp (FAQ)

Which level should I aim for?

AA is the widely required baseline for web accessibility, including under most legal accessibility requirements. AAA is stricter and recommended where you can achieve it, especially for body text.

Does this check anything besides contrast?

No. Color contrast is one part of text accessibility; font size, weight, and spacing also affect readability but are not evaluated here.

Why are there separate thresholds for large text?

WCAG allows a lower ratio for large text because bigger, bolder strokes stay legible at lower contrast than small body text does.

Does alpha or transparency affect the ratio?

The WCAG contrast calculation is based on the final visible colors. If your UI uses transparency, first sample or calculate the composited color over its real background, then test that pair.

Công Cụ Liên Quan