• Trang chủ
  • WordPress
    • Thủ thuật WordPress
    • WordPress Plugins
    • WordPress Themes
  • Hosting và Domain
  • Kiếm tiền
  • Đánh giá
  • Khuyến mãi
  • Thông báo
  • Giới thiệu
  • Liên hệ

WP Căn bản

Kiến thức căn bản cho người dùng WordPress

paradise-child-theme-wordpress-theme-tot-nhat
  • Dịch vụ WordPress Hosting
  • Dịch vụ tối ưu WordPress
  • Dịch vụ quét mã độc WordPress
  • Mua Paradise child theme
Trang chủ » WordPress » Thủ thuật WordPress » Lựa chọn màu sắc chuẩn trong thiết kế website
hosting-tot-nhat-danh-cho-wordpress

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

Cập nhật: 23/07/2018 Trung Hiếu 6 Bình luận

Mục lục Hiện
  • 1. Google Lighthouse báo lỗi tương phản màu sắc không đạt
  • 2. Lựa chọn màu sắc “đạt chuẩn Google” cho website

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.

lua-chon-mau-sac-chuan-trong-thiet-ke-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”.

Tham khảo thêm:

  • Đánh giá hiệu suất website với Google Lighthouse
  • Nâng cấp jQuery và jQuery Migrate cho WordPress

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.

background-and-foreground-colors-do-not-have-a-sufficient-contrast-ratio

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.

cong-cu-phan-tich-do-tuong-phan-mau-sac

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:

color-contrast-is-satisfactory

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. :)

  • Chia sẻ lên Facebook
  • Chia sẻ lên Twitter
  • Chia sẻ lên LinkedIn

Bài viết liên quan

Xóa base slug của custom post type và taxonomy
Xóa base slug của custom post type và taxonomy
Tự động tạo alt-text cho hình ảnh trong WordPress
Tự động tạo alt-text cho hình ảnh trong WordPress
Tính năng Crawl Optimization của plugin Yoast SEO
Tính năng Crawl Optimization của plugin Yoast SEO

Chuyên mục: Thủ thuật WordPress Thẻ: Google PageSpeed/ Thủ thuật SEO

wpcanban-com-facebook-group

Nói về Trung Hiếu

Một người con của xứ Nghệ, hiện đang sinh sống tại Hà Nội. Tôi là người sáng lập và đứng sau mọi hoạt động của WP Căn bản. Tìm hiểu thêm về tôi tại đây.

Bài viết trước « Làm thế nào để chặn index subpages trong WordPress?
Bài viết sau Tích hợp Progressive Web Apps vào website WordPress »

Reader Interactions

Bình luận

    Để lại một bình luận Hủy

    Tất cả các bình luận đều sẽ được kiểm duyệt nghiêm ngặt. Mọi bình luận trái quy định sử dụng sẽ bị gỡ bỏ link hoặc xóa bỏ hoàn toàn. Vui lòng đọc kỹ quy định trước khi bình luận. Xin cảm ơn!

  1. Nam 1 bình luậnviết

    02/07/2021 lúc 13:34

    Đây là một bài viết hay về thiết kế

    Bình luận
  2. TVD 2 bình luậnviết

    22/08/2018 lúc 09:15

    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.

    Bình luận
    • Trung Hiếu Quản lýviết

      22/08/2018 lúc 14:58

      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. :)

      Bình luận
  3. Lê Minh Tiên 20 bình luậnviết

    07/08/2018 lúc 18:18

    hay quá chỉ những cái nhỏ nhỏ thôi là cả một vấn đề lớn

    Bình luận
  4. Long 1 bình luậnviết

    24/07/2018 lúc 17:48

    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ình luận
    • Trung Hiếu Quản lýviết

      25/07/2018 lúc 06:50

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

      Bình luận

Sidebar chính

NHẬN BÀI VIẾT QUA EMAIL

Hãy đăng ký ngay để là người đầu tiên nhận được thông báo qua email mỗi khi chúng tôi có bài viết mới. Tặng miễn phí ebook "Bảo mật WordPress toàn tập" do WP Căn bản biên soạn!

Theo dõi qua mạng xã hội

Dịch vụ WordPress Hosting

dich-vu-wordpress-hosting-chat-luong-cao

Bạn đang tìm gì?

WordPress căn bản

Bảo mật WordPress

Tăng tốc WordPress

Thủ thuật CloudFlare

Sửa lỗi WordPress

Thủ thuật LiteSpeed

Thủ thuật Genesis

Thủ thuật SEO

Thủ thuật WooCommerce

Sử dụng theme Paradise

Dịch vụ tối ưu WordPress miễn phí

dich-vu-toi-uu-wordpress-mien-phi

Dịch vụ quét mã độc miễn phí

dich-vu-quet-ma-doc-wordpress-mien-phi

Footer

Bài viết mới nhất

  • Xóa base slug của custom post type và taxonomy 04/07/2025
  • Ra mắt plugin Hybrid Object Cache độc quyền tại WP Căn bản 30/06/2025
  • Monarx Security được tích hợp vào dịch vụ WordPress Hosting 15/06/2025
  • Hiển thị code trong bài viết của WordPress 07/06/2025

Bình luận mới nhất

  • Trung Hiếu trong Bật mí về các công nghệ mà WP Căn bản đang sử dụng
  • Tịnh Nguyễn trong Bật mí về các công nghệ mà WP Căn bản đang sử dụng
  • Trung Hiếu trong Hướng dẫn nâng cấp PHP 7.4 cho website WordPress
  • dự án vlasta hải phòng trong Hướng dẫn nâng cấp PHP 7.4 cho website WordPress

Thông tin hữu ích

  • Giới thiệu bản thân
  • Quy định sử dụng
  • Chính sách bảo mật
  • Bản quyền nội dung

Thống kê WP Căn bản

9 Chuyên mục - 1.007 Bài viết - 35.554 Bình luận

Bản quyền © 2014 - 2025 · WP Căn bản (tiền thân là eBooksvn.com) · Sử dụng Paradise child theme và dịch vụ WordPress Hosting