Lựa chọn màu sắc chuẩn trong thiết kế website

 

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”.

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.