Công cụ này làm gì
Sáu hiệu ứng CSS, mỗi cái có bản xem trước do trình duyệt vẽ và CSS để sao chép:
- Bo góc: đủ tám giá trị (bán kính ngang và dọc cho mỗi góc) để làm hình giọt nước, chiếc lá, quả trứng, viết ở dạng ngắn nhất CSS chấp nhận.
- Kính mờ: màu trong suốt,
backdrop-filter làm mờ và tăng bão hòa, viền sáng, có tiền tố -webkit- và phương án dự phòng, kèm ước tính tương phản chữ. - Neumorphism: bề mặt nổi hoặc lõm mềm từ một màu nền, có đo tương phản mép.
- Bóng chữ nhiều lớp, bộ lọc (blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia) trên ảnh mẫu hoặc ảnh của bạn, và clip-path với đa giác, ngôi sao, mũi tên, bong bóng thoại.
Kính mờ mà vẫn đọc được
Chữ trên kính được đọc trên nền phía sau đã làm mờ trộn với màu kính. Công cụ ước tính màu đó cho từng màu của nền đã chọn và báo trường hợp tương phản kém nhất: chữ trắng trên kính trắng 20% đạt khoảng 12,6:1 trên nền đen nhưng gần 1:1 trên vùng trắng. WCAG AA yêu cầu 4,5:1 cho chữ thường. backdrop-filter chạy trên Chrome, Edge, Firefox và Safari hiện nay; Safari trước bản 18 cần -webkit-backdrop-filter.
Neumorphism và độ tương phản
Với nền #e0e5ec và độ đậm 15%, hai bóng là #bec3c9 và #e5e9ef, mép tối chỉ đạt khoảng 1,4:1 so với nền, dưới mức 3:1 mà WCAG 1.4.11 yêu cầu cho viền nút. Hãy thêm viền, biểu tượng hoặc nhãn chữ. Đọc thêm kính mờ và neumorphism dễ đọc, và kiểm tra cặp màu bằng công cụ màu sắc.
