Dễ đọc với mọi người

Một tiêu đề phụ lớn

Văn bản nội dung chịu ảnh hưởng nhiều nhất từ độ tương phản thấp, vì người ta đọc lâu hơn ở cỡ chữ nhỏ. Một liên kết văn bản

Nút

Màu chữ

Độ mờ đục của chữ

Màu nền

Mô phỏng mù màu

Giao diện

Tìm hiểu thêm về độ tương phản màu

Công cụ kiểm tra độ tương phản màu

Hãy kiểm tra xem chữ có dễ đọc trên nền hay không trước khi phát hành thiết kế. Chọn hoặc nhập màu chữ và màu nền, công cụ sẽ hiển thị tỷ lệ tương phản WCAG 2.x với kết quả đạt hay không đạt cho AA và AAA, cho chữ thường, chữ lớn và thành phần giao diện. Bản xem trước trực tiếp, mô phỏng mù màu và gợi ý sửa giúp bạn tìm được cặp màu phù hợp. Chọn màu chữ và màu nền dạng HEX, RGB hoặc HSL. Tỷ lệ tương phản WCAG, kết quả AA và AAA cùng bản xem trước cập nhật khi bạn gõ, và các màu đạt chuẩn gần nhất được gợi ý. Mọi thứ được lưu trong trình duyệt này.

Cách nó hoạt động

Chọn màu chữ và màu nền, hoặc nhập dạng HEX, RGB hoặc HSL. Đặt độ mờ đục của chữ nếu chữ bán trong suốt.
Xem tỷ lệ tương phản và các huy hiệu AA, AAA cho chữ thường, chữ lớn và thành phần giao diện, rồi kiểm tra bản xem trước trực tiếp.
Áp dụng màu gợi ý nếu cặp màu không đạt, lưu các cặp tốt vào bảng màu và sao chép CSS vào dự án.

Có cách sửa, không chỉ điểm số

Khi một cặp màu không đạt, công cụ tìm màu chữ và màu nền gần nhất có cùng sắc độ và độ bão hòa đạt AA và AAA, chỉ một cú nhấp là áp dụng. Chữ bán trong suốt được trộn với nền trước, đúng như cách trình duyệt vẽ.

Riêng tư và dễ mang theo

Màu và bảng màu của bạn chỉ lưu trong trình duyệt này. Lưu tất cả dạng JSON để sao lưu hoặc chuyển sang thiết bị khác, hoặc lưu kết quả dạng PDF hay hình ảnh. Hoàn tác và làm lại áp dụng cho mọi thay đổi.

Hỏi thường xuyên

Công cụ kiểm tra độ tương phản có miễn phí không?

Có. Công cụ miễn phí, không cần tài khoản và chạy trên mọi trình duyệt hiện đại.

Tôi cần tỷ lệ bao nhiêu?

Mức AA của WCAG yêu cầu ít nhất 4,5:1 cho chữ thường và 3:1 cho chữ lớn cũng như thành phần giao diện như viền ô nhập và biểu tượng. Mức AAA yêu cầu 7:1 cho chữ thường và 4,5:1 cho chữ lớn.

Vì sao 4,48 không đạt dù làm tròn thành 4,5?

Ngưỡng WCAG là chính xác. Tỷ lệ 4,48:1 thấp hơn 4,5:1 nên không đạt AA cho chữ thường. Công cụ so sánh giá trị chưa làm tròn, vì vậy huy hiệu luôn nghiêm ngặt.