Kiểm tra độ tương phản màu theo WCAG
Công cụ kiểm tra độ tương phản màu theo tiêu chuẩn WCAG 2.1 của Tấn Phát Digital. Tính tỷ lệ contrast ratio chính xác từ 1:1 đến 21:1 sử dụng công thức luminance chuẩn W3C. Kiểm tra pass/fail cho 4 tiêu chuẩn: WCAG AA Normal (≥4.5:1), WCAG AA Large (≥3:1), WCAG AAA Normal (≥7:1), WCAG AAA Large (≥4.5:1). Preview realtime với text mẫu tiếng Việt và tiếng Anh. Color picker trực quan cho foreground và background, nhập hex code trực tiếp. Nút đổi màu foreground ↔ background nhanh chóng. Hiển thị pass/fail rõ ràng với icons ✓ và ✗. Đảm bảo accessibility cho website và app, tuân thủ WCAG 2.1 guidelines.
Độ tương phản màu (color contrast) là yếu tố quan trọng nhất trong web accessibility liên quan đến màu sắc. Nếu màu chữ và màu nền quá gần nhau, nhiều nhóm người dùng sẽ gặp khó khăn khi đọc: Người khiếm thị (low vision) - khoảng 2.2 tỷ người trên thế giới. Người già - thị lực giảm theo tuổi tác. Người mù màu - 8% nam giới, 0.5% nữ giới. Người xem trong điều kiện ánh sáng kém hoặc màn hình chất lượng thấp. WCAG (Web Content Accessibility Guidelines) do W3C phát triển quy định tỷ lệ tương phản tối thiểu để đảm bảo mọi người đều có thể đọc được nội dung. Tuân thủ WCAG không chỉ là đạo đức và inclusive design, mà còn là yêu cầu pháp lý ở nhiều quốc gia (ADA ở Mỹ, EAA ở EU). Websites không accessible có thể bị kiện và phạt.
WCAG (Web Content Accessibility Guidelines) là tiêu chuẩn quốc tế về web accessibility do W3C phát triển. Có 3 mức độ tuân thủ: Level A - mức tối thiểu, bắt buộc. Level AA - mức khuyến nghị, hầu hết websites nên đạt. Level AAA - mức cao nhất, không phải lúc nào cũng khả thi. Về color contrast: AA Normal (4.5:1) - text thường (<18pt hoặc <14pt bold). AA Large (3:1) - text lớn (≥18pt hoặc ≥14pt bold). AAA Normal (7:1) - enhanced contrast cho text thường. AAA Large (4.5:1) - enhanced contrast cho text lớn. Recommendation: Đạt AA cho toàn bộ website, AAA cho content quan trọng.
Contrast ratio được tính theo công thức W3C: (L1 + 0.05) / (L2 + 0.05), trong đó L1 là relative luminance của màu sáng hơn, L2 là relative luminance của màu tối hơn. Relative luminance được tính từ RGB values qua công thức phức tạp có tính đến gamma correction. Kết quả từ 1:1 (không có contrast - cùng màu) đến 21:1 (contrast tối đa - đen trên trắng). Tool này implement đúng công thức W3C để đảm bảo kết quả chính xác.
Tránh light gray text: #999 trên #fff chỉ có 2.85:1, fail AA. Dùng #595959 hoặc đậm hơn. Cẩn thận với brand colors: Nhiều brand colors (đặc biệt màu sáng như vàng, xanh lá nhạt) không đủ contrast trên nền trắng. Cần điều chỉnh hoặc dùng trên nền tối. Placeholder text: Thường bị bỏ qua, nhưng cũng cần đủ contrast. #767676 là minimum cho placeholder trên #fff. Buttons và links: Không chỉ text, mà cả border/background của buttons cũng cần đủ contrast với surrounding content. Focus states: Outline khi focus cũng cần đủ contrast. Disabled states: Có thể exempt khỏi contrast requirements, nhưng vẫn nên readable.
AA là mức tối thiểu nên đạt cho hầu hết websites: 4.5:1 cho text thường, 3:1 cho text lớn. AAA là mức cao nhất với yêu cầu strict hơn: 7:1 và 4.5:1. Hầu hết websites nên đạt AA toàn bộ, AAA cho content quan trọng như body text. AAA không phải lúc nào cũng khả thi (ví dụ: brand colors cố định).
Theo WCAG, large text là text ≥18pt (24px) hoặc ≥14pt (18.5px) bold. Text lớn dễ đọc hơn nên yêu cầu contrast thấp hơn: 3:1 cho AA thay vì 4.5:1. Lưu ý: pt và px không hoàn toàn tương đương, phụ thuộc vào DPI. 18pt ≈ 24px ở 96 DPI.
21:1 là tỷ lệ tương phản cao nhất có thể, đạt được với đen (#000000) trên trắng (#FFFFFF) hoặc ngược lại. 1:1 là không có tương phản (cùng màu). Số càng cao càng dễ đọc. 4.5:1 là minimum cho text thường, 7:1 là excellent.
Tăng độ tương phản bằng cách: 1) Làm màu chữ đậm hơn (darker) - giảm Lightness trong HSL. 2) Làm màu nền sáng hơn (lighter) - tăng Lightness. 3) Hoặc ngược lại nếu dùng light text on dark background. 4) Thay đổi hue nếu cần - một số hues inherently có luminance cao hơn (vàng) hoặc thấp hơn (xanh dương).
Nên kiểm tra tất cả text colors: Body text, headings, links (cả normal, hover, visited, active states), buttons, form labels, error messages, success messages, placeholders, captions, footnotes. Đặc biệt chú ý brand colors vì thường được chọn vì thẩm mỹ hơn là accessibility. Non-text elements (icons, borders) cũng cần 3:1 contrast với adjacent colors.
CÓ, theo WCAG 2.1 (1.4.11 Non-text Contrast). Icons, buttons, form controls, focus indicators cần ít nhất 3:1 contrast với adjacent colors. Ví dụ: icon trên button cần contrast với button background, button border cần contrast với page background.
CÓ, disabled/inactive UI components được exempt khỏi contrast requirements theo WCAG. Tuy nhiên, best practice là vẫn giữ chúng readable (dù mờ hơn) để users biết element đó tồn tại. Dùng opacity hoặc giảm saturation thay vì giảm contrast quá nhiều.
CÓ. Tool implement đúng công thức relative luminance và contrast ratio theo W3C specification. Kết quả giống với các tools chính thức như WebAIM Contrast Checker, Colour Contrast Analyser. Bạn có thể cross-check nếu cần.
Chúng tôi không chỉ thiết kế website, mà còn giúp doanh nghiệp xây dựng thương hiệu số mạnh mẽ. Cung cấp dịch vụ thiết kế website trọn gói từ thiết kế đến tối ưu SEO. Hãy liên hệ ngay với Tấn Phát Digital để cùng tạo nên những giải pháp công nghệ đột phá, hiệu quả và bền vững cho doanh nghiệp của bạn tại Hồ Chí Minh.
