Kiểm Tra Độ Tương Phản

Kiểm Tra Độ Tương Phản Màu - Công Cụ WCAG Accessibility

Công cụ kiểm tra độ tương phản màu toàn diện đánh giá sự kết hợp màu chữ và nền theo hướng dẫn WCAG 2.1. Kiểm tra cả hai chuẩn AA và AAA cho chữ thường (dưới 18pt hoặc 14pt đậm) và chữ lớn (18pt trở lên, hoặc 14pt đậm trở lên). Tính năng bao gồm tính toán tỷ lệ tương phản theo thời gian thực, công cụ điều chỉnh màu, kết hợp có sẵn, và đề xuất cải thiện khả năng tiếp cận. Thiết yếu cho designers, developers, và bất kỳ ai tạo nội dung web có khả năng tiếp cận. Xem thêm Tạo Bảng Màu và Bảng Màu Pro.

Tại sao tỷ lệ tương phản WCAG AA quan trọng với website của tôi?

WCAG 2.1 AA là chuẩn khả năng tiếp cận được tham chiếu bởi hầu hết luật khả năng tiếp cận trên thế giới — ADA ở Mỹ, European Accessibility Act, Equality Act của Anh, và Section 508 cho mua sắm liên bang. Không đạt tương phản AA (4.5:1 cho chữ thân, 3:1 cho chữ lớn) có nghĩa là độc giả thị lực yếu, thay đổi điểm vàng do tuổi, mù màu, hay đơn giản là ánh chói trên màn hình điện thoại không thể đọc nội dung của bạn một cách đáng tin cậy. Nó cũng tốn tiền: khoảng 1 trong 4 người trưởng thành có giới hạn thị lực chức năng nào đó, công cụ tìm kiếm hạ xếp hạng trang ít khả năng tiếp cận dưới tín hiệu nội dung hữu ích, và các vụ kiện về trang thương mại không tiếp cận được đã tăng theo từng năm. Coi AA như sàn (không phải trần) cho bạn an toàn pháp lý, tầm với rộng hơn và SEO tốt hơn cùng một lúc.

Khác biệt giữa cấp độ WCAG AA và AAA là gì?

AA là cấp tối thiểu được tham chiếu pháp lý: tương phản 4.5:1 cho chữ thân thường (dưới 18pt thường hoặc 14pt đậm) và 3:1 cho chữ lớn (18pt thường trở lên, hoặc 14pt đậm trở lên). AAA là cấp nâng cao: 7:1 cho chữ thân và 4.5:1 cho chữ lớn. AA được thiết kế để đạt được trong khi giữ phần lớn lựa chọn thiết kế thương hiệu; AAA dành cho nội dung mà khả năng tiếp cận là sống còn — dịch vụ chính phủ, y tế, tài chính, giáo dục cho người cao tuổi. AAA khó đạt hơn vì màu thương hiệu sống động hay pastel hiếm khi vượt 7:1 trên trắng. Công thức thực dụng hầu hết đội ngũ theo: nhắm AA toàn UI, đẩy chữ thân lên AAA khi có thể bằng chữ đen tinh hoặc gần đen trên bề mặt trắng tinh, và không bao giờ để bất kỳ điều khiển hoạt động nào rớt xuống dưới AA.

Tỷ lệ tương phản được tính chính xác thế nào?

WCAG dùng công thức (L1 + 0.05) / (L2 + 0.05), trong đó L1 là luminance tương đối của màu sáng hơn và L2 của màu tối hơn. Luminance tương đối được tính trên mỗi pixel: chuyển mỗi kênh RGB từ 0-255 sang phân số 0-1, áp dụng hiệu chỉnh gamma sRGB (kênh / 12.92 nếu kênh ≤ 0.03928, ngược lại ((kênh + 0.055) / 1.055)^2.4), rồi cộng L = 0.2126 R + 0.7152 G + 0.0722 B. Trọng số khớp với cách tế bào hình nón trong mắt phản ứng — xanh lá chiếm ưu thế vì rơi vào dải nhạy nhất. Hằng số 0.05 ngăn chia cho không với đen tinh. Đen tinh trên trắng tinh cho tỷ lệ tối đa 21:1; trắng tinh trên trắng cho 1:1. Bất kỳ giá trị nào dưới 3:1 đều không đạt cho mọi kích thước chữ.

Nếu màu thương hiệu của tôi không đạt — tôi phải đổi thương hiệu sao?

Không — bạn đổi nơi dùng màu thương hiệu, không phải bản thân thương hiệu. Mô hình mà hầu hết hệ thống thiết kế theo: khóa HEX thương hiệu gốc làm token "marketing" hoặc "trang trí", dùng cho logo, nền hero có chữ phủ và chữ display lớn nơi 3:1 đủ. Sau đó sinh các dẫn xuất tiếp cận được bằng cách làm tối màu thương hiệu cho đến khi vượt 4.5:1 trên trắng (hoặc làm sáng cho theme tối), và dùng các dẫn xuất đó cho nút, link và chữ thân. Tailwind, Material và IBM Carbon đều xuất xưởng cặp dải đúng vì lý do này. Nút Làm Sáng và Làm Tối trong công cụ này tìm giá trị đạt gần nhất trong khi giữ cùng tông, nên dẫn xuất vẫn cảm thấy hợp thương hiệu.

Khi nào ngưỡng tương phản 3:1 áp dụng thay vì 4.5:1?

Ba tình huống đủ điều kiện cho ngưỡng thấp hơn 3:1 theo WCAG 2.1. Thứ nhất, chữ lớn — định nghĩa là ít nhất 18pt thường (khoảng 24px) hoặc 14pt đậm (khoảng 18.5px) — vì hình chữ lớn hơn dễ phân biệt. Thứ hai, thành phần UI không phải chữ như viền ô nhập, viền focus, biểu tượng và đối tượng đồ họa (theo SC 1.4.11): chúng phải đạt 3:1 so với màu kề bên, không phải 4.5:1. Thứ ba, chữ phụ trong logo hoặc trang trí thuần túy. Bẫy quan trọng: nhãn nút là chữ thường và cần 4.5:1 dù bản thân nút có lớn; chữ placeholder cần 4.5:1 vì nó truyền chỉ dẫn; UI tắt chỉ được miễn nếu không thể tương tác. Khi nghi ngờ, nhắm 4.5:1 — bao phủ hầu hết trường hợp mà không cần kiểm toán riêng.

Làm sao cải thiện tương phản mà không phá vỡ bố cục thiết kế?

Năm đòn bẩy ít rủi ro. (1) Làm tối tiền cảnh trong HSL 10-20% độ sáng — tông giữ nguyên, thương hiệu cảm thấy không đổi. (2) In đậm chữ: 14pt đậm đạt với 3:1 thay vì 4.5:1, nên độ đậm gánh một phần công việc. (3) Tăng cỡ chữ để vượt ngưỡng chữ lớn (18pt thường hoặc 14pt đậm) và yêu cầu tỷ lệ giảm. (4) Thêm nền đặc tinh tế dưới chữ thay vì đặt trên gradient hay ảnh bận — lớp phủ (lớp rgba(0,0,0,0.55)) khôi phục tương phản nhất quán trên toàn phần. (5) Dùng cặp màu hoàn toàn khác cho cặp không đạt, dù phần còn lại của bảng màu vẫn giữ màu thương hiệu — ví dụ, dùng teal thương hiệu cho nền nhưng slate gần đen cho bất kỳ chữ nào trên thẻ trắng.

Làm sao xử lý tương phản trên gradient, ảnh hoặc nền video?

Nền ảnh và gradient thay đổi tương phản từng pixel, nên công cụ kiểm tra không thể đánh giá tự động mọi vị trí — bạn cần xác định điểm xấu nhất. Ba cách sửa chuẩn: (1) Phủ một màu phẳng bán trong suốt giữa nền và chữ (background-image: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)), url("hero.jpg");) để tiền cảnh thấy nền đồng nhất; lấy mẫu màu nền tổ hợp đó trong công cụ kiểm tra. (2) Bọc chữ trong thẻ đặc có màu nền đặc riêng để nó không bao giờ chạm media bên dưới. (3) Thêm bóng chữ mềm (text-shadow: 0 1px 4px rgba(0,0,0,0.65)) để nâng hình chữ khỏi vùng bận; bóng không thay thế tương phản nhưng nâng tỷ lệ hiệu dụng trên hầu hết màn hình. WCAG 2.1 SC 1.4.3 vẫn áp dụng cho tổ hợp chữ-trên-nền đã render, nên hãy kiểm tra trong trình duyệt thật, không chỉ file thiết kế.

APCA (thuật toán tương phản đề xuất cho WCAG 3) có làm các kết quả này lỗi thời không?

Không cho tuân thủ hiện tại. APCA (Accessible Perceptual Contrast Algorithm) là mô hình cảm nhận có lưu ý cực tính đang được khám phá cho WCAG 3, vẫn còn dự thảo và chưa được tham chiếu pháp lý ở đâu. WCAG 2.1 và 2.2 — đều dùng công thức tỷ lệ luminance đơn giản mà công cụ này triển khai — vẫn là chuẩn được trích dẫn tích cực trong luật, vụ kiện và hướng dẫn mua sắm tới năm 2026 và gần như chắc chắn xa hơn. APCA có sửa các hạn chế thật: công thức 2.x đánh giá thấp tương phản tông giữa xám và xử lý sáng-trên-tối giống hệt tối-trên-sáng dù mắt cảm nhận khác. Công thức thực dụng hôm nay: dùng tỷ lệ WCAG 2.1 cho tuân thủ (công cụ này), xem trước chữ thân cũng bằng giá trị APCA nếu hệ thống thiết kế của bạn hỗ trợ (Sass-WCAG hoặc APCA online), và kiểm tra lại khi WCAG 3 đạt trạng thái Candidate Recommendation.

Vì sao công cụ này hỏi cỡ chữ và độ đậm, và kết luận duy nhất hoạt động thế nào?

Vì ngưỡng pháp lý thay đổi theo cỡ chữ, và đó chính là nơi các đội hay phân loại sai văn bản. Nhập cỡ chữ thực tế theo pixel và tích chọn In Đậm nếu chữ là đậm, công cụ sẽ đưa ra một kết luận dứt khoát — Đạt AAA, Đạt AA hoặc Không Đạt AA — cho đúng phần tử đó, thay vì để bạn tự đọc bốn ô trong lưới. Theo WCAG 2.1 SC 1.4.3, chữ chỉ được tính là Chữ Lớn khi đạt 18pt thường (khoảng 24px) hoặc 14pt đậm (khoảng 18,66px) trở lên; Chữ Lớn chỉ cần 3:1 cho AA và 4,5:1 cho AAA, trong khi Chữ Thường cần 4,5:1 cho AA và 7:1 cho AAA. Bẫy kinh điển: một nút lớn trông có vẻ 'lớn', nhưng nhãn của nó thường là chữ thân độ đậm thường dưới 24px, nên vẫn cần 4,5:1 — kết luận theo cỡ chữ tự động phát hiện điều đó. Hai lưu ý ngoài chữ thân: theo SC 1.4.11, các thành phần UI phi văn bản — viền focus, viền ô nhập, biểu tượng và đối tượng đồ họa khác — chỉ cần 3:1 so với màu kề bên bất kể cỡ chữ, nên kiểm tra tương phản viền focus hay biểu tượng dùng ngưỡng 3:1, không phải 4,5:1. Chuyển sang chế độ APCA thì cùng giá trị cỡ chữ sẽ ánh xạ tới mục tiêu Lc tương ứng (75 cho chữ thân nhỏ, 60 cho nội dung, 45 cho chữ lớn) và kết luận được tính lại theo giá trị Lc trực tiếp.

Tính Năng Chính

• Tính toán tỷ lệ tương phản theo thời gian thực
• Kiểm tra tuân thủ WCAG 2.1 AA
• Kiểm tra tuân thủ WCAG 2.1 AAA
• Tương phản chữ thường (4.5:1, 7:1)
• Tương phản chữ lớn (3:1, 4.5:1)
• Xem trước trực tiếp kết hợp màu
• Mẫu chữ kích thước thường
• Mẫu chữ kích thước lớn
• Chỉ báo Đạt/Không Đạt cho từng cấp
• Bộ chọn màu cho màu chữ
• Bộ chọn màu cho màu nền
• Nhập mã hex thủ công
• Đổi màu chữ/nền
• Điều chỉnh màu Sáng/Tối
• Gợi ý màu tương tự đạt chuẩn
• Kết hợp tương phản cao có sẵn
• Hiển thị thông tin màu (HEX, RGB, HSL)
• Tính toán độ sáng tương đối
• Giải thích chi tiết WCAG
• Thiết kế responsive cho mobile
• Hỗ trợ chế độ tối
• Xử lý 100% phía client
• Không gửi dữ liệu lên server
• Sao chép mã màu vào clipboard
• Thiết kế tập trung vào accessibility