Glassmorphism (khung trong mờ như kính) và neumorphism (bề mặt mềm như được ép nổi lên từ nền) trông rất đẹp trong file thiết kế, nhưng thường làm khó chính người dùng giao diện. Vấn đề không nằm ở gu thẩm mỹ mà ở phép tính: cả hai phong cách đều làm giảm độ tương phản ngay từ cách dựng. Bài này cho thấy cách dựng từng kiểu bằng CSS, đo tương phản với màu thật, và đưa ra những thay đổi nhỏ nhất để đạt chuẩn. Mọi con số đều lấy từ công cụ tạo hiệu ứng CSS, công cụ báo chúng ngay khi bạn kéo thanh trượt.
Kính mờ được dựng thế nào
Một khung kính là nền bán trong suốt cộng với việc làm mờ thứ nằm phía sau:
.glass {
background: rgba(255, 255, 255, 0.2);
-webkit-backdrop-filter: blur(12px) saturate(180%);
backdrop-filter: blur(12px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;
}backdrop-filter chạy trên Chrome, Edge, Firefox và Safari hiện nay; Safari trước bản 18 cần dòng -webkit-. Thêm phương án dự phòng cho trình duyệt cũ để chữ không bao giờ nằm trên một khung trong suốt hoàn toàn:
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.glass { background: rgba(255, 255, 255, 0.85); }
}Đo chữ trên kính
Thứ người đọc thấy phía sau một chữ gần bằng màu kính phủ lên nền đã làm mờ. Với kính trắng 20%, đó là 0,2 × trắng + 0,8 × nền. Làm mờ lấy trung bình các điểm ảnh gần nhau, nên với ảnh chụp hãy dùng các màu trung bình của ảnh; với nền nhiều màu mẫu trong công cụ, đây là kết quả cho chữ trắng:
| Màu nền dưới chữ | Nền thực tế | Tương phản chữ trắng |
|---|---|---|
Xanh đậm #1e3a8a | trộn 20% trắng | 5,96:1 |
Tím #7c3aed | trộn 20% trắng | 3,98:1 |
Đỏ #f43f5e | trộn 20% trắng | 2,97:1 |
Xanh lá #22c55e | trộn 20% trắng | 1,95:1 |
Vàng #facc15 | trộn 20% trắng | 1,42:1 |
WCAG AA yêu cầu 4,5:1 cho chữ thường và 3:1 cho chữ lớn. Cùng một khung đạt chuẩn trên nền xanh và trượt nặng trên nền vàng, và người dùng cuộn qua một ảnh bìa nhiều màu sẽ gặp cả hai trong một giây. Màu kính trắng không bao giờ làm chữ trắng dễ đọc hơn: nó kéo mọi màu nền về phía trắng.
Sửa kính mờ
Đổi màu kính sang màu tối và tăng độ đậm. Với màu kính #0f172a (slate 900), trên năm màu nền như trên, tương phản tệ nhất của chữ trắng là:
| Độ đậm màu kính | Tương phản tệ nhất |
|---|---|
| 20% | 2,29:1 |
| 40% | 3,66:1 |
| 60% | 6,34:1 |
Ở 60%, khung đạt AA ở mọi nơi mà vẫn trông như kính, vì độ mờ vẫn giữ hình dáng của nền. Những cách khác cũng giúp ích:
- Làm mờ nhiều hơn. Độ mờ mạnh lấy trung bình nền, xóa các đốm sáng gắt phía sau từng chữ.
- Làm dịu nền. Kính trên ảnh rối mắt khó hơn kính trên một dải màu êm.
- Dùng chữ lớn, đậm hơn trên kính, vì chữ lớn chỉ cần 3:1.
- Tránh kính cho đoạn văn dài. Dùng cho tiêu đề hoặc thanh điều hướng, không dùng cho cả đoạn chữ.
Neumorphism được dựng thế nào
Soft UI dùng hai bóng lấy từ một màu nền, đặt trên nền cùng màu:
.soft {
border-radius: 20px;
background: #e0e5ec;
box-shadow: 8px 8px 16px #bec3c9,
-8px -8px 16px #e5e9ef;
}Bóng tối là màu nền trộn 15% đen, bóng sáng là màu nền trộn 15% trắng. Đảo chúng vào trong bằng inset để có trạng thái nhấn xuống.
Vì sao nút neumorphism khó nhìn
WCAG 1.4.11 (Tương phản phi văn bản) yêu cầu đường biên của một nút điều khiển đạt 3:1 so với thứ cạnh nó. Đường biên duy nhất của nút neumorphism là cái bóng:
| Độ đậm bóng | Mép tối so với nền |
|---|---|
| 10% | 1,25:1 |
| 15% | 1,40:1 |
| 20% | 1,59:1 |
Ngay cả bóng đậm 20% cũng chỉ đạt khoảng một nửa mức yêu cầu, còn khác biệt giữa nút nổi và nút đang nhấn thì mờ nhạt hơn nữa. Người thị lực kém, người dùng màn hình điện thoại tối dưới nắng hay màn hình rẻ tiền chỉ thấy một trang xám phẳng.
Sửa neumorphism
Giữ bóng mềm như phần trang trí, và cho mọi phần tử tương tác một thứ có tương phản thật:
- Viền hoặc đường bao đạt ít nhất 3:1 so với nền, ví dụ
1px solid #737d8ctrên#e0e5ec(3,29:1). - Biểu tượng và nhãn chữ màu tối, để nhận ra nút mà không cần nhìn hình dạng.
- Trạng thái nhấn hoặc được chọn rõ ràng bằng cách đổi màu, không chỉ đổi hướng bóng.
- Vòng tiêu điểm nhìn thấy được cho người dùng bàn phím; viền mặc định thường biến mất trên các nền này.
Hãy kiểm tra từng cặp màu bằng trình kiểm tra tương phản trong công cụ màu sắc trước khi chốt bảng màu.
Các lỗi thường gặp
- Chỉ thử trên một nền. Tương phản của kính phải được kiểm tra với phần sáng nhất và tối nhất của mọi thứ có thể cuộn phía sau.
- Chữ trắng trên kính trắng. Dùng màu kính tối cho chữ sáng, hoặc chữ tối trên kính sáng, đừng bao giờ sáng trên sáng.
- Quên phương án dự phòng. Thiếu
@supports, trình duyệt cũ hiện chữ trên một khung gần như trong suốt. - Trạng thái chỉ bằng bóng trong soft UI. Nếu "bật" và "tắt" chỉ khác hướng bóng, nhiều người không phân biệt được.
- Làm mờ vùng quá lớn.
backdrop-filterđược tính lại mỗi khi thứ phía sau thay đổi; một lớp mờ toàn màn hình trên video làm hao pin và giật hình trên điện thoại yếu.
Thử ngay
Mở công cụ tạo hiệu ứng CSS, chọn thẻ Kính mờ với nền nhiều màu, kéo độ đậm màu kính và theo dõi dòng tương phản. Sau đó mở thẻ Neumorphism và xem thanh độ đậm phải kéo tới đâu thì mép mới đạt 3:1 (với giá trị hợp lý thì không bao giờ đạt), đó là lý lẽ rõ nhất để thêm viền và nhãn.