Kiểm tra WCAG contrast ratio cho nhiều UI element — text, heading, button, badge — xem pass/fail và gợi ý fix
Foreground (chữ)
Background (nền)
Tiêu chuẩn WCAG 2.1
“Large text” = ≥ 24 px bình thường, hoặc ≥ 18.67 px in đậm.
Preview
Tiêu đề lớn — Large Heading
Heading cỡ vừa — Medium Heading
Đây là đoạn văn bản thông thường (Normal text). Tỉ lệ tương phản cần đạt ít nhất 4.5:1 theo tiêu chuẩn WCAG 2.1 AA để đảm bảo khả năng đọc.
Chữ nhỏ (14 px) — Small text caption.
Điểm nổi bật
Các điểm đáng chú ý nhất của công cụ này để bạn nắm nhanh trước khi dùng.
Tab "Kiểm tra UI" cho phép kiểm tra text, heading, button, badge trên cùng 1 background — nhìn tổng thể trang ngay.
Xem ngay cách các màu hiển thị trên UI thật — không chỉ là con số tỷ lệ.
Với màu chưa đạt chuẩn, công cụ tự tìm màu gần nhất đạt AA — apply 1 click.
Kiểm tra cả 4 mức: AA Normal (4.5:1), AA Large (3:1), AAA Normal (7:1), AAA Large (4.5:1).
Cách sử dụng
Làm theo từng bước để dùng công cụ nhanh và đúng intent ngay từ lần đầu.
Dùng color picker hoặc nhập hex để chọn màu chữ và màu nền.
AA Normal cần ≥4.5:1 cho chữ thường. AA Large cần ≥3:1 cho chữ lớn (≥18pt hoặc 14pt bold). AAA yêu cầu cao hơn.
Thêm nhiều element (text, button, badge) với màu riêng lẻ để kiểm tra toàn bộ color system của trang.
Click "Fix Suggestions" — công cụ tự gợi ý màu gần nhất vẫn giữ được nhận diện thương hiệu nhưng đạt chuẩn AA.
Câu hỏi thường gặp
Những câu hỏi gặp nhiều nhất khi dùng công cụ, được trình bày ngắn gọn và dễ quét.