Color Contrast Checker

Check contrast ratio. WCAG compliance.

Về công cụ này

This tool checks foreground/background contrast ratio in one click. Three features: 1) Select colors for instant contrast ratio, 2) WCAG 2.1 AA/AAA compliance for normal/large text, 3) Useful for accessibility and UI color selection.

Giao diện công cụ

Mẫu văn bản Aa 123
Tỷ lệ tương phản —
WCAG AA (Văn bản thường 4.5:1) —
WCAG AA (Văn bản lớn 3:1) —
WCAG AAA (Văn bản thường 7:1) —

Cách sử dụng

  1. Select foreground and background colors with picker
  2. Contrast ratio is displayed instantly
  3. Check WCAG 2.1 AA/AAA compliance

Khi nào nên dùng

Accessibility compliance, UI color selection, text readability, WCAG verification.

Ví dụ

White on black = 21:1, #666 on #fff = 5.74:1.

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

What is WCAG?

Web Content Accessibility Guidelines. Int'l standard for web accessibility by W3C. Referenced in legal requirements.

Good contrast ratio?

WCAG 2.1: normal text 4.5:1 (AA), 7:1 (AAA). Large text 3:1 (AA), 4.5:1 (AAA).

AA vs AAA?

AA = minimum accessibility. AAA = stricter (e.g. 7:1 contrast). Most sites aim for AA.

How is contrast ratio calculated?

(L1+0.05)/(L2+0.05). L1=brighter relative luminance, L2=darker. Max 21:1 (white/black), min 1:1 (same color).

Color Contrast Checker miễn phí không?

Miễn phí, không cần đăng ký.

Dữ liệu có gửi lên server?

Dữ liệu ở trên thiết bị; chúng tôi không lưu trên máy chủ.

Trình duyệt hỗ trợ?

Đã kiểm tra trên Chrome, Edge, Firefox, Safari bản mới.

Dùng offline được không?

Sau lần tải đầu, hầu hết tính năng hoạt động khi mạng không ổn định.

Khác CLI/desktop app?

Color Contrast Checker là công cụ trực tuyến không cần cài, thay thế CLI hoặc app desktop.

Khi nào dùng?

Dùng khi: Accessibility compliance, UI color selection, text readability, WCAG verification.

Ví dụ sử dụng?

Ví dụ: White on black = 21:1, #666 on #fff = 5.74:1.

Tính năng chính?

Contrast ratio checker, WCAG 2.1 AA/AAA compliance, Normal and large text

Phân biệt với công cụ tương tự?

Color Contrast Checker chạy trên trình duyệt, không cần cài. Dùng khi cần thử nhanh trước khi chuyển sang CLI.

Từ khóa tìm kiếm

コントラスト, WCAG, アクセシビリティ, 視認性

Quy trình sử dụng cơ bản

  1. Select foreground and background colors with picker
  2. Contrast ratio is displayed instantly
  3. Check WCAG 2.1 AA/AAA compliance

Tình huống sử dụng

  • Accessibility compliance, UI color selection, text readability, WCAG verification.
  • This tool checks foreground/background contrast ratio in one click. Three features: 1) Select colors for instant contrast ratio, 2) WCAG 2.1 AA/AAA compliance for normal/large text, 3) Useful for accessibility and UI color selection.
  • Contrast ratio checker
  • WCAG 2.1 AA/AAA compliance

Quyền riêng tư & dữ liệu

Dữ liệu ở trên thiết bị; chúng tôi không lưu trên máy chủ.

Lưu ý

  • Luôn kiểm tra lại trước khi dán kết quả lên production
  • Thử cửa sổ ẩn danh nếu extension gây lỗi
  • Đợi xử lý xong khi nhập dữ liệu lớn

Nội dung học liên quan

Công cụ liên quan

Bộ công cụ

Color & Design Set