Lựa chọn màu sắc chuẩn trong thiết kế website để cải thiện trải nghiệm người dùng.
Từ trước đến giờ bạn vẫn luôn nghĩ màu sắc của website là một yếu tố không quan trọng và thích màu gì thì mình dùng màu đấy? Trên thực tế không phải vậy, hay ít nhất là Google không nghĩ vậy. Khi kiểm tra hiệu suất website với Google Lighthouse, nếu mức độ tương phản giữa màu nền và màu chữ không đạt, ngay lập tức bạn sẽ nhận được cảnh báo ở hạng mục “Accessibility”. Nội dung chi tiết của cảnh báo là “Background and foreground colors do not have a sufficient contrast ratio”.
Tham khảo thêm:
Google Lighthouse báo lỗi tương phản màu sắc không đạt
Nếu kết quả kiểm tra Google Lighthouse cho website của bạn có dòng cảnh báo này thì có nghĩa là độ tương phản màu sắc không đạt. Điều này sẽ gây khó khăn cho một số người khi đọc nội dung hiển thị trên website.
Ngay bên dưới, Google đã liệt kê chi tiết các thành phần gặp lỗi tương phản màu sắc. Bạn có thể dựa vào đó để xác định vị trí và thay đổi màu sắc cho phù hợp.
Lựa chọn màu sắc “đạt chuẩn Google” cho website
Để lựa chọn được màu chữ và màu nền có độ tương phản phù hợp với các tiêu chuẩn của Google, chúng ta sẽ cần đến sự trợ giúp của một công cụ có tên là Color Contrast Analyzer.
Nhập màu chữ của bạn vào mục Foreground Color, nhập màu nền vào mục Background Color. Các bạn có thể nhập bằng mã màu hexa, mã màu RGB hoặc lựa chọn trong bảng màu có sẵn. Xem kết quả trong mục Result.
- Nếu tất cả 4 ô kết quả đều hiện chữ Pass thì có nghĩa là độ tương phản màu sắc của bạn đã đạt chuẩn 100%.
- Nếu bạn nhìn thấy chữ FAIL trong ô kết quả, hãy kéo thanh Adjust Lightness để điều chỉnh độ đậm nhạt của màu sắc cho đến khi tất cả các ô đều là Pass hoặc lựa chọn màu sắc khác có độ tương phản tốt hơn.
Sau khi chọn được màu đạt chuẩn, hãy tìm và thay đổi màu sắc của các thành phần trên website của bạn rồi kiểm tra lại với Google Lighthouse. Nếu nhận được kết quả trông như thế này thì có nghĩa là bạn đã xử lý vấn đề thành công:
Thật đơn giản phải không nào? Bạn còn chần chừ gì nữa mà không kiểm tra và khắc phục ngay?
Mọi thắc mắc và góp ý xin vui lòng gửi vào khung bình luận bên dưới để được giải đáp.
Nếu bạn thích bài viết này, hãy subscribe blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất qua email nhé. Cảm ơn rất nhiều. :)
Anh Hiếu cho e hỏi xíu, em mới lập website nên không biết điều này, đó là một số bài viết em chia sẻ thường có chứa một số đoạn mã HTML, nhưng không hiểu sao khi e xuất bản bài viết thì các đoạn mã đó có một số ký tự nó bị mã hóa, làm cho đoạn mã code đó bị lỗi, ko biết anh có cách nào giải quyết vấn đề này ko, website e mới lập thôi, web em đang dùng wordpress ạ, cam ơn a//
Bạn có thể tham khảo bài viết “5 WordPress plugin giúp làm nổi bật code và syntax” nhé.
hay quá chỉ những cái nhỏ nhỏ thôi là cả một vấn đề lớn
Mình thấy màu xanh da trời là gam màu chủ đạo mà website hay ứng dụng hay sử dụng.
Dùng nhiều không có nghĩa là tốt mà. Ví dụ như site của bạn test Google Lighthouse sẽ thấy độ tương phản màu sắc giữa nền và chữ chưa đạt. :)
Đây là một bài viết hay về thiết kế