Kiến thức

Các cặp màu tương phản phổ biến và cách áp dụng hiệu quả

image - Các cặp màu tương phản phổ biến và cách áp dụng hiệu quả

Màu tương phản không chỉ giúp thiết kế nổi bật mà còn dẫn dắt thị giác và truyền tải thông điệp hiệu quả. Khi biết cách phối các cặp màu tương phản phổ biến, bạn có thể tạo điểm nhấn cho thiết kế. Bài viết này sẽ hướng dẫn nguyên tắc chọn màu, cân bằng sắc độ và áp dụng màu tương phản sao cho thu hút và hài hòa.

Trả lời nhanh: Màu tương phản là hai màu khác nhau rõ rệt về sắc màu, độ sáng hoặc độ rực, nên đặt cạnh nhau chúng làm nhau nổi lên. Về sắc màu, cặp mạnh nhất là hai màu đối diện nhau trên bánh xe màu (màu bổ túc): đỏ và xanh lá, xanh dương và cam, vàng và tím. Với chữ trên nền, thứ quyết định dễ đọc là chênh lệch sáng tối, đo bằng tỉ lệ tương phản WCAG: chữ thường cần từ 4.5:1, chữ lớn từ 3:1.

Bảng tra nhanh "màu này tương phản với màu gì":

Màu của bạnMàu đối trên bánh xe hoạ sĩ (RYB)Màu đối trên bánh xe màn hình (RGB)
Đỏ #FF0000Xanh láXanh cyan #00FFFF
Cam #FF8000Xanh dươngXanh da trời #007FFF
Vàng #FFFF00TímXanh dương #0000FF
Xanh lá #00FF00ĐỏHồng cánh sen (magenta) #FF00FF
Xanh dương #0000FFCamVàng #FFFF00
Tím #8000FFVàngXanh nõn chuối #7FFF00
Hồng #FF66B3Xanh lá (hồng là đỏ pha trắng)Xanh ngọc nhạt #66FFB2

Bánh xe hoạ sĩ RYB (gốc đỏ, vàng, lam) quen dùng trong hội hoạ và in ấn. Bánh xe RGB là của màn hình; mã màu cột này do ColorME tính bằng cách xoay sắc màu 180 độ trong hệ HSL.

Hai tấm bảng màu cam giống hệt nhau của một xưởng sổ tự đặt tên, một tấm chữ đen đạt chuẩn, một tấm chữ trắng không đạt

Trên nền cam #FF7A00, chữ đen #121212 đạt 7.17:1, chữ trắng chỉ 2.61:1. Tên xưởng Gió Bấc là tự đặt. Hình do ColorME tự dựng.

Màu tương phản là gì?

Định nghĩa màu tương phản

Màu tương phản giúp tạo điểm nhấn và thu hút ánh nhìn trong thiết kế

Màu tương phản giúp tạo điểm nhấn và thu hút ánh nhìn trong thiết kế

Màu tương phản là những màu sắc khác nhau rõ rệt về tông, độ sáng hoặc sắc độ. Khi đặt cạnh nhau, chúng giúp nổi bật và thu hút sự chú ý. Trong thiết kế đồ họa, màu tương phản thường được dùng để nhấn mạnh các yếu tố quan trọng. Chúng tạo điểm nhấn và dẫn dắt mắt người xem theo hướng mong muốn.

Một cách đơn giản để nhận biết màu tương phản là nhìn vào bánh xe màu. Những màu nằm đối diện nhau thường tạo ra sự tương phản mạnh. Ví dụ, xanh dương và cam, đỏ và xanh lục, vàng và tím là những cặp màu đối lập. Chúng tạo ra hiệu ứng thị giác mạnh. Điều này giúp các chi tiết trên thiết kế nổi bật và dễ nhận diện.

"Màu đối lập", "màu đối nhau" hay "bảng màu đối" chính là các cặp màu bổ túc này. "Màu tương phản" rộng hơn: hai màu cùng tông vẫn tương phản nhờ một đậm một nhạt, hoặc một rực một xám. Nếu chưa quen bánh xe màu, hãy đọc bài tìm hiểu về vòng tròn màu sắc (color wheel) trước.

Vai trò của màu tương phản

Màu tương phản đóng vai trò quan trọng trong việc truyền tải thông điệp và dẫn dắt

Màu tương phản đóng vai trò quan trọng trong việc truyền tải thông điệp và dẫn dắt

Sử dụng màu tương phản không chỉ là một cách để tăng thẩm mỹ, mà còn đóng vai trò cực kỳ quan trọng trong việc truyền tải thông điệp và dẫn dắt mắt người nhìn:

  • Thu hút sự chú ý: Những chi tiết dùng màu tương phản sẽ là thứ người nhìn nhìn thấy đầu tiên.
  • Tạo điểm nhấn: Trên poster, banner hay giao diện app, màu tương phản giúp bạn làm nổi bật tiêu đề, nút bấm hoặc thông điệp chính.
  • Cân bằng thị giác: Nếu phối hợp hợp lý, màu tương phản sẽ giúp tổng thể hài hòa, vừa mắt, tránh cảm giác rối hoặc nhạt nhẽo.
  • Gợi cảm xúc: Màu tương phản không chỉ thu hút mà còn truyền cảm giác năng động, mạnh mẽ hoặc cân bằng cảm xúc, tùy cách bạn dùng.

Chẳng hạn, nếu muốn nút "Đăng ký ngay" trên website thật nổi bật, bạn có thể dùng nút cam #FF7A00 trên nền xanh dương đậm #0B1F3A: hai màu vừa đối nhau về sắc, vừa chênh rõ về sáng tối (6.32:1).

Các cặp màu tương phản phổ biến giúp thu hút thị giác

Nguyên lý hoạt động

Màu tương phản được khai thác dựa trên ba nguyên lý phổ biến

Màu tương phản được khai thác dựa trên ba nguyên lý phổ biến

Màu tương phản thu hút mắt người không phải ngẫu nhiên. Nó đến từ cách mắt phản ứng với sự khác biệt về sắc độ, nhiệt độ màu và ánh sáng. Khi hai gam màu khác nhau được đặt cạnh nhau, não bộ sẽ nhận ra sự khác biệt. Điều này khiến chúng ta chú ý hơn. Trong thiết kế, hiệu ứng này được khai thác dựa trên ba nguyên lý phổ biến:

  • Tương phản nóng - lạnh: Đây là sự kết hợp giữa nhóm màu nóng (như đỏ, cam, vàng) và nhóm màu lạnh (xanh dương, xanh lá, tím). Khi đặt cạnh nhau, hai nhóm màu này tạo ra hiệu ứng vừa nổi bật vừa cân bằng. Ví dụ, một poster với nền xanh dương lạnh kết hợp chi tiết màu vàng sẽ ngay lập tức khiến mắt người nhìn dừng lại.
  • Tương phản trực tiếp (màu đối diện trên bánh xe màu): Đây là cách tạo tương phản mạnh nhất về sắc màu. Hai màu nằm đối diện nhau trên bánh xe màu luôn khác biệt rõ rệt. Các cặp kinh điển như đỏ – xanh lá, xanh dương – cam hay vàng – tím đều được dùng rất nhiều trong thiết kế để tạo điểm nhấn mạnh mẽ.
  • Tương phản sáng - tối: Không chỉ màu sắc, độ sáng tối cũng là một yếu tố quan trọng tạo nên sự tương phản. Đặt một màu tông sáng (trắng, vàng nhạt) cạnh một màu tông tối (đen, xanh đậm) sẽ giúp các chi tiết nổi bật rõ rệt. Đây là nguyên lý thường thấy trong thiết kế logo, typography hoặc các giao diện tối giản.

Bảy kiểu tương phản màu và cách dùng từng kiểu

Bảy thuật ngữ designer hay dùng, kèm cách áp dụng. Mã màu ví dụ được tính bằng cách xoay sắc màu của xanh cobalt #1F3FE0 trên bánh xe RGB.

Kiểu tương phảnHiểu đơn giảnPosterBannerGiao diện
Bổ túc (bổ sung, complementary)Hai màu cách nhau 180 độ: #1F3FE0 và #E0C01F.Nền một màu, tiêu đề màu đối.Nền xanh, con số ưu đãi màu vàng.Màu đối dành riêng cho nút chính.
Bổ túc chia tách (split-complementary)Màu gốc và hai màu lệch 30 độ hai bên màu đối: #1F3FE0, #E05F1F, #A0E01F.Dịu hơn bổ túc, hợp poster nhiều thông tin.Màu gốc làm nền, hai màu kia cho giá và nhãn.Biểu đồ, thẻ phân loại.
Bộ ba (triadic)Ba màu cách đều 120 độ: #1F3FE0, #E01F3F, #3FE01F.Lễ hội, thiếu nhi, âm nhạc.Một màu chính, hai màu điểm xuyết.Minh hoạ, biểu tượng danh mục.
Nóng lạnh (warm/cool)Đỏ, cam, vàng cạnh xanh, tím.Chủ thể nóng trên nền lạnh.Sản phẩm tông ấm trên nền xanh mát.Nền lạnh, cảnh báo màu nóng.
Sáng tối (value contrast)Chênh độ sáng dù cùng sắc màu: navy #0B1F3A và xanh nhạt #D6E4FF chênh 12.90:1.Tiêu đề đọc được từ xa.Chữ trên ảnh: thêm lớp phủ tối.Bắt buộc cho mọi chữ, biểu tượng.
Độ bão hoà (saturation contrast)Màu rực giữa màu xám nhạt. Đỏ rực #FF3B30 và đỏ xám #B08A87 khác hẳn độ rực nhưng sáng tối gần bằng nhau (1.15:1).Tông trầm, một chi tiết rực.Nền giảm màu, sản phẩm giữ màu thật.Giao diện xám, chỉ nút chính có màu. Không thay được sáng tối khi đặt chữ.
Tương phản đồng thời (simultaneous contrast)Màu bên cạnh làm đổi cảm nhận: cùng một ô xám trông sáng hơn trên nền đen, tối hơn trên nền trắng.Thử màu chữ trên nền thật.Logo trên nền màu có thể lệch tông.Xám chữ trông khác nhau ở giao diện sáng và tối.

Tương phản đồng thời được nhà hoá học Pháp Michel Eugène Chevreul viết thành sách năm 1839 (De la loi du contraste simultané des couleurs).

Bảy ô màu cho bảy kiểu tương phản: bổ túc, bổ túc chia tách, bộ ba, nóng lạnh, sáng tối, độ bão hoà và hai ô xám giống nhau trên nền đen và nền trắng

Mỗi ô dùng đúng mã màu trong bảng. Ở ô cuối, hai ô xám là cùng một màu: trên nền đen trông sáng hơn, trên nền trắng trông tối hơn. Hình do ColorME tự dựng.

Thuật ngữ trong bài: màu bổ túc, phối màu bộ ba, độ bão hoà.

Các cặp màu tương phản phổ biến

Ví dụ về một tác phẩm sử dụng màu tương phản

Ví dụ về một tác phẩm sử dụng màu tương phản (Nguồn: designervn.net)

Trong thiết kế, có những cặp màu luôn tạo được hiệu ứng thị giác mạnh mẽ và gần như lúc nào cũng "ghi điểm". Đây là những cặp màu vừa dễ áp dụng, vừa mang lại cảm giác bắt mắt ngay từ cái nhìn đầu tiên:

  • Xanh dương - cam: Mang lại sự trẻ trung, năng động và thường được dùng trong quảng cáo hoặc thiết kế liên quan đến công nghệ.
  • Đỏ - xanh lá: Tạo hiệu ứng mạnh mẽ, rực rỡ. Đây là cặp màu thường thấy trong poster thể thao hoặc dịp lễ hội.
  • Vàng - tím: Sang trọng, độc đáo và có phần nghệ thuật. Cặp màu này phù hợp cho thương hiệu muốn tạo sự khác biệt.
  • Đen - trắng: Một cặp màu tương phản cổ điển nhưng chưa bao giờ lỗi thời. Vừa đơn giản, vừa hiện đại, lại dễ ứng dụng trong mọi loại thiết kế.
  • Xanh lá - hồng: Gợi cảm giác tươi mới, ngọt ngào, thường được dùng trong thiết kế dành cho thời trang, mỹ phẩm hoặc sản phẩm hướng đến giới trẻ.

Mã màu mẫu cho năm cặp trên, kèm tỉ lệ sáng tối giữa hai màu:

Cặp màuMã màu mẫuTỉ lệ tương phảnĐặt chữ lên nhau?
Xanh dương - cam#1E3A8A và #F973163.70:1Chỉ chữ lớn
Đỏ - xanh lá#DC2626 và #1665341.48:1Không
Vàng - tím#FACC15 và #581C877.10:1Được
Đen - trắng#000000 và #FFFFFF21.00:1Được, mức cao nhất
Xanh lá - hồng#14532D và #F9A8D45.02:1Được

Năm cuốn sổ của một thương hiệu mẫu, mỗi cuốn tô bằng một cặp màu trong bảng, kèm mã màu và tỉ lệ tương phản

Chữ chỉ đặt lên màu kia khi bảng cho phép; cặp đỏ và xanh lá được tách bằng một dải trắng. Tên thương hiệu Gió Bấc là tự đặt. Hình do ColorME tự dựng.

Khi sử dụng các cặp màu này, bạn có thể điều chỉnh sắc độ (đậm/nhạt) hoặc độ sáng tối. Điều này giúp thiết kế không quá gắt nhưng vẫn thu hút. Bí quyết nhỏ là chọn một màu chính, một màu phụ. Chỉ dùng màu tương phản cho những chi tiết quan trọng để tránh rối mắt.

>> Xem thêm: Khóa học Digital Painting Toàn Diện của colorME

Bảng màu tương phản cho chữ và nền theo chuẩn WCAG

Hai màu rực, khác hẳn nhau về sắc chưa chắc đọc được khi làm chữ và nền: đỏ #FF0000 trên xanh dương #0000FF rất chói nhưng tỉ lệ sáng tối chỉ 2.15:1. Với chữ, hãy đo bằng tỉ lệ tương phản của WCAG, bộ hướng dẫn về khả năng tiếp cận nội dung web của W3C.

Công thức: (L1 + 0.05) / (L2 + 0.05), với L1, L2 là độ chói tương đối của màu sáng hơn và màu tối hơn. Kết quả chạy từ 1:1 đến 21:1 (đen trên trắng). Các ngưỡng cần nhớ:

Thành phầnMức AAMức AAA
Chữ thườngTừ 4.5:1Từ 7:1
Chữ lớn (từ 18 pt, hoặc từ 14 pt nếu in đậm)Từ 3:1Từ 4.5:1
Thành phần giao diện và đồ hoạ cần để hiểu nội dung (viền ô nhập, biểu tượng, nét biểu đồ)Từ 3:1 so với màu liền kềKhông quy định riêng

Nguồn: W3C, Understanding SC 1.4.3 Contrast (Minimum), SC 1.4.6 Contrast (Enhanced) và SC 1.4.11 Non-text Contrast, đọc ngày 14/10/2026.

Các cặp chữ và nền hay dùng (ColorME tự tính theo công thức trên, làm tròn hai chữ số thập phân):

Màu chữMàu nềnTỉ lệChữ thường (4.5:1)Chữ lớn (3:1)
Trắng #FFFFFFĐen #00000021.00:1ĐạtĐạt
Vàng #FFD60ATím đậm #3C096C10.27:1ĐạtĐạt
Trắng #FFFFFFXanh dương #1D4ED86.70:1ĐạtĐạt
Cam #FF7A00Xanh navy #0B1F3A6.32:1ĐạtĐạt
Đen #121212Cam #FF7A007.17:1ĐạtĐạt
Đỏ đậm #D00000Trắng #FFFFFF5.70:1ĐạtĐạt
Xanh lá đậm #15803DTrắng #FFFFFF5.02:1ĐạtĐạt
Đỏ #FF0000Trắng #FFFFFF4.00:1Không đạtĐạt
Trắng #FFFFFFCam #FF7A002.61:1Không đạtKhông đạt
Đỏ #FF0000Xanh dương #0000FF2.15:1Không đạtKhông đạt
Trắng #FFFFFFXanh dương nhạt #8EC5FF1.81:1Không đạtKhông đạt
Vàng #FFFF00Trắng #FFFFFF1.07:1Không đạtKhông đạt

Mười hai mẫu chữ trên nền theo đúng thứ tự trong bảng, mỗi mẫu ghi tỉ lệ tương phản và đạt hay không đạt cho chữ thường và chữ lớn

Cùng một dòng tiêu đề và một dòng chữ thường, chỉ đổi màu chữ và màu nền. Nhãn tô đặc là đạt, nhãn viền là không đạt. Hình do ColorME tự dựng.

Rút ra: nền cam đi với chữ đen thay vì chữ trắng; đỏ tươi trên trắng chỉ đủ cho chữ lớn; vàng chỉ làm chữ được trên nền tối.

Nguyên tắc chọn màu tương phản

Chọn màu dựa trên bánh xe màu

Bạn có thể chọn màu tương phản dễ dàng dựa trên bánh xe màu

Bạn có thể chọn màu tương phản dễ dàng dựa trên bánh xe màu

Một trong những cách dễ nhất để chọn màu tương phản là nhìn vào bánh xe màu. Những màu đối diện nhau trên bánh xe tạo ra sự khác biệt rõ ràng. Chúng giúp chi tiết nổi bật mà không cần nhiều hiệu ứng.

Khi bạn chọn màu theo nguyên tắc này, thiết kế sẽ thu hút ánh nhìn hơn. Điều này rất quan trọng cho poster, banner và giao diện website.

Việc chọn màu theo bánh xe màu giúp bạn tránh các màu "đụng nhau" hoặc gây rối mắt. Nó cũng giúp tổng thể hài hòa hơn.

Cân bằng tỷ lệ màu

Việc cân bằng tỷ lệ màu rất quan trọng

Việc cân bằng tỷ lệ màu rất quan trọng

Chỉ chọn màu đối lập thôi chưa đủ, việc cân bằng tỷ lệ màu cũng rất quan trọng. Một thiết kế quá nhiều màu tương phản sẽ dễ khiến mắt người nhìn bị rối, quá ít thì lại thiếu điểm nhấn.

Bí quyết là dùng màu tương phản như một "gia vị". Nó chỉ nên xuất hiện ở những chi tiết quan trọng. Màu nền và các chi tiết phụ nên trung tính hơn.

Ví dụ, trên một poster, bạn có thể dùng nền xanh dương đậm #0B1F3A, nội dung chính màu trắng (16.52:1) và các chi tiết quan trọng nhấn bằng cam #FF7A00 (6.32:1). Cách này vừa tạo sự nổi bật vừa giữ cho tổng thể dễ nhìn, không gây mỏi mắt. Xanh phải đủ đậm: chữ trắng trên xanh dương nhạt #8EC5FF chỉ đạt 1.81:1.

Tạo tương phản qua sắc độ và độ bão hòa

Ví dụ bảng màu tương phản đỏ - xanh

Ví dụ bảng màu tương phản đỏ - xanh

Trong thực tế, người ta hiếm khi dùng nhiều cặp màu đối lập để vẽ hay thiết kế. Sự tương phản quá mạnh có thể làm mắt mệt mỏi.

Thay vào đó, các nhà thiết kế thường giữ nguyên tông màu. Họ tinh chỉnh độ sáng tối hoặc độ bão hòa. Điều này tạo ra sự đối lập mềm mại và giàu cảm xúc hơn.

Cách xử lý này giúp tác phẩm không bị "gắt" và vẫn giữ được cảm xúc đối lập. Nó vừa hài hòa, vừa thu hút. Đây là kỹ thuật thường thấy trong hội họa, thiết kế thương hiệu và nhiếp ảnh. Tương phản không chỉ là "sự khác biệt" mà còn là "cách kể chuyện bằng màu sắc".

Ứng dụng màu tương phản hiệu quả trong thiết kế đồ họa

Thiết kế website và app

Màu tương phản giúp dẫn hướng hành vi người dùng khi thiết kế giao diện

Màu tương phản giúp dẫn hướng hành vi người dùng khi thiết kế giao diện

Trong thiết kế giao diện website hay app, màu tương phản thường được dùng để dẫn dắt hành vi người dùng. Một nút kêu gọi hành động (CTA) như "Đăng ký ngay" hay "Mua hàng" sẽ hiệu quả hơn rất nhiều nếu được đặt trên nền màu đối lập.

Ví dụ, một nút màu cam trên nền xanh dương đậm sẽ thu hút sự chú ý. Hoặc một nút xanh lá trên nền trắng cũng dễ bấm hơn, miễn là xanh đủ đậm: chữ trắng trên nút #15803D đạt 5.02:1, còn xanh lá tươi #00C853 với trắng chỉ đạt 2.24:1.

Ba màn hình đăng ký giống nhau với nút Đăng ký ngay: nút cam trên nền xanh navy, nút xanh lá đậm và nút xanh lá tươi chữ trắng khó đọc

Bản vẽ minh hoạ, không phải ảnh chụp ứng dụng thật. Nút nào cũng nổi, nhưng chữ trắng trên nút #00C853 chỉ đạt 2.24:1. Hình do ColorME tự dựng.

Ngoài ra, màu tương phản giúp phân chia các khu vực nội dung rõ ràng. Điều này tạo cảm giác dễ theo dõi. Nó cũng tránh tình trạng giao diện bị "trộn lẫn" và khó đọc. Để luyện phần này, bạn có thể xem khoá thiết kế giao diện Mobile App (UI) với Figma trong mục e-learning của ColorME.

Thiết kế poster và banner

Màu tương phản giúp poster, banner nổi bật và dễ thu hút ở những phần tiêu đề, khẩu hiệu hoặc hình ảnh chủ đạo

Màu tương phản giúp poster, banner nổi bật và dễ thu hút ở những phần tiêu đề, khẩu hiệu hoặc hình ảnh chủ đạo

Poster và banner thường cần truyền tải thông điệp nhanh chóng, chỉ trong vài giây nhìn lướt qua. Vì vậy, việc dùng màu tương phản ở tiêu đề, khẩu hiệu hoặc hình ảnh chủ đạo sẽ giúp thu hút ánh nhìn ngay lập tức.

Ví dụ, một poster cho sự kiện âm nhạc có thể dùng nền tím đậm. Chữ vàng sáng sẽ tạo không khí sôi động và ấn tượng (vàng #FFD60A trên tím #3C096C đạt 10.27:1). Một banner quảng cáo giảm giá sẽ nổi bật hơn nếu dùng nền trắng và chữ đỏ lớn cho số % khuyến mãi. Đỏ #FF0000 trên trắng đạt 4.00:1, đủ cho con số lớn; dòng điều kiện chữ nhỏ bên dưới nên dùng đỏ đậm #D00000 (5.70:1) hoặc đen.

Thiết kế logo và nhận diện thương hiệu

Màu tương phản giúp logo đơn giản mà vẫn nổi bật, dễ ghi nhớ

Màu tương phản giúp logo đơn giản mà vẫn nổi bật, dễ ghi nhớ

Logo và bộ nhận diện thương hiệu thường cần đơn giản nhưng vẫn dễ nhớ. Ở đây, màu tương phản đóng vai trò tạo ra sự khác biệt và giúp thương hiệu nổi bật trong tâm trí khách hàng.

Cặp đen - trắng là ví dụ điển hình của sự tối giản nhưng mạnh mẽ, xuất hiện trong nhiều thương hiệu nổi tiếng. Ngoài ra, những thương hiệu trẻ trung, sáng tạo thường chọn xanh - cam hoặc hồng - xanh lá để thể hiện sự năng động và cá tính. Quan trọng nhất, sự tương phản giúp logo vẫn giữ được độ nhận diện dù đặt trên nền sáng hay nền tối.

Thiết kế trên social media

Màu tương phản giúp nội dung mạng xã hội dễ nhìn và nổi bật

Màu tương phản giúp nội dung mạng xã hội dễ nhìn và nổi bật

Trên social media, một bài đăng có hình ảnh sử dụng màu tương phản hợp lý sẽ thu hút ánh nhìn, khiến người xem "dừng lướt" lâu hơn để chú ý đến nội dung. Sự kết hợp màu sắc nổi bật giúp bài đăng nổi bật giữa thông tin dày đặc. Nó cũng định hình phong cách riêng cho thương hiệu. Điều này giúp thương hiệu ghi dấu ấn mạnh mẽ trong tâm trí người dùng.

Cách kiểm tra một cặp màu tương phản trong 3 bước

  1. Tìm màu đối. Mở Bánh xe màu của ColorME, nhập mã màu chính và chọn quy tắc phối. Trang công cụ nêu 8 lựa chọn, trong đó có "bộ ba, bổ sung, bổ sung chia tách", trên cả bánh xe "Màu hoạ sĩ RYB" và "Màu RGB".
  2. Đo tỉ lệ chữ và nền. Dán hai mã màu vào công cụ Kiểm tra tương phản. Theo trang công cụ, nó "tính ngay tỉ lệ tương phản và cho biết đạt chuẩn WCAG AA, AAA hay chưa".
  3. Xem thử bằng mắt người mù màu. Đỏ và xanh lá là cặp nhiều người khó phân biệt nhất. Đưa ảnh thiết kế vào công cụ Mô phỏng mù màu để xem lại, và đừng chỉ dùng màu để báo đúng sai: WCAG yêu cầu màu không là cách duy nhất truyền thông tin (SC 1.4.1).

Câu hỏi thường gặp

Màu tương phản với xanh dương là màu gì?

Cam trên bánh xe hoạ sĩ, vàng #FFFF00 trên bánh xe RGB (8.00:1 với xanh dương #0000FF).

Màu tương phản với màu đỏ là màu gì?

Xanh lá trên bánh xe hoạ sĩ, xanh cyan #00FFFF trên bánh xe RGB. Đừng đặt chữ đỏ lên nền xanh lá vì hai màu sáng tối gần bằng nhau.

Màu vàng tương phản với màu gì?

Tím trên bánh xe hoạ sĩ, xanh dương trên bánh xe RGB. Vàng rất sáng nên hợp với các màu tối: tím đậm, xanh navy, đen.

Màu đối lập với xanh lá và màu hồng là gì?

Đối lập với xanh lá là đỏ (bánh xe hoạ sĩ) hoặc hồng cánh sen #FF00FF (bánh xe RGB). Hồng là đỏ pha trắng nên cũng đi với xanh lá, ví dụ #14532D và #F9A8D4.

Kết luận

Màu tương phản không chỉ là yếu tố trang trí. Nó còn là "vũ khí" mạnh mẽ giúp thiết kế nổi bật.

Màu sắc thu hút và truyền tải thông điệp rõ ràng hơn. Dù bạn thiết kế website, poster, logo hay bài đăng trên mạng xã hội, hiểu nguyên tắc màu tương phản là rất quan trọng. Nó sẽ giúp sản phẩm của bạn thu hút ngay từ cái nhìn đầu tiên.

Nếu bạn muốn khám phá thế giới màu sắc và cải thiện kỹ năng vẽ kỹ thuật số, khóa học Digital Painting của colorME là lựa chọn tốt. Với khóa học này, bạn sẽ học cách phối màu, làm chủ tư duy thị giác và kỹ năng vẽ digital. Đây là nền tảng quan trọng để bạn chinh phục mọi phong cách thiết kế.

Muốn thực hành ngay, xem bài cách phối màu online miễn phí: lấy màu từ ảnh, tạo bảng màu bằng bánh xe màu và kiểm tra tương phản chữ, có video hướng dẫn từng bước.

Thiết kế chuyên sâu Học Thiết kế chuyên sâu cùng ColorME 72 buổi · 15.900.000đ Xem khoá học