QuickATools

Công cụ lập trình · Free browser tool

Kiểm tra tương phản màu WCAG

Kiểm tra tỉ lệ tương phản màu chữ-nền theo thời gian thực. Xác minh tuân thủ WCAG 2.1 AA và AAA ngay cho thiết kế web tiếp cận được.

Colors

Pick or type hex values for text and background.

#
#

Live preview

Sample heading

The quick brown fox jumps over the lazy dog. Body text should stay readable at this size for AA compliance (4.5:1).

Smaller supporting copy — check Normal Text AA/AAA below.

Contrast ratio

17.74:1

Range is 1:1 (identical) to 21:1 (black on white).

Text luminance
0.0092
rgb(17, 24, 39)
Background luminance
1.0000
rgb(255, 255, 255)

WCAG 2.1 compliance

Large text means at least 18pt (24px) regular or 14pt (18.66px) bold.

  • Normal text · AA

    Body copy under ~18pt / 14pt bold · ≥ 4.5:1

    Pass

  • Normal text · AAA

    Enhanced contrast for body copy · ≥ 7:1

    Pass

  • Large text · AA

    ≥18pt regular or ≥14pt bold · ≥ 3:1

    Pass

  • Large text · AAA

    Enhanced contrast for large text · ≥ 4.5:1

    Pass

Frequently Asked Questions

WCAG 2.1 thực sự yêu cầu tỉ lệ tương phản nào?

Tiêu chí thành công WCAG 2.1 1.4.3 (Contrast Minimum) yêu cầu tỉ lệ tương phản ít nhất 4.5:1 cho văn bản thường và 3:1 cho văn bản lớn ở Cấp AA. Cấp AAA (1.4.6 Contrast Enhanced) nâng sàn đó lên 7:1 cho văn bản thường và 4.5:1 cho văn bản lớn. Tỉ lệ tính từ độ sáng tương đối của mỗi màu và nằm từ 1:1 (màu giống hệt) tới 21:1 (đen tinh trên trắng tinh).

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

AA là mục tiêu tuân thủ phổ biến nhất cho website công cộng, dịch vụ chính phủ và sản phẩm thương mại — cân bằng khả năng đọc với linh hoạt thiết kế. AAA là cấp nâng cao nghiêm hơn khi bạn cần khả năng đọc tối đa (ví dụ trải nghiệm đọc dài hoặc đối tượng thị lực thấp đáng kể). Đạt AAA cho mọi phần tử UI thường không thực tế, nên nhiều đội nhắm AA toàn cục và AAA cho văn bản thân quan trọng.

"Văn bản lớn" theo WCAG nghĩa là gì?

Văn bản lớn định nghĩa là ít nhất 18 point (thường ~24px) độ đậm thường, hoặc ít nhất 14 point (thường ~18.66px) đậm. Tiêu đề và chữ hero thường đủ điều kiện; đoạn thân thường không. Văn bản lớn nhận ngưỡng tương phản thấp hơn vì glyph lớn hơn vẫn đọc được ở tương phản yếu hơn — nhưng bạn vẫn nên xác minh kích thước render thật trong CSS, không chỉ file thiết kế.

Vì sao tương phản màu quan trọng đến vậy với tiếp cận?

Tương phản thấp là một trong những lỗi tiếp cận phổ biến nhất. Người dùng thị lực thấp, người lớn tuổi, người trên màn hình tối hoặc chói nắng, và nhiều người khiếm màu đều dựa vào chênh lệch độ sáng đủ — không chỉ hue — để đọc chữ. Kiểm tra tương phản sớm ngăn ship giao diện trông bóng bẩy trong điều kiện lý tưởng nhưng trở nên không dùng được với phần lớn khách thực.

Công cụ bạn cũng có thể cần

Khám phá các tiện ích miễn phí khác trên trình duyệt cho người bán, nhà sáng tạo và chuyên gia.

Vì sao tương phản màu không thể thỏa hiệp với giao diện tiếp cận được

Thiết kế không rào cản không phải bước đánh bóng "hay có" — đó là cách người thị lực thấp, khiếm màu hoặc chói ngoài trời vẫn đọc UI của bạn. WCAG 2.1 định nghĩa tỉ lệ tương phản tối thiểu giữa chữ và nền để nội dung vẫn đọc được với phạm vi người dùng rộng hơn nhiều. Trượt các ngưỡng đó lặng lẽ loại người khỏi form, tài liệu, dashboard và trang marketing trông ổn với nhà thiết kế trên màn hình đã hiệu chuẩn.

Site chính phủ, sản phẩm doanh nghiệp và nhiều app tiêu dùng toàn cầu được kỳ vọng đạt ít nhất WCAG AA. Kiểm tra tương phản trong trình duyệt — với cùng công thức độ sáng tương đối đặc tả dùng — cho phép bạn xác thực quyết định bảng màu trước khi ship, mà không tải màu thương hiệu lên dịch vụ bên thứ ba. Đổi chữ và nền, xem trước văn bản lớn vs thường, và chia sẻ liên kết bảng màu với đội khi tổ hợp đạt.

AA yêu cầu 4.5:1 cho văn bản thường và 3:1 cho văn bản lớn; AAA nâng lên 7:1 và 4.5:1. Văn bản lớn thường nghĩa là 18pt (khoảng 24px) thường hoặc 14pt (khoảng 18.66px) đậm. Dùng công cụ này làm cổng nhanh trong review thiết kế, rồi xác nhận UI cuối trong ngữ cảnh — icon, gradient và lớp phủ có thể đổi tương phản hiệu dụng ngay khi hai giá trị hex phẳng đạt.

Thêm tiện ích developer trên site này: xác thực mẫu form bằng Trình kiểm tra Regex, kiểm tra token auth trong Bộ giải mã JWT, dọn design token dạng JSON bằng Định dạng & kiểm tra JSON, hoặc mã hóa tài nguyên qua Mã hóa/Giải mã Base64. Với ảnh sản phẩm marketplace, Kiểm tra nền ảnh sản phẩm dùng lại cùng toán độ sáng trên ảnh thật.