Kiểm Tra Độ Tương Phản Màu Sắc Miễn Phí

Kiểm tra các kết hợp màu văn bản và nền để tuân thủ tiếp cận WCAG 2.1. Nhận kết quả đạt/không đạt tức thì cho các tiêu chuẩn AA và AAA — không cần đăng ký.

94,217+ lần kiểm tra tương phản đã thực hiện

Tỷ Lệ Tương Phản

17.06:1

Xem Trước Văn Bản Lớn (24px)

Xem trước văn bản thân thông thường (16px). Con cáo nâu nhanh nhẹn nhảy qua con chó lười. Ví dụ này cho thấy kết hợp màu của bạn trông như thế nào ở kích thước văn bản thân thông thường.

Văn bản nhỏ (14px) — thường được sử dụng cho chú thích, ghi chú và siêu dữ liệu.

Đảo ngược: nền trên màu văn bản (17.06:1 — cùng tỷ lệ)

Văn Bản Thông Thường AA

Yêu cầu 4.5:1

ĐẠT

Văn Bản Lớn AA

Yêu cầu 3:1

ĐẠT

Văn Bản Thông Thường AAA

Yêu cầu 7:1

ĐẠT

Văn Bản Lớn AAA

Yêu cầu 4.5:1

ĐẠT

Sẵn sàng xây dựng trang web tiếp cận với những màu này?

Xây dựng với những màu này

Công Cụ Kiểm Tra Độ Tương Phản Màu Sắc Là Gì?

Công cụ kiểm tra độ tương phản màu sắc là một công cụ đo lường sự khác biệt về độ sáng giữa hai màu — thường là văn bản nền trước và nền sau của nó — và tính toán tỷ lệ tương phản theo Hướng dẫn Tiếp cận Nội dung Web (WCAG). Tỷ lệ này xác định liệu kết hợp màu của bạn có thể đọc được đối với những người có khiếm khuyết thị giác, bao gồm mù màu và thị lực kém.

Công cụ kiểm tra tương phản của Kleap tức thì tính toán tỷ lệ tương phản WCAG 2.1 và kiểm tra nó đối với tất cả bốn mức tuân thủ: Văn bản Thông thường AA (4.5:1), Văn bản Lớn AA (3:1), Văn bản Thông thường AAA (7:1), và Văn bản Lớn AAA (4.5:1). Nếu màu của bạn không đạt, công cụ đề xuất màu thay thế tiếp cận gần nhất để bạn có thể khắc phục các vấn đề tiếp cận mà không cần thiết kế lại toàn bộ bảng màu.

Giải Thích Các Mức Tương Phản WCAG

Văn Bản Thông Thường AA

Tối thiểu 4.5:1

Yêu cầu tỷ lệ tương phản tối thiểu là 4.5:1. Đây là mục tiêu tuân thủ phổ biến nhất và áp dụng cho văn bản thân dưới 18pt (hoặc 14pt đậm).

Văn Bản Lớn AA

Tối thiểu 3:1

Yêu cầu tỷ lệ tương phản tối thiểu là 3:1. Áp dụng cho văn bản ít nhất 18pt (24px) hoặc 14pt đậm (khoảng 18.66px đậm).

Văn Bản Thông Thường AAA

Tối thiểu 7:1

Tiêu chuẩn cao nhất, yêu cầu tỷ lệ tương phản 7:1. Đảm bảo khả năng đọc cho người dùng có thị lực yếu vừa phải (khoảng 20/80).

Văn Bản Lớn AAA

Tối thiểu 4.5:1

Yêu cầu 4.5:1 cho văn bản lớn ở cấp độ AAA. Cung cấp khả năng đọc nâng cao cho tiêu đề và văn bản hiển thị.

Mẹo Thiết Kế Màu Sắc Có Thể Tiếp Cận

1

Bắt đầu với tương phản

Chọn màu văn bản và nền của bạn với tương phản trong đầu ngay từ đầu. Thêm tiếp cận sau này khó hơn nhiều so với xây dựng từ đầu.

2

Đừng chỉ dựa vào màu sắc

Sử dụng biểu tượng, mẫu hoa văn, gạch chân hoặc nhãn cùng với màu để truyền đạt ý nghĩa. Khoảng 8% đàn ông có một số dạng mù màu.

3

Kiểm tra trên thiết bị thực

Màu sắc trông khác nhau trên màn hình, điện thoại và dưới ánh nắng mặt trời. Kiểm tra tỷ lệ tương phản trên các thiết bị thực tế, không chỉ trong công cụ thiết kế.

4

Kiểm tra cả chế độ tối

Nếu trang web của bạn hỗ trợ chế độ tối, hãy xác minh tỷ lệ tương phản cho cả hai giao diện. Một cặp màu đạt ở chế độ sáng có thể không đạt ở chế độ tối.

5

Chú ý trọng lượng phông chữ

Trọng lượng phông chữ mỏng và nhẹ làm giảm tương phản được cảm nhận. Nếu bạn sử dụng trọng lượng dưới 400, hãy nhắm đến tỷ lệ tương phản cao hơn mức tối thiểu.

6

Kiểm tra các trạng thái tương tác

Các trạng thái hover, focus và active thường sử dụng màu sắc khác nhau. Đảm bảo tất cả các trạng thái tương tác đáp ứng yêu cầu tương phản, không chỉ trạng thái mặc định.

So Sánh Công Cụ Kiểm Tra Tương Phản

Tính năngKleapWebAIMCoolorsAdobe Color
GiáMiễn phíMiễn phíFreemiumMiễn phí (với tài khoản Adobe)
Xem Trước Thời Gian ThựcCó, văn bản trực tiếp trên nềnCó, cơ bảnCóCó
Màu Tiếp Cận Gần NhấtCó, tự động đề xuấtKhôngKhôngMột phần
Các Cấp WCAG Được Kiểm TraAA + AAA (thông thường + lớn)AA + AAAChỉ AAAA + AAA
Trình Xây Dựng Website Tích HợpCó, được hỗ trợ bởi AIKhôngKhôngKhông
Nút Hoán Đổi MàuCóKhôngKhôngKhông
Cặp Ngẫu Nhiên Có Thể Tiếp CậnCóKhôngKhôngKhông

Câu Hỏi Thường Gặp

Tỷ lệ tương phản màu sắc là gì?+
Tỷ lệ tương phản màu sắc là một giá trị số biểu thị sự khác biệt về độ sáng (độ sáng được nhận thức) giữa hai màu. Nó dao động từ 1:1 (không có tương phản, màu giống hệt nhau) đến 21:1 (tương phản tối đa, đen trên trắng). Tỷ lệ được tính bằng công thức độ sáng tương đối WCAG 2.1, có tính đến cách mắt người nhận thức các bước sóng ánh sáng khác nhau.
Tôi cần tỷ lệ tương phản WCAG nào?+
Để tuân thủ WCAG 2.1 Cấp độ AA (tiêu chuẩn được yêu cầu rộng rãi nhất), văn bản thân thông thường cần ít nhất 4.5:1 tương phản, và văn bản lớn (18pt+ hoặc 14pt+ đậm) cần ít nhất 3:1. Đối với Cấp độ AAA (tiêu chuẩn cao nhất), văn bản thông thường cần 7:1 và văn bản lớn cần 4.5:1. Hầu hết các yêu cầu pháp lý về tiếp cận đề cập đến Cấp độ AA.
Văn bản lớn trong WCAG là gì?+
Văn bản lớn trong WCAG được định nghĩa là văn bản ít nhất 18 điểm (24 pixel CSS) hoặc 14 điểm đậm (khoảng 18.66 pixel CSS đậm). Điều này tương ứng với văn bản kích thước tiêu đề. Văn bản lớn có yêu cầu tương phản thấp hơn vì kích thước lớn hơn làm cho nó dễ đọc hơn một cách tự nhiên.
WCAG có áp dụng cho hình ảnh và biểu tượng không?+
Có, Tiêu chí Thành công 1.4.11 của WCAG 2.1 yêu cầu các thành phần giao diện người dùng (như biểu tượng, viền biểu mẫu và chỉ báo focus) và các đối tượng đồ họa có ít nhất 3:1 tương phản so với các màu liền kề. Điều này tách biệt với các yêu cầu tương phản văn bản và được giới thiệu trong WCAG 2.1.
Tỷ lệ tương phản được tính như thế nào?+
Tỷ lệ tương phản sử dụng công thức độ sáng tương đối: (L1 + 0.05) / (L2 + 0.05), trong đó L1 là độ sáng của màu sáng hơn và L2 là của màu tối hơn. Độ sáng tương đối được tính bằng cách chuyển đổi các giá trị sRGB sang ánh sáng tuyến tính (sử dụng hiệu chỉnh gamma) và trọng số chúng: 0.2126*R + 0.7152*G + 0.0722*B. Các trọng số phản ánh độ nhạy của mắt người — chúng ta nhận thức màu xanh lá là sáng nhất.
WCAG AA có đủ cho trang web của tôi không?+
WCAG AA là tiêu chuẩn được tham chiếu bởi hầu hết các luật tiếp cận trên toàn thế giới, bao gồm ADA (Hoa Kỳ), EAA (EU) và EN 301 549 (Châu Âu). Đối với hầu hết các trang web và ứng dụng, tuân thủ AA vừa đủ về mặt pháp lý vừa cung cấp khả năng đọc tốt. AAA được khuyến nghị cho các trang chính phủ, chăm sóc sức khỏe và giáo dục, nhưng thường không được yêu cầu bởi pháp luật.
Nếu màu thương hiệu của tôi không đạt tương phản thì sao?+
Bạn có một số lựa chọn: điều chỉnh nhẹ sắc thái màu thương hiệu của bạn (thường chỉ cần thay đổi nhỏ về độ sáng), chỉ sử dụng màu thương hiệu cho các yếu tố trang trí và chọn màu tương phản cao cho văn bản, tăng kích thước phông chữ để đủ điều kiện cho ngưỡng văn bản lớn, hoặc thêm lớp phủ bán trong suốt sau văn bản đặt trên nền có màu. Công cụ của chúng tôi tự động đề xuất màu tiếp cận gần nhất.
Tương phản có quan trọng cho chế độ tối không?+
Hoàn toàn có. Các yêu cầu tương phản WCAG tương tự áp dụng bất kể bảng màu. Trên thực tế, chế độ tối đưa ra những thách thức độc đáo: văn bản trắng thuần (#FFFFFF) trên nền rất tối có thể gây ra hiện tượng hào quang (hiệu ứng phát sáng) cho người dùng mắc chứng loạn thị. Màu trắng hơi tắt (#E0E0E0 đến #F0F0F0) trên màu xám tối (#1A1A1A đến #2D2D2D) thường cung cấp khả năng đọc tốt hơn trong khi vẫn đáp ứng tiêu chuẩn AA.
Người dùng mù màu có thể thấy đủ tương phản không?+
Tỷ lệ tương phản cao giúp ích đáng kể cho người dùng mù màu, nhưng tương phản một mình không đủ. WCAG cũng yêu cầu màu sắc không phải là phương tiện duy nhất để truyền đạt thông tin (1.4.1). Ví dụ, đừng chỉ sử dụng đỏ/xanh lá để chỉ ra lỗi/thành công — thêm biểu tượng hoặc nhãn văn bản. Công thức tỷ lệ tương phản tính đến độ sáng, không phải màu sắc, vì vậy nó giúp ích trên tất cả các loại mù màu.
Làm thế nào để kiểm tra tương phản trong trang web hiện tại của tôi?+
Bạn có thể sử dụng DevTools của trình duyệt (kiểm tra Lighthouse của Chrome bao gồm kiểm tra tương phản), tiện ích mở rộng trình duyệt như axe hoặc WAVE, hoặc dán các giá trị HEX/RGB chính xác của bạn vào công cụ này. Để kiểm tra toàn diện, sử dụng các công cụ tự động như Lighthouse để quét toàn trang, sau đó xác minh thủ công bất kỳ phần tử nào được gắn cờ. Hãy nhớ kiểm tra các trạng thái hover, kiểu focus và văn bản giữ chỗ — những thứ này thường bị bỏ qua.

Xây Dựng Trang Web Tiếp Cận với AI

Sử dụng các kết hợp màu tiếp cận của bạn để xây dựng trang web đầy đủ, tuân thủ WCAG với trình xây dựng website AI của Kleap.

Bắt Đầu Xây Dựng Miễn Phí

Related Free Tools

CSS Gradient Generator

Color Picker

Color Palette Generator

Button Generator

Kiểm Tra Độ Tương Phản Màu Sắc Miễn Phí | Công Cụ Tiếp Cận WCAG 2026