Kiểm tra độ tương phản màu chữ và nền theo chuẩn WCAG AA, AAA
Mục lục
Cách kiểm tra độ tương phản màu chữ và nền bằng công cụ Kiểm tra tương phản của ColorME: nhập hai mã màu, đọc tỉ lệ và năm mục WCAG AA, AAA, bấm màu gợi ý để sửa, mẹo đổi chỗ để sửa màu nút, kèm bảng 11 cặp màu đã thử và các giới hạn nên biết.
Trả lời nhanh: để kiểm tra độ tương phản màu chữ và nền, mở công cụ Kiểm tra tương phản của ColorME, nhập mã màu chữ và mã màu nền. Công cụ hiện ngay tỉ lệ tương phản (ví dụ 4.97 : 1), cho biết cặp màu đạt hay chưa đạt chuẩn WCAG AA, AAA, và nếu chưa đạt thì gợi ý màu chữ gần nhất đạt chuẩn. Chữ thường cần từ 4.5 : 1 để đạt AA và từ 7 : 1 để đạt AAA. Công cụ miễn phí, không cần đăng nhập.
Xem nhanh: gõ mã màu, tỉ lệ và năm mục kiểm tra đổi theo từng ký tự. Ảnh chụp màn hình: ColorME.
Độ tương phản màu là gì, bao nhiêu thì đạt chuẩn WCAG?
Độ tương phản (contrast) ở đây là mức chênh lệch độ sáng giữa màu chữ và màu nền, viết dưới dạng tỉ lệ từ 1 : 1 (hai màu giống hệt nhau) đến 21 : 1 (đen trên trắng). Tỉ lệ càng cao, chữ càng dễ đọc. Bộ hướng dẫn WCAG của W3C dùng chính tỉ lệ này để đặt ngưỡng, và công cụ của ColorME kiểm tra theo WCAG 2.1 với năm mục:
| Mục kiểm tra trong công cụ | Ngưỡng | Dùng cho |
|---|---|---|
| AA · chữ thường | từ 4.5 : 1 | Đoạn văn, nhãn, chú thích: mức tối thiểu nên đạt |
| AA · chữ lớn | từ 3 : 1 | Chữ từ 18pt (khoảng 24px), hoặc 14pt (khoảng 18.66px) in đậm |
| AAA · chữ thường | từ 7 : 1 | Nội dung đọc dài, sản phẩm cho người thị lực kém |
| AAA · chữ lớn | từ 4.5 : 1 | Tiêu đề lớn ở mức khắt khe hơn |
| Thành phần giao diện | từ 3 : 1 | Viền ô nhập, icon quan trọng so với nền xung quanh |
Các ngưỡng này lấy từ tiêu chí 1.4.3 Contrast (Minimum), 1.4.6 Contrast (Enhanced) và 1.4.11 Non-text Contrast của WCAG 2.1. Nếu bạn mới nghe tới tương phản như một nguyên lý thị giác (sáng tối, to nhỏ, nóng lạnh), bài các cặp màu tương phản phổ biến là phần nền; bài này chỉ nói về con số đo được giữa chữ và nền.
Cách kiểm tra độ tương phản màu chữ và nền
Video dưới đây quay lại cả quy trình ở tốc độ thật: nhập màu, đọc kết quả, bấm màu gợi ý, đổi chỗ chữ và nền, rồi thử vài màu nút khác nhau.
Video: kiểm tra và sửa ba cặp màu trong công cụ Kiểm tra tương phản. Quay màn hình: ColorME.
Bước 1: nhập màu chữ và màu nền
Mở colorme.vn/tools/contrast-checker. Trang mở sẵn với một cặp mặc định: chữ #667085 trên nền #FFFFFF, tỉ lệ 4.97 : 1.
Lúc vừa mở: hai ô màu, tỉ lệ, năm mục kiểm tra và khung "Xem thử". Ảnh chụp màn hình: ColorME.
Gõ hoặc dán mã vào ô Màu chữ và Màu nền. Ngoài HEX sáu ký tự, chúng tôi đã thử và công cụ nhận đúng các cách viết sau:
- HEX rút gọn:
#ffftrên#000cho 21.00 : 1. - RGB:
rgb(37, 99, 235)trên trắng cho 5.16 : 1, bằng đúng kết quả của#2563EB. - HSL:
hsl(221, 83%, 53%)trên trắng cho 5.17 : 1 (lệch 0.01 vì HSL đã làm tròn). - Tên màu CSS:
navytrênwhitecho 16.00 : 1.
Bạn cũng có thể bấm vào ô màu vuông cạnh mã để mở bảng chọn màu của trình duyệt. Chưa có mã màu? Lấy mã từ ảnh hoặc từ màn hình bằng công cụ Chọn màu (xem hướng dẫn lấy mã màu từ ảnh), hoặc đổi từ CMYK, RGB về HEX theo bài đổi mã màu HEX sang RGB, CMYK, HSL.
Bước 2: đọc tỉ lệ và năm mục kiểm tra
Con số lớn là tỉ lệ tương phản, hiển thị hai chữ số thập phân. Ngay dưới là một dòng nhận xét, có bốn mức:
| Tỉ lệ | Nhận xét của công cụ |
|---|---|
| Từ 7 : 1 | Rất tốt |
| Từ 4.5 đến dưới 7 | Đạt chuẩn AA |
| Từ 3 đến dưới 4.5 | Chỉ đạt cho chữ lớn |
| Dưới 3 | Không đạt, khó đọc |
Năm ô bên dưới ghi Đạt hoặc Chưa cho từng mục trong bảng ở đầu bài. Ví dụ quen thuộc nhất là chữ xám nhạt #98A2B3 trên nền trắng, kiểu màu hay dùng cho chữ gợi ý trong ô nhập và dòng chú thích: tỉ lệ chỉ 2.57 : 1, cả năm mục đều "Chưa".
Xám nhạt trên trắng: 2.57 : 1, không đạt mục nào. Ảnh chụp màn hình: ColorME.
Khung Xem thử bên phải đặt đúng hai màu của bạn vào một tiêu đề, một đoạn văn, một dòng "Chữ nhỏ 12px" và một nút. Hãy nhìn dòng chữ nhỏ: cặp màu vừa sát ngưỡng thường vẫn đọc được ở tiêu đề nhưng mờ hẳn ở cỡ 12px.
Bước 3: bấm màu gợi ý để sửa
Khi cặp màu chưa đạt, dưới năm ô có dòng "Gợi ý màu gần nhất đạt chuẩn" với tối đa hai nút: Đạt AA và Đạt AAA. Bấm một nút, mã mới được điền vào ô Màu chữ. Với chữ xám ở trên, "Đạt AA: #6B7585" đưa tỉ lệ lên 4.65 : 1; "Đạt AAA: #4F5868" là mức đậm hơn nữa.
Bấm "Đạt AA", rồi "Đạt AAA": chữ trong khung xem thử đậm dần. Ảnh chụp màn hình: ColorME.
Theo phần hỏi đáp trên trang công cụ, màu gợi ý được tính như sau: "công cụ giữ nguyên sắc độ màu chữ của bạn và chỉ đổi độ sáng tới khi đạt AA hoặc AAA". Vì vậy xám xanh vẫn ra xám xanh, hồng vẫn ra hồng: chữ hồng #EC4899 trên nền hồng nhạt #FDF2F8 (3.23 : 1) được gợi ý #CC247E cho AA và #A30060 cho AAA.
Bước 4: đổi chỗ để sửa màu nền của nút
Khi còn tìm được một màu chữ đạt chuẩn, công cụ gợi ý đổi màu chữ chứ không đổi màu nền. Với nút bấm thì đây là chỗ dễ vướng: chữ trắng trên nút cam #F97316 chỉ đạt 2.80 : 1, và gợi ý AA là đổi chữ sang #333333. Đúng về con số, nhưng phần lớn bộ nhận diện muốn giữ chữ trắng.
Chữ trắng trên nút cam: 2.80 : 1. Gợi ý của công cụ là đổi màu chữ sang xám đậm. Ảnh chụp màn hình: ColorME.
Cách giữ chữ trắng mà vẫn dùng được gợi ý: bấm nút Đổi chỗ (mũi tên hai chiều giữa hai ô màu) để cam thành màu chữ, bấm "Đạt AA: #C05400", rồi bấm Đổi chỗ lần nữa. Tỉ lệ tương phản không phụ thuộc màu nào là chữ, màu nào là nền, nên chữ trắng trên nền #C05400 cũng đạt 4.65 : 1.
Đổi chỗ, bấm gợi ý, đổi chỗ lại: màu nút đậm lên vừa đủ để chữ trắng đạt AA. Ảnh chụp màn hình: ColorME.
Kết quả: chữ trắng trên #C05400, 4.65 : 1. Ảnh chụp màn hình: ColorME.
Ví dụ thật: sửa một thẻ đăng ký từ chưa đạt sang đạt AA
Để thấy khác biệt ngoài con số, chúng tôi tự dựng một thẻ đăng ký đơn giản rồi thay đúng hai màu mà công cụ gợi ý: chữ phụ từ #98A2B3 sang #6B7585, nền nút từ #F97316 sang #C05400. Bố cục, cỡ chữ và mọi thứ khác giữ nguyên.
Trước và sau khi thay hai màu theo gợi ý. Thẻ minh hoạ do ColorME tự dựng; các tỉ lệ ghi dưới thẻ là số đọc từ công cụ.
Ở kích thước nhỏ hoặc khi xem điện thoại ngoài nắng, dòng "Miễn phí tư vấn" và chữ gợi ý trong ô email ở thẻ bên trái là thứ biến mất trước tiên.
Bảng các cặp màu đã thử
Tất cả số dưới đây là kết quả công cụ trả về khi chúng tôi nhập từng cặp (ngày 13/10/2026). Các mã màu là những màu giao diện phổ biến, bạn có thể dùng làm mốc so sánh.
| Màu chữ | Màu nền | Tỉ lệ | Nhận xét | Gợi ý của công cụ |
|---|---|---|---|---|
| #667085 | #FFFFFF | 4.97 | Đạt chuẩn AA | AAA: #50596D |
| #98A2B3 | #FFFFFF | 2.57 | Không đạt, khó đọc | AA: #6B7585 · AAA: #4F5868 |
| #667085 | #F2F4F7 | 4.51 | Đạt chuẩn AA | AAA: #485165 |
| #2563EB | #FFFFFF | 5.16 | Đạt chuẩn AA | AAA: #0F4CD3 |
| #EC4899 | #FDF2F8 | 3.23 | Chỉ đạt cho chữ lớn | AA: #CC247E · AAA: #A30060 |
| #FFFFFF | #F97316 | 2.80 | Không đạt, khó đọc | AA: #333333 · AAA: #0B0B0B |
| #FFFFFF | #C2410C | 5.17 | Đạt chuẩn AA | không có |
| #FFFFFF | #0D9488 | 3.74 | Chỉ đạt cho chữ lớn | AA: #1D1D1D · AAA: đổi nền sang #00635B |
| #FFFFFF | #0F766E | 5.47 | Đạt chuẩn AA | không có |
| #1F2937 | #FACC15 | 9.58 | Rất tốt | không cần |
| #111827 | #F9FAFB | 16.97 | Rất tốt | không cần |
Vài điều đọc được từ bảng:
- Nền xám nhạt "ăn" mất tương phản. Cùng chữ
#667085, đặt trên trắng được 4.97 nhưng đặt trên nền xám#F2F4F7chỉ còn 4.51, sát ngưỡng AA. Kiểm tra chữ trên đúng màu nền thật của thẻ, không phải trên trắng. - Nút màu tươi với chữ trắng thường trượt. Cam
#F97316và xanh ngọc#0D9488đều chưa đạt AA cho chữ thường. Lùi một, hai bậc đậm hơn (#C2410C,#0F766E) là đạt. - Nền vàng đi với chữ tối. Chữ xám than
#1F2937trên vàng#FACC15đạt 9.58, mức "Rất tốt".
Chữ trắng trên #0D9488: chỉ đạt cho chữ lớn. Gợi ý AAA ở đây là đổi màu nền. Ảnh chụp màn hình: ColorME.
Chữ gần đen trên nền gần trắng: 16.97 : 1, năm mục đều đạt, không còn dòng gợi ý. Ảnh chụp màn hình: ColorME.
Những giới hạn nên biết trước khi tin vào con số
Khi không màu chữ nào đạt AAA, công cụ gợi ý đổi nền
Với chữ trắng trên #0D9488, công cụ đưa hai nút: "Đạt AA: #1D1D1D" và "Đổi nền để đạt AAA: #00635B". Lý do: gợi ý màu chữ chỉ đổi độ sáng của chữ, mà trên nền có độ sáng trung bình như vậy, đổi sáng hết cỡ về cả hai phía vẫn không tới 7 : 1. Khi đó công cụ chuyển sang gợi ý một màu nền đậm hơn cùng sắc độ. Trong lần thử của chúng tôi, bấm nút này đổi ô Màu nền thành #00635B và tỉ lệ lên 7.15 : 1, "Rất tốt", chữ vẫn trắng.
Màu trong suốt: công cụ bỏ qua và báo ngay dưới ô nhập
Chúng tôi gõ #2563EB80 (xanh dương 50% trong suốt) trên nền trắng và nhận 5.16 : 1, bằng đúng kết quả của #2563EB đặc. Khi rời khỏi ô, mã trong ô cũng tự đổi thành #2563EB và dưới hai ô màu hiện dòng "Độ trong suốt được bỏ qua: tương phản tính theo màu đặc." Nếu thiết kế của bạn dùng chữ có opacity, hãy lấy mã màu thực tế hiển thị (hút màu từ ảnh chụp màn hình) rồi mới kiểm tra.
Mã có độ trong suốt được tính như màu đặc, kèm dòng báo. Ảnh chụp màn hình: ColorME.
Gõ sai mã: có dòng báo, kết quả giữ theo màu trước đó
Khi chúng tôi gõ một chuỗi không phải mã màu ("xanh dương") vào ô Màu chữ, ô nhập có viền đậm và bên dưới hiện dòng chữ đỏ "Chưa nhận ra mã màu này, kết quả đang tính theo màu trước đó." Tỉ lệ trên màn hình vẫn là của màu hợp lệ nhập trước đó (trong ảnh dưới là #111827 trên nền #F9FAFB, 16.97 : 1), và khi rời khỏi ô, chuỗi sai tự được thay bằng mã HEX cũ.
Ô Màu chữ đang chứa "xanh dương": công cụ báo chưa nhận ra mã và giữ kết quả của màu nhập trước đó. Ảnh chụp màn hình: ColorME.
Cũng nhờ cơ chế này, mọi cách viết hợp lệ đều được đổi về HEX khi bạn rời ô: rgb(37, 99, 235) thành #2563EB, navy thành #000080.
Chỉ kiểm tra màu phẳng, một cặp mỗi lần
Công cụ so một màu chữ với một màu nền. Với chữ đặt trên ảnh hoặc gradient, trang công cụ hướng dẫn: "Hãy lấy màu ở vùng ảnh sát chữ nhất (dùng công cụ Chọn màu của ColorME) làm màu nền để kiểm tra. Nếu chưa đạt, thêm lớp phủ tối hoặc khung nền phía sau chữ." Nên thử cả vùng sáng nhất lẫn vùng tối nhất mà chữ đè lên.
Đạt tỉ lệ cũng chưa phải là xong phần dễ tiếp cận: WCAG còn yêu cầu không dùng màu làm tín hiệu duy nhất (ví dụ lỗi chỉ báo bằng chữ đỏ). Để xem thiết kế qua mắt người mù màu, dùng công cụ Mô phỏng mù màu theo bài hướng dẫn này.
Dùng trên điện thoại
Ở màn hình rộng 390px, các phần xếp thành một cột: hai ô màu và tỉ lệ ở trên, năm mục kiểm tra, màu gợi ý, rồi tới khung Xem thử. Trang không bị cuộn ngang trong lần thử của chúng tôi.
Giao diện ở chiều rộng 390px. Ảnh chụp màn hình: ColorME.
Kéo xuống dưới các mục kiểm tra và màu gợi ý là khung Xem thử. Ảnh chụp màn hình: ColorME.
Chúng tôi chưa thử những gì
- Bảng chọn màu của trình duyệt (bấm vào ô màu vuông): các lần thử đều nhập mã bằng bàn phím.
- Nút Lưu và Chia sẻ ở đầu trang.
- Trình duyệt khác ngoài Chrome trên máy tính; ảnh điện thoại là Chrome ở chiều rộng 390px, không phải máy thật.
- Kết quả in ấn. Trang công cụ ghi rõ dùng cho in chỉ "để tham khảo… màu in còn phụ thuộc giấy và mực, nên hãy in thử".
Mọi lần thử trong bài được làm khi chưa đăng nhập.
Câu hỏi thường gặp
Tỉ lệ tương phản bao nhiêu là đạt chuẩn?
Theo WCAG 2.1: chữ thường cần tối thiểu 4.5 : 1 để đạt AA và 7 : 1 để đạt AAA. Chữ lớn cần 3 : 1 (AA) hoặc 4.5 : 1 (AAA). Viền ô nhập và icon quan trọng cần 3 : 1 so với nền xung quanh.
Màu tôi kiểm tra có được ghi lại không?
Trang công cụ trả lời: "Việc tính toán chạy ngay trên trình duyệt của bạn. ColorME ghi nhận lượt dùng kèm hai mã màu, tỉ lệ tương phản và kết quả đạt hay chưa để thống kê, không cần tài khoản."
Nên nhắm AA hay AAA?
AA là mức tối thiểu nên đạt cho mọi website và ứng dụng. AAA khắt khe hơn, hợp với nội dung đọc nhiều hoặc sản phẩm dành cho người thị lực kém. Thực tế nhiều màu thương hiệu không thể đạt AAA với chữ trắng, nên cách làm phổ biến là: chữ nội dung nhắm AAA (chữ gần đen trên nền sáng rất dễ đạt), nút và nhãn màu nhắm AA.
Chữ trắng hay chữ đen trên nền màu thì dễ đọc hơn?
Nhập màu nền, thử lần lượt #FFFFFF và #000000 ở ô Màu chữ rồi so hai tỉ lệ. Trong các lần thử của chúng tôi, nền vàng #FACC15 hợp chữ tối (9.58 với #1F2937), còn nền cam đậm #C2410C và xanh ngọc đậm #0F766E đủ cho chữ trắng (5.17 và 5.47).
Kiểm tra tương phản có miễn phí không?
Trang công cụ trả lời: "Miễn phí, không cần đăng nhập và chạy ngay trên trình duyệt máy tính lẫn điện thoại."
