Kiểm tra độ tương phản WCAG

Kiểm tra tỉ lệ tương phản giữa màu chữ và màu nền theo chuẩn WCAG 2.x (AA / AAA).

Tỉ lệ tương phản

10.30:1

Chữ thườngAA 4.5AAA 7
Chữ lớn (≥ 24px hoặc ≥ 18.66px đậm)AA 3AAA 4.5
Thành phần giao diện & đồ họaAA 3

Xem trước

Tiêu đề lớn mẫu

Đây là đoạn văn bản mẫu để bạn cảm nhận độ dễ đọc của cặp màu này trên giao diện thực tế.

Button
10.3:1AAA
FAQ
Nhóm Thiết kế (Design)•Tài liệu kỹ thuật & Đặc tả RFC

Tài liệu & Hướng dẫn chuyên sâu: Kiểm tra độ tương phản WCAG (Contrast Checker)

1. Tổng quan & Nguyên lý hoạt động

Màu chữ xám nhạt trên nền trắng trông đẹp nhưng có thể khiến người cao tuổi, người kém thị lực hoặc người dùng ngoài trời nắng không đọc được. Bộ hướng dẫn WCAG 2.x của W3C quy định tỉ lệ tương phản tối thiểu giữa chữ và nền để nội dung dễ tiếp cận. Công cụ này tính tỉ lệ tương phản theo đúng công thức độ sáng tương đối của WCAG (dùng thư viện `colord`), đánh giá đạt/không đạt AA và AAA cho chữ thường, chữ lớn và thành phần giao diện, đồng thời gợi ý màu chữ gần nhất đạt chuẩn AA.

2. Ưu thế kiến trúc & Tính năng nổi bật

Đánh giá AA / AAA đầy đủ

Hiển thị ngay kết quả cho chữ thường (AA 4.5:1, AAA 7:1), chữ lớn (AA 3:1, AAA 4.5:1) và thành phần giao diện/đồ họa (AA 3:1) với huy hiệu xanh/đỏ dễ nhìn.

Nhập màu linh hoạt

Chấp nhận hex (#RGB, #RRGGBB), rgb(), hsl() và tên màu CSS (ví dụ rebeccapurple); có cả bộ chọn màu trực quan và nút đổi chỗ chữ/nền.

Gợi ý màu chữ đạt chuẩn

Khi cặp màu chưa đạt AA, công cụ điều chỉnh độ sáng của màu chữ (giữ nguyên sắc độ) đến khi đạt 4.5:1 và cho bạn áp dụng chỉ với một cú nhấp. Phần xem trước hiển thị chữ lớn, đoạn văn và nút để bạn cảm nhận thực tế.

3. Ngưỡng tương phản theo WCAG 2.x

Tỉ lệ tối thiểu (chữ so với nền) để đạt từng mức tuân thủ:

Loại nội dungMức AAMức AAA
Chữ thường (< 24px hoặc < 18.66px đậm)4.5 : 17 : 1
Chữ lớn (≥ 24px hoặc ≥ 18.66px đậm)3 : 14.5 : 1
Thành phần giao diện, biểu tượng, viền input3 : 1—
Logo và chữ trang trí thuần tuýKhông yêu cầuKhông yêu cầu

4. Câu hỏi thường gặp (FAQ)

Giải đáp các thắc mắc phổ biến của lập trình viên khi sử dụng tiện ích Kiểm tra độ tương phản WCAG (Contrast Checker).

AA là mức tối thiểu mà hầu hết quy định pháp lý và tiêu chuẩn doanh nghiệp yêu cầu, và là mục tiêu thực tế cho phần lớn giao diện. AAA khắt khe hơn và không phải lúc nào cũng khả thi với mọi màu thương hiệu; hãy dùng AAA cho nội dung đọc dài (bài viết, tài liệu) nếu có thể.

5. Công cụ liên quan