Kiểm tra độ tương phản WCAG
Kiểm tra tỷ lệ tương phản màu văn bản và nền theo tiêu chuẩn tiếp cận WCAG 2.1. Đảm bảo typography của bạn có thể đọc được cho tất cả người dùng.
Tỷ lệ tương phản
:1
AA Văn bản thường
(4.5:1)
Đạt
Không đạt
AA Văn bản lớn
(3:1)
Đạt
Không đạt
AAA Văn bản thường
(7:1)
Đạt
Không đạt
AAA Văn bản lớn
(4.5:1)
Đạt
Không đạt
Xem trước trực tiếp
Xem trước văn bản lớn (24px+ đậm)
Xem trước văn bản lớn (18.66px+ đậm)
Văn bản thân bình thường ở 16px. Con cáo nâu nhanh nhẹn nhảy qua con chó lười biếng. Tôi yêu tiếng Việt và thiết kế đẹp.
Văn bản nhỏ ở 14px. Kích thước này thường được dùng cho nội dung phụ, chú thích và siêu dữ liệu.
Chữ nhỏ ở 12px. Văn bản pháp lý, chú thích và tuyên bố từ chối thường dùng kích thước này.
Cách hoạt động
Tỷ lệ tương phản được tính bằng công thức độ sáng tương đối WCAG 2.1:
L = 0.2126 * R + 0.7152 * G + 0.0722 * B trong đó R, G, B là các giá trị sRGB tuyến tính hóa: nếu sRGB <= 0.04045: linear = sRGB / 12.92 nếu không: linear = ((sRGB + 0.055) / 1.055) ^ 2.4 Tỷ lệ tương phản = (L1 + 0.05) / (L2 + 0.05) trong đó L1 = sáng hơn, L2 = tối hơn
Frequently Asked Questions
The WCAG contrast ratio is defined in the Web Content Accessibility Guidelines 2.1, Success Criterion 1.4.3. It is calculated as (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter colour and L2 is the relative luminance of the darker colour. Relative luminance is a linearised measure of perceived brightness, calculated from the sRGB values of a colour using gamma correction. The ratio ranges from 1:1 (no contrast, same colour) to 21:1 (black on white, maximum contrast).
WCAG 2.1 Level AA—the standard required by most accessibility laws including the EU Web Accessibility Directive and the US Section 508—requires a contrast ratio of at least 4.5:1 for normal text (below 18 pt or 14 pt bold) and 3:1 for large text (18 pt or larger, or 14 pt bold). Level AAA, a higher voluntary standard, requires 7:1 for normal text and 4.5:1 for large text. The upcoming WCAG 3.0 introduces a new metric called APCA (Advanced Perceptual Contrast Algorithm) that accounts for font weight and size more precisely, though it has not yet been adopted in law.
Yes. Placeholder text in HTML <input> elements must meet the same contrast requirement as regular text under WCAG 2.1 SC 1.4.3. Browsers typically render placeholder text at a reduced opacity (around 40–50 % of the normal colour), which commonly causes placeholder text to fail the 4.5:1 threshold. The correct fix is to set an explicit colour on the ::placeholder pseudo-element—never relying on the browser default—with sufficient contrast against the input's background.
WCAG 2.1 SC 1.4.11 (Non-text Contrast) requires that UI components—including form borders, focus indicators, and icons—meet a 3:1 contrast ratio against adjacent colours. This is a separate criterion from text contrast. An icon button with no text label must have sufficient contrast between the icon itself and its background. Focus indicators introduced in WCAG 2.1 SC 1.4.11 and strengthened in WCAG 2.2 SC 2.4.11 (Focus Appearance) must now have a contrast ratio of at least 3:1 against the unfocused state.
Yes, and both colour schemes must be independently validated. A combination that passes in light mode may fail in dark mode if the dark background changes the contrast ratio. Designers using the CSS prefers-color-scheme media query should test every colour token pair in both schemes. Brand colours with low saturation (near-neutral greys and pastels) are particularly prone to failing in one mode even when they pass in the other, because the luminance of the background shifts significantly between modes.