Tự động chọn màu nền trước dựa trên màu nền


7

"Công thức" thích hợp cho màu nền trước dựa trên màu nền (trong đó màu nền có thể là bất kỳ màu nào)?

Thêm thông tin:

Tôi muốn ứng dụng của mình chọn màu nền trước dựa trên màu nền (liền khối). Tôi đã suy nghĩ theo các dòng: màu đen nếu tổng số các thành phần RGB vượt quá (255x3) / 2 và màu trắng khác. Nhưng thà lấy ý kiến ​​của các chuyên gia. Có một cách được chấp nhận để làm điều này? Hoặc những gì bạn sẽ đề nghị?

Có một câu hỏi tương tự nhưng về cơ bản các câu trả lời đưa ra để hạn chế màu nền có sẵn. Đó không phải là một lựa chọn trong trường hợp này.


2
Tôi đang bỏ phiếu để đóng câu hỏi này ngoài chủ đề vì nó dường như không phải là về thiết kế đồ họa, mà là lập trình.
Scott

@Scott Đó là về thiết kế đồ họa - Màu nền trước phù hợp dựa trên màu nền là gì. Đó là nó. Các công cụ RGB chỉ là để đặt một số bối cảnh xung quanh nó có thể hữu ích cho một người trả lời có thể. Tôi không yêu cầu bất kỳ sự giúp đỡ nào trong việc lập trình, đó là công việc của tôi. (Và là tầm thường trong trường hợp này.)
ispiro

@Scott Tôi đã chỉnh sửa câu hỏi ngay bây giờ để làm cho nó rõ ràng hơn.
ispiro

Dường như vẫn là về lập trình một ứng dụng cho tôi .. nhưng tôi chỉ có 1 phiếu .. vì vậy hãy xem người dùng khác nghĩ gì. Nếu bất cứ điều gì, đó là một bản sao có thể xảy ra này: graphicdesign.stackexchange.com/questions/19/... hay này: graphicdesign.stackexchange.com/questions/9094/...
Scott

1
Không chắc tôi có hiểu câu hỏi không nhưng nếu điều này có thể giúp bạn bằng cách nào đó, có lẽ bạn có thể tìm thấy manh mối trong thông số màu dev của Google cho các ứng dụng (tôi tin). Hướng dẫn đó đã chứa các hướng dẫn chống đạn cho nền so với các yếu tố khác trong giao diện của bạn và thường có độ tương phản rất tốt. Nói chung, sử dụng 20-30% với 100% mang lại độ tương phản và khả năng đọc tốt (50% không đủ cho độ tương phản). Để in, tốt hơn hết là giữ 10% cho các thành phần nền với 100% văn bản trên đầu. google.com/design/spec/style/color.html Tôi hy vọng tôi có ý nghĩa.
go-junta

Câu trả lời:


2

Tôi đã trả lời một câu hỏi tương tự trên Exchange Development Stack Exchange một lúc trước, vì vậy hãy để tôi tóm tắt các câu trả lời ở đó.

Bạn có ý tưởng chọn màu đen hoặc trắng, tùy theo màu nào tương phản tốt hơn với màu nền, là âm thanh. Tuy nhiên, chỉ cần lấy trung bình các thành phần RGB sẽ không cho thấy dấu hiệu rõ ràng về việc một màu sắc cụ thể sẽ xuất hiện như thế nào đối với mắt người, vì (hầu hết) hai lý do:

Trước hết, vì những lý do liên quan đến nhận thức màu sắc của con người, các kênh màu đỏ, xanh lá cây và xanh dương không có độ chói tương đối giống nhau ; trong thực tế, màu xanh lam thuần khiết ( #0000ff) chỉ sáng khoảng 10% (và màu đỏ thuần chỉ khoảng 30% như màu sáng) so với màu xanh lá cây thuần khiết ( #00ff00). Do đó, ví dụ văn bản màu đen trên màu xanh thuần khiết sẽ không bao giờ có độ tương phản đặc biệt tốt.

Ví dụ, những hình ảnh dưới đây cho thấy ví dụ về văn bản màu đen và màu trắng trên màu đỏ tinh khiết, màu xanh lá cây và hình nền màu xanh ( #ff0000, #00ff00#0000ff):

Văn bản đen trắng trên đỏ RGB thuần túy Văn bản đen trắng trên màu xanh lá cây thuần RGB Văn bản đen trắng trên màu xanh RGB thuần túy

Bạn có thể thấy rõ sự khác biệt về độ tương phản, mặc dù tất cả các màu này có cùng giá trị RGB trung bình.

Sự phức tạp khác là các không gian màu RGB thường được sử dụng trên màn hình máy tính (như sRGB ) không phải là tuyến tính, nhưng có gamma hiển thị khoảng 2 hoặc hơn. Điều đó có nghĩa là, ví dụ như màu RGB #7f7f7f= "50% màu xám" không thực sự xuất hiện một nửa sáng như màu trắng tinh khiết ( #ffffff), mà chỉ sáng hơn khoảng 25%, trong khi màu thực sự có độ sáng tương đối giữa một nửa màu đen và trắng là thực sự gần hơn với "75% màu xám" ( #bfbfbf).

Tuy nhiên, thuận tiện, mắt người cũng không tuyến tính và nhạy cảm hơn với sự khác biệt trong các màu tối hơn. Trong thực tế, đối với các sắc thái của màu xám, các phi tuyến tính gần như bị loại bỏ, do đó, RGB 50% màu xám ( #7f7f7f) vẫn còn nhận thức về khoảng cách tương đương với cả hai màu đen và trắng. Như một cuộc biểu tình, đây là một số văn bản màu đen và trắng trên 25%, 50% và 75% nền xám ( #3f3f3f, #7f7f7f#bfbfbf):

Văn bản đen trắng trên 25% màu xám Văn bản đen trắng trên 50% màu xám Văn bản đen trắng trên 75% màu xám

Tuy nhiên, để tính toán chính xác độ chói của màu RGB tùy ý, chúng ta cần tính đến gamma hiển thị, vì đó là giá trị độ chói tuyến tính cần được tính trung bình.

Để kết hợp tất cả lại với nhau, để xác định xem văn bản đen hay trắng sẽ có độ tương phản tốt hơn trên nền, bạn cần phải:

  1. chuyển đổi các giá trị màu RGB được nén bằng gamma thành RGB tuyến tính,
  2. lấy trung bình trọng số của các thành phần R, G và B tuyến tính, và
  3. so sánh trung bình kết quả với một ngưỡng phù hợp.

Giá trị ngưỡng cho kết quả tốt nhất có thể được xác định bằng thực nghiệm, nhưng nhìn chung người ta sẽ mong đợi nó nằm gần với độ chói của màu xám 50% RGB. Trong mọi trường hợp, đáng chú ý là độ tương phản cảm nhận sẽ khác nhau tùy thuộc vào cài đặt hiển thị của người xem và điều kiện xem, do đó, không có giá trị tối ưu duy nhất cho mọi người, mà là một phạm vi khá rộng các lựa chọn tốt hơn hoặc ít hơn.

Nếu bạn chỉ muốn một công thức đơn giản để cắm số vào, hãy thử điều này:

  • nếu 0,2126 × R γ + 0,7152 × G γ + 0,0722 × B γ > 0,5 γ , chọn màu đen; khác chọn màu trắng,

nơi γ là giá trị gamma màn hình xấp xỉ ( γ = 2,2 là điển hình).

Đối với một xấp xỉ thậm chí đơn giản hơn, bạn có thể bỏ qua hiệu chỉnh gamma (nghĩa là giả sử một cách hiệu quả rằng γ = 1) và chỉ cần sử dụng điều kiện 0.2126 × R + 0.7152 × G + 0.0722 × B > 0.5. Đối với các sắc thái của màu xám, điều này sẽ không có sự khác biệt (vì chúng ta đang áp dụng cùng một gamma cho cả hai mặt của bất đẳng thức), nhưng nó phần nào đánh giá quá cao độ chói của các màu bão hòa. May mắn thay, trên các màu như vậy, cả hai màu đen và trắng thường có độ tương phản tốt, do đó, lỗi có thể không quan trọng trong thực tế.

Cuối cùng, lưu ý rằng, nếu màu nền không đồng nhất, có thể không có màu văn bản nào có thể trông đẹp. Trong những trường hợp như vậy, bạn có thể xem xét, ví dụ như sử dụng văn bản màu đen với đường viền màu trắng hoặc ngược lại hoặc có thể bao quanh văn bản của bạn với hộp bán trong suốt có màu đối diện.


0

Mỗi màu có ba biến; màu sắc, độ bão hòa và độ sáng.

Chìa khóa cho mức độ dễ đọc là độ tương phản có thể được tối ưu hóa cho từng trong ba biến độc lập với nhau.

Ví dụ; sự tương phản màu sắc có thể được tối ưu hóa bằng cách tìm bổ sung của nó. Độ tương phản bão hòa có thể được tối ưu hóa bằng cách chọn các mặt đối lập cho mỗi mặt đất. Tương tự, sáng có thể được tương phản bởi mờ.

Điều này (tiêu chí trên) chỉ liên quan đến một công thức để lựa chọn - Mức độ dễ đọc tối ưu.

Có thể có những cân nhắc khác; thẩm mỹ, tri giác, kỹ thuật, vv

Một phương tiện thực tế để cung cấp khả năng này là sử dụng kết quả được xác định trước, có thể dự đoán và có thể chấp nhận được bằng cách sử dụng Bảng tra cứu màu cung cấp một bộ cho một trong hai. Ví dụ; tiền cảnh của X, một nền tảng của Y được cung cấp. Đưa ra một tiền cảnh của Y, một nền tảng của X được cung cấp. CLUT có thể phức tạp hoặc toàn diện như mong muốn cho ứng dụng cụ thể.

Khi các giá trị được biết đến, lựa chọn của chúng có thể được tự động.

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.