Logo XTools
XTools

Kiểm tra tương phản

Kiểm tra tương phản chữ và nền theo WCAG AA và AAA
  • Tệp không rời khỏi thiết bị của bạn
  • Chạy trên trình duyệt
  • Miễn phí, không cần đăng ký, không hình mờ

Contrast ratio

4.54:1

Passes AA for all text

  • AANormal text

    4.5:1

    Pass

  • AALarge text

    3:1 · 24px+, or 18.66px+ bold

    Pass

  • AAANormal text

    7:1

    Fail

  • AAALarge text

    4.5:1 · 24px+, or 18.66px+ bold

    Pass

  • AAUI components & graphics

    3:1 · Icons, borders of inputs, focus rings

    Pass

APCA lightness contrast

Lc 71.6

OK for content text, not long body copy

From the WCAG 3 draft. Polarity aware: negative Lc means light text on a dark background.

Preview

Large heading

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

Body text is where low contrast hurts most: long paragraphs at small sizes tire the eyes quickly, especially on phones in sunlight.

The quick brown fox jumps over the lazy dog

Small print, captions and footnotes

ButtonButton

Nearest passing colors

AA · 4.5:1

Adjust textAlready passes
Adjust backgroundAlready passes

AAA · 7:1

Adjust text

#595959 · 7.00:1

Adjust backgroundNot reachable by changing lightness alone
Changes only lightness (in OKLCH), so the hue and feel of your color stay the same.
4.54:1 Passes AA for all text · #767676

Cách dùng Kiểm tra tương phản

Kiểm tra cặp màu chữ và nền theo WCAG 2 (AA và AAA cho chữ thường, chữ lớn và thành phần giao diện) và xem độ tương phản độ sáng APCA từ bản nháp WCAG 3. Khi một cặp không đạt, công cụ gợi ý các màu gần nhất đạt chuẩn.

  1. 1

    Nhập “Màu chữ” và “Màu nền” dưới dạng HEX, rgb(), hsl(), oklch() hoặc tên màu, hoặc nhấn một ô để mở bộ chọn màu.

  2. 2

    Đọc “Tỷ lệ tương phản” và kết quả “Đạt” hoặc “Không đạt” cho từng kiểm tra AA và AAA.

  3. 3

    Xem “Xem trước”, gõ “Văn bản mẫu” của bạn, và dùng “Đổi màu” để thử chiều ngược lại.

  4. 4

    Trong “Màu gần nhất đạt chuẩn”, nhấn “Áp dụng” trên gợi ý “Chỉnh chữ” hoặc “Chỉnh nền” cho AA (4.5:1) hoặc AAA (7:1).

  5. 5

    Sau khi bạn đổi một màu, URL trang giữ cả hai màu, nên bạn có thể sao chép để chia sẻ kết quả.

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

Tôi cần tỷ lệ tương phản bao nhiêu?

WCAG AA yêu cầu 4.5:1 cho chữ thường và 3:1 cho chữ lớn (từ 24px, hoặc 18.66px đậm) và thành phần giao diện như biểu tượng và viền ô nhập. AAA yêu cầu 7:1 và 4.5:1.

Vì sao 4.497:1 được hiện là 4.49 chứ không phải 4.50?

Tỷ lệ không bao giờ được làm tròn lên qua ngưỡng, nên cặp vừa thiếu 4.5:1 không trông như đã đạt.

Tôi có thử chữ bán trong suốt được không?

Có. Dùng thanh “Độ mờ chữ”; chữ trong mờ được trộn lên nền trước khi đo tỷ lệ.

Số APCA là gì?

APCA đến từ bản nháp WCAG 3 và cho độ tương phản độ sáng (Lc) phụ thuộc màu nào là chữ; giá trị âm nghĩa là chữ sáng trên nền tối. Đây vẫn là bản nháp, nên tỷ lệ WCAG 2 vẫn là mục tiêu tuân thủ thông thường.

Các màu gợi ý được chọn thế nào?

Chỉ độ sáng được đổi (trong OKLCH), nên sắc và cảm giác màu của bạn được giữ. Nếu cả hai hướng đều không đạt mục tiêu, công cụ báo “Không đạt được chỉ bằng cách đổi độ sáng; hãy thử chỉnh màu kia”.