BẢNG MÀU & THIẾT KẾ ĐỒ HỌAE-E-A-T
🎨

Kiểm Tra Tương Phản Màu Online

Đo tỷ lệ tương phản màu sắc chữ và nền theo tiêu chuẩn tiếp cận W3C WCAG 2.1.

⚡Kết Quả Tức Thì
17.85 : 1 (WCAG AA)Tỷ lệ tương phản
17.85 : 1Đạt chuẩn WCAG AAA (Nâng cao)PASS ✅ (Required ≥ 4.5:1)
1

Thông số đầu vào

Gợi ý nhanh
Hoặc tùy chỉnh thông số bên dưới
2

Kết Quả Tức Thì

17.85 : 1 (WCAG AA)
Tỷ lệ tương phản
Phân Bổ Tỷ Trọng+85.01%
0%50%100%
Điểm tương phản:17.85 : 1
3

Chi tiết

7 chỉ số
Tỷ Lệ Tương Phản Màu
17.85 : 1
Mức Độ Đạt Chuẩn WCAG
Đạt chuẩn WCAG AAANâng cao
Chuẩn WCAG AA (Văn bản thường)
PASS ✅
Required ≥ 4.5:1
Chuẩn WCAG AAA (Văn bản thường)
PASS ✅
Required ≥ 7.0:1
Chuẩn WCAG AA (Văn bản lớn)
PASS ✅
Required ≥ 3.0:1
Chuẩn WCAG AAA (Văn bản lớn)
PASS ✅
Required ≥ 4.5:1
Chuẩn Nút Bấm & Giao Diện UI
PASS ✅Required ≥ 3.0:1 for icons/buttons
⚡
Kết Quả Tức Thì
17.85 : 1 (WCAG AA)Tỷ lệ tương phản

Giải Đáp Nhanh & Ý Nghĩa Chỉ Số

Nguồn: Tổ Chức W3C - Tiêu Chuẩn Khả Năng Tiếp Cận Nội Dung Web (WCAG 2.1)

Công cụ kiểm tra tương phản màu giúp bạn đo lường tỷ lệ tương phản độ chói tương đối (Relative Luminance) giữa màu chữ và màu nền (L1 / L2) nhằm đảm bảo website đạt chuẩn khả năng tiếp cận W3C WCAG 2.1 cấp độ AA và AAA.

Các ngưỡng tương phản chuẩn W3C WCAG 2.1

  • Chuẩn AA (Chữ thông thường < 18pt): Yêu cầu tỷ lệ tương phản tối thiểu 4.5 : 1.
  • Chuẩn AA (Chữ lớn >= 18pt hoặc 14pt in đậm): Yêu cầu tỷ lệ tương phản tối thiểu 3.0 : 1.
  • Chuẩn AAA (Tương phản cao nâng cao): Yêu cầu tỷ lệ tối thiểu 7.0 : 1 cho chữ thường và 4.5 : 1 cho chữ lớn.
  • Giao diện nút bấm & Icon đồ họa: Yêu cầu tối thiểu 3.0 : 1.

Công thức tính độ tương phản W3C

Tỷ lệ tương phản = (L1 + 0.05) / (L2 + 0.05) Trong đó L1 là độ chói của màu sáng hơn và L2 là độ chói của màu tối hơn (0 <= L <= 1).

Chọn mã màu chữ và màu nền ở trên để xem điểm số tương phản và đánh giá Đạt/Không đạt chuẩn WCAG.

Công thức & Cơ chế tính toán

Công thức toán học
Công thức toán học
Tỷ Lệ Tương Phản
= (Độ Chói Màu Sáng + 0.05) / (Độ Chói Màu Tối + 0.05)

Tính toán độ chói tương đối theo chuẩn sRGB tuyến tính hóa và chuẩn W3C Web Accessibility.

Hướng dẫn từng bước

1

Chọn màu chữ (Foreground)

Nhập mã màu HEX hoặc dùng bảng chọn màu.

2

Chọn màu nền (Background)

Nhập mã màu nền giao diện.

3

Xem kết quả kiểm định

Xem tỷ lệ tương phản và huy hiệu Đạt/Không đạt chuẩn AA/AAA.

Bảng ví dụ minh họa

Ví dụGiá trị đầu vàoKết quả tínhGiải thích chi tiết
Chữ đen (#000000) trên nền trắng (#FFFFFF)
Văn Bản / Nội Dung: #000000, Màu Nền (Background): #FFFFFF
Tỷ lệ: 21.0:1 (Đạt AAA xuất sắc)
Độ tương phản tối đa trong thiết kế đồ họa.
Dark Mode Neon Sky (#38BDF8 on #0F172A, 9.4:1)
Mã Màu Chữ Foreground (Hex): #38BDF8, Mã Màu Nền Background (Hex): #0F172A
Kết quả vận hành chuẩn xác
Hệ thống tự động tính toán đối soát tức thì theo các thông số thực nghiệm chuẩn mực.

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

Phương Pháp Luận Khoa Học & Nguồn Dữ Liệu Đối Chiếu

Nguồn tham khảo & Phương pháp

Tổ Chức W3C - Tiêu Chuẩn Khả Năng Tiếp Cận Nội Dung Web (WCAG 2.1)

Xem tài liệu
Tiêu Chuẩn & Phương Pháp Tính

Chuẩn quy chiếu: Tiêu chuẩn kỹ thuật quy chuẩn ISO / W3C / IETF

Công thức: Tỷ Lệ Tương Phản = (Độ Chói Màu Sáng + 0.05) / (Độ Chói Màu Tối + 0.05)

Ngày kiểm duyệt: 21 Tháng 8, 2026

Nguồn Dữ Liệu Tham Chiếu

Cơ quan ban hành: Tổ Chức W3C - Tiêu Chuẩn Khả Năng Tiếp Cận Nội Dung Web (WCAG 2.1)

Tài liệu đối chiếu: Quy chuẩn tính toán & Tiêu chuẩn ngành

Bảo mật & Tính toán: 100% xử lý tức thì trên thiết bị, không lưu dữ liệu cá nhân

Lưu Ý & Giới Hạn Áp Dụng

Kết quả tính toán được mô phỏng theo các công thức quy chuẩn toán học và khoa học. Vui lòng đối soát với tài liệu kỹ thuật chuyên ngành khi áp dụng vào các dự án chuyên sâu.

MẠNG LƯỚI TRI THỨC & LIÊN KẾT CHUYÊN SÂU

Công Cụ, Phương Pháp Luận & Bài Viết Cùng Chủ Đề

Kết nối kiến thức đa chiều, công cụ tính toán kiểm chứng và tài liệu phương pháp luận khoa học.

Xem Tất Cả Công Cụ Bảng Màu & Thiết Kế Đồ Họa

Kết quả tính toán được mô phỏng theo các công thức quy chuẩn toán học và khoa học. Vui lòng đối soát với tài liệu kỹ thuật chuyên ngành khi áp dụng vào các dự án chuyên sâu.

Xem Tất Cả Công Cụ Bảng Màu & Thiết Kế Đồ Họa