HTMLNgưỡng contrast (WCAG mức AA):
- Chữ thường: 4.5:1.
- Chữ lớn (từ 18pt / 24px, hoặc 14pt / 18.66px in đậm): 3:1.
- Non-text 3:1 cho viền input, icon mang thông tin, ranh giới của component (1.4.11) — phần này rất hay bị bỏ sót: input viền #e5e7eb trên nền trắng chỉ khoảng 1.2:1.
Tỷ lệ tính theo luminance tương đối, không phải cảm nhận mắt — nên hai màu "trông đủ đậm" vẫn có thể fail. Đo bằng DevTools (color picker hiện luôn tỷ lệ) hoặc plugin contrast trong Figma.
Cách xử lý với designer: đưa số đo cụ thể và đề xuất màu thay thế cùng tông (giữ hue, tăng độ đậm) thay vì nói chung chung. Trường hợp hợp lệ để giữ nguyên rất hẹp: chữ trong logo và thành phần bị vô hiệu hoá được miễn trừ — chữ placeholder thì không được miễn.
Tiêu chí WCAG 2.2 mới, hay bị bỏ sót:
- 2.4.11 Focus Not Obscured: phần tử đang focus không được bị header sticky hay banner cookie che khuất hoàn toàn — lỗi rất phổ biến với thanh nav dính đỉnh.
- 2.5.8 Target Size (Minimum): vùng bấm tối thiểu 24x24 CSS px (có ngoại lệ khi đủ khoảng cách).
- 2.5.7 Dragging Movements: thao tác kéo thả phải có cách thay thế bằng một cú bấm (vd nút "lên/xuống" cho danh sách sắp xếp).
- 3.3.8 Accessible Authentication: không bắt người dùng nhớ hay giải câu đố nhận thức để đăng nhập; phải cho dán mật khẩu và dùng password manager.
Cũng đừng bỏ outline mặc định để "cho sạch" — nếu bỏ thì phải thay bằng focus indicator rõ và đủ contrast.