Kiểm tra độ tương phản màu theo WCAG và sửa các cặp màu chưa đạt chỉ với một cú nhấp.
Cập nhật lần cuối
Coddy dạy bạn bằng cách viết code thật ngay trên trình duyệt: bài học tương tác, phản hồi tức thì và AI hỗ trợ khi bạn bị kẹt.
Công cụ *kiểm tra độ tương phản* là thứ nhà thiết kế và lập trình viên dùng trước khi phát hành một màn hình. Nó tính **tỷ lệ tương phản** giữa hai màu, tức màu chữ và màu nền phía sau, theo công thức trong Hướng dẫn về khả năng tiếp cận nội dung web (WCAG). Tỷ lệ càng lớn thì chữ càng dễ đọc.
WCAG định nghĩa ba ngưỡng. **3:1** là mức tối thiểu cho tiêu đề lớn (từ 24px chữ thường hoặc từ 18,66px chữ đậm) và cho đường viền nhìn thấy được của các thành phần giao diện tương tác như nút, ô nhập liệu và biểu tượng. **4,5:1** là mức AA tối thiểu cho chữ nội dung, mức mà phần lớn các nhóm hướng tới. **7:1** là AAA, mức cao nhất, hỗ trợ tốt cho người đọc có thị lực kém.
Độ tương phản **không** giống với việc hai màu trông rực rỡ đến đâu. Hai màu thương hiệu nổi bật vẫn có thể khó đọc nếu *độ chói* của chúng gần nhau. Công cụ này áp dụng công thức độ chói của WCAG cho từng kênh màu, báo tỷ lệ chính xác và chấm mức cho từng ngữ cảnh, để bạn không phải đoán.
Gõ hoặc dán giá trị HEX, hoặc dùng bảng chọn màu. Màu chữ là màu của chữ hoặc biểu tượng; màu nền là thứ nằm phía sau nó.
Con số lớn bên trái là tỷ lệ tương phản WCAG. Dưới 3:1 là rủi ro với mọi giao diện; dưới 4,5:1 thì không đạt cho chữ nội dung.
Ba hàng cho biết đạt hay không đạt với chữ thường (4,5/7), chữ lớn (3/4,5) và thành phần giao diện (3:1). Hãy nhắm tới dấu tích xanh ở mọi hàng mà thiết kế của bạn thật sự dùng.
Khi AA chưa đạt, công cụ có thể tăng hoặc giảm dần độ sáng của màu chữ, giữ nguyên sắc độ, cho đến khi cặp màu đạt. Nhấn thêm lần nữa để đạt AAA.
Khi cả hai màu đã đạt ở các ngữ cảnh bạn cần, sao chép đoạn CSS (color: + background:) và đưa vào stylesheet hoặc tệp design token.
Đối chiếu thứ bạn đang định kiểu với mức bạn cần. Nguồn: WCAG 2.2 Understanding 1.4.3 và 1.4.11.
| Đối tượng | Tối thiểu AA | Tối thiểu AAA | Ghi chú |
|---|---|---|---|
| Chữ nội dung (< 18pt thường) | 4,5 : 1 | 7 : 1 | Quy tắc mặc định cho đoạn văn, nhãn, chú thích |
| Chữ lớn (≥ 18pt thường hoặc ≥ 14pt đậm) | 3 : 1 | 4,5 : 1 | Tiêu đề, chữ ở phần hero, trích dẫn lớn |
| Thành phần giao diện và đối tượng đồ họa | 3 : 1 | - | Viền nút, ô nhập liệu, biểu tượng, vòng focus |
| Logo hoặc chi tiết trang trí thuần túy | Miễn trừ | Miễn trừ | Logo chữ và chữ ngẫu nhiên được miễn trừ, nhưng tính dễ dùng vẫn quan trọng |
| Trạng thái vô hiệu hóa | Miễn trừ | Miễn trừ | Điều khiển không hoạt động được miễn trừ, nhưng đừng dựa vào điều này để phát hành giao diện mặc định có độ tương phản thấp |
color: #1f2937; /* slate-800 */background: #f9fafb; /* slate-50 *//* Contrast ratio ≈ 14.6:1 */Kiểu kinh điển: xám đá đậm trên nền gần trắng. Đạt AAA cho chữ nội dung (≥ 7:1) và còn dư nhiều. Phần lớn giao diện sản phẩm nên mặc định nhắm tới khoảng này.
color: #3b82f6; /* blue-500 */background: #ffffff;/* Contrast ratio ≈ 4.0:1 */Các màu xanh lam rực trên nền trắng thường rơi vào khoảng 4:1: đọc được với tiêu đề lớn (đạt 3:1 AA chữ lớn) nhưng không đạt ngưỡng 4,5:1 cho chữ nội dung. Hãy dùng cho nút và nhãn CTA từ 18px trở lên, không dùng cho đoạn văn.
color: #facc15; /* amber-400 */background: #ffffff;/* Contrast ratio ≈ 1.6:1 - fails everything */Vàng sáng trên nền trắng là cái bẫy nổi tiếng: hai màu trông rất nổi nhưng độ chói lại quá gần nhau. Hãy dành cặp này cho nền tối (ví dụ #facc15 trên #1f2937 đạt khoảng 12:1).
placeholder và disabled sát giới hạn WCAG. Cả hai đều được WCAG miễn trừ, nhưng được miễn trừ không có nghĩa là dễ đọc.Nhắm tới ít nhất 4,5:1 cho chữ nội dung và 3:1 cho tiêu đề lớn hoặc giao diện tương tác. 7:1 là mục tiêu AAA: khắt khe nhưng đáng hướng tới ở những phần đọc quan trọng như tài liệu, hướng dẫn và thông báo lỗi.
AA là mức cơ sở về khả năng tiếp cận mà phần lớn quy định pháp lý yêu cầu (WCAG 2.1/2.2 AA). AAA là mục tiêu khắt khe hơn cho các tổ chức muốn hỗ trợ người dùng có thị lực kém. AAA không bắt buộc, nhưng với chữ nội dung thì đây là mục tiêu hợp lý.
WCAG định nghĩa chữ lớn là từ 18pt trở lên (khoảng 24px) ở độ đậm thường, hoặc từ 14pt trở lên (khoảng 18,66px) ở dạng in đậm. Chữ lớn chỉ cần 3:1 để đạt AA; chữ nhỏ hơn cần 4,5:1.
Các sắc độ trung tính sáng, đặc biệt là xanh lam, vàng và đỏ ở độ sáng khoảng 50%, thường chỉ dưới 4,5:1 một chút trên nền trắng. Cách sửa thường là làm tối màu chữ (hoặc dùng nó làm màu nền dưới chữ trắng). Dùng nút "Chỉnh màu chữ" để tìm sắc độ gần nhất đạt chuẩn.
Không. Điều khiển bị vô hiệu hóa và chi tiết trang trí thuần túy được miễn trừ rõ ràng. Nhưng "được miễn trừ" không giống với "trải nghiệm tốt". Nếu người dùng không phân biệt được nút bị vô hiệu hóa với nền, họ sẽ không biết nút đó tồn tại.
