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

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

Chọn màu tiêu chuẩn trong thiết kế trang web để cải thiện trải nghiệm người dùng.

Từ trước đến nay, bạn luôn cho rằng màu sắc của website là yếu tố không quan trọng và bạn thích màu gì thì mình sử dụng màu đó? Thực tế thì không phải như vậy, hoặc ít nhất thì Google không nghĩ vậy. Khi kiểm tra hiệu suất trang web bằng Google Lighthouse, nếu độ tương phản giữa màu nền và màu chữ không đạt yêu cầu, bạn sẽ ngay lập tức nhận được cảnh báo trong danh mục “Trợ năng”. Nội dung chi tiết của cảnh báo là “Màu nền và màu nền trước không có đủ tỷ lệ tương phản”.

Tìm hiểu thêm:

Google Lighthouse báo cáo lỗi tương phản màu

Nếu kết quả kiểm tra Google Lighthouse cho trang web của bạn có dòng cảnh báo này, điều đó có nghĩa là độ tương phản màu không đạt. Điều này sẽ khiến một số người khó đọc nội dung hiển thị trên trang web.

Ngay bên dưới, Google đã trình bày chi tiết các thành phần gặp phải 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.

Chọn màu “tiêu chuẩn của Google” cho trang web của bạn

Để chọn màu chữ và màu nền có độ tương phản theo đúng 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 văn bản của bạn vào Màu nền, nhập màu nền vào Màu nền. Bạn có thể nhập theo mã màu hexa, mã màu RGB hoặc chọn từ bảng màu có sẵn. Xem kết quả trong danh mục Kết quả.

• Nếu cả 4 hộp kết quả đều hiển thị văn bản Vượt qua thì có nghĩa là độ tương phản màu của bạn đã đạt chuẩn 100%.
• Nếu bạn thấy từ THẤT ​​BẠI trong hộp kết quả, hãy kéo thanh Điều chỉnh độ sáng để điều chỉnh cường độ của màu cho đến khi tất cả các ô Vượt qua hoặc chọn màu khác có độ tương phản tốt hơn.

Sau khi chọn đúng màu, hãy tìm và thay đổi màu của các phần tử trên trang web của bạn và kiểm tra lại với Google Lighthouse. Nếu bạn nhận được kết quả giống như thế này, bạn đã xử lý thành công vấn đề:

Thật đơn giản đúng không? 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 ý 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 đăng ký blog của tôi để thường xuyên cập nhật những bài viết hay nhất và mới nhất qua email. Cảm ơn rất nhiều.

Via: sieucoder.com

from sieucoder.com https://ift.tt/3mu969u
via Sieucoder.com