Pixeliro Logo
Pixeliro
Free Online Tool

Kiểm Tra Độ Tương Phản Màu - Công Cụ WCAG

Kiểm tra tỷ lệ tương phản màu theo chuẩn WCAG 2.1. Kiểm tra AA và AAA cho văn bản và UI. Xem trước thời gian thực với chỉ báo đạt/không đạt.

Pixeliro Logo

Text

#FFFFFF

Background

#1A1A25

Typography Scale Preview

Display48px / Bold
3:1
Heading 230px / Semibold
3:1
Heading 3 / Large18px+ or 14px Bold
3:1
Body text - Normal paragraph content16px / Regular
4.5:1
Small text - Captions, labels, helper text14px / Regular
4.5:1
Tiny text - Legal, footnotes (enhanced)12px / Regular
7:1

UI Components

BadgeTagLink text

AA Large

≥ 3:1

18px+ text

AA Normal

≥ 4.5:1

All text sizes

AAA Enhanced

≥ 7:1

Best practice

Key Features

Powerful features designed for designers and developers

Tuân Thủ WCAG 2.1

Kiểm tra theo Hướng dẫn WCAG chính thức với kết quả đạt/không đạt rõ ràng.

Kiểm Tra AA & AAA

Kiểm tra cả yêu cầu tương phản AA (tối thiểu) và AAA (nâng cao).

Xem Trước Thời Gian Thực

Xem tổ hợp màu áp dụng cho văn bản thực khi điều chỉnh. Phản hồi trực quan tức thì.

Gợi Ý Thông Minh

Nhận gợi ý màu từ AI duy trì ý định thiết kế đồng thời đáp ứng tiêu chuẩn.

Nhiều Định Dạng Màu

Nhập màu dạng HEX, RGB, HSL hoặc theo tên. Sao chép kết quả theo định dạng mong muốn.

Xem Trước Component

Xem trước màu trong các UI component thực như button, card và form.

How It Works

Get started in just a few simple steps

  1. 1

    Nhập Màu Foreground

    Gõ hoặc dán màu văn bản dạng HEX, RGB hoặc HSL. Có thể dùng color picker.

  2. 2

    Nhập Màu Background

    Thêm màu nền tương tự. Tỷ lệ tương phản được tính tự động.

  3. 3

    Xem Kết Quả WCAG

    Xem kết quả đạt/không đạt tức thì cho Text AA, Text AAA, Large Text AA, Large Text AAA.

  4. 4

    Nhận Gợi Ý (nếu cần)

    Nếu màu không đạt, nhấn "Gợi ý" để có các lựa chọn thay thế đáp ứng tiêu chuẩn.

  5. Xuất & Chia Sẻ

    Sao chép giá trị màu, chia sẻ link kết quả, hoặc xuất dạng design token.

Frequently Asked Questions

Everything you need to know

Tỷ lệ tương phản WCAG là gì?

WCAG định nghĩa tỷ lệ tương phản tối thiểu giữa màu văn bản và nền để đảm bảo đọc được cho người khuyết tật thị giác. AA yêu cầu 4.5:1, AAA yêu cầu 7:1.

Sự khác biệt giữa AA và AAA là gì?

AA là tiêu chuẩn tối thiểu (4.5:1 cho text thường, 3:1 cho text lớn). AAA là nâng cao (7:1 cho text thường, 4.5:1 cho text lớn).

"Text lớn" được định nghĩa như thế nào?

Text lớn là 18pt (24px) trở lên cho font thường, hoặc 14pt (18.66px) trở lên cho font đậm.

Công cụ có kiểm tra cho người mù màu không?

Tỷ lệ tương phản giúp người mù màu. Chúng tôi cũng có công cụ mô phỏng mù màu.

Có thể kiểm tra nhiều tổ hợp màu cùng lúc không?

Có! Dùng batch contrast checker để kiểm tra toàn bộ palette với màu nền.

WCAG 2.1 có phải tiêu chuẩn mới nhất không?

WCAG 2.1 là tiêu chuẩn được áp dụng rộng rãi hiện tại. WCAG 2.2 đã ra mắt năm 2023.

Related Tools

Explore more color tools

Color Generator

Generate random colors

Ready to Get Started?

Kiểm Tra Độ Tương Phản Màu - Công Cụ WCAG - Free, no signup required

Kiểm Tra Ngay