Làm thế nào để tính toán loại màu tốt nhất cho màu nền ngẫu nhiên?

Tôi có thể cần phải trình bày nội dung ở nhiều cấp độ tùy thuộc vào khoảng cách của người quan sát đến màn hình. Giả sử từ xa người dùng nhận thấy một màu phẳng, nhưng từ khoảng cách gần, người dùng cần có thể đọc một số văn bản. Phần khó khăn là màu nền phẳng được đưa ra / có thể thay đổi / Tôi không kiểm soát được.

Cho đến nay tôi đã tạo ra một nguyên mẫu thực sự cơ bản để tìm ra màu văn bản từ màu nền (nhấp để chọn một nền ngẫu nhiên). Đây là một cách tiếp cận rất nhỏ: tôi lấy màu sắc và bù 90 độ (đủ khác biệt) và đảo ngược độ sáng trong không gian màu HSB để tôi có được màu khác nhau đủ để có thể đọc / có độ tương phản tốt với nền .

Điều này đôi khi hoạt động:

đôi khi không:

Cách tiếp cận này là tốt / theo hướng tốt? Nếu vậy, làm thế nào tôi có thể làm cho điều này tốt hơn? Nếu không, tôi nên đi theo hướng nào?

Thật không may, tôi không biết nhiều về loại và lý thuyết màu sắc nên bất kỳ gợi ý / lời khuyên nào từ những người có kinh nghiệm đều rất hữu ích. Điều này sẽ được hiển thị trên một màn hình, không được in.

Tôi đang tìm kiếm mối quan hệ nào giữa màu nền và màu nền trước?

Khả năng đọc là tất cả về sự tương phản. Tôi sẽ thử và xác định mức độ tối của mỗi màu nền trong thang độ xám và nếu màu trên 50% màu xám (tối hơn màu sáng), hãy sử dụng văn bản màu trắng, dưới 50% sử dụng văn bản màu đen. Điều này sẽ đảm bảo rằng bạn có độ tương phản ít nhất 50% (khác biệt về âm sắc) để làm cho văn bản của bạn có thể đọc được.

Phương pháp này dễ dàng hơn nhiều so với cố gắng chơi với màu miễn phí hoặc đảo ngược và đảm bảo độ tương phản tông màu tối đa trên bất kỳ màu nào.

Đây là câu trả lời trước đây của tôi về cơ bản cùng một câu hỏi tại Trao đổi phát triển trò chơi.

Để tóm tắt, giống như các câu trả lời khác ở đây gợi ý, bạn thường nên sử dụng màu đen hoặc trắng , tùy thuộc vào câu trả lời nào tương phản tốt hơn với nền. (Tất nhiên, nếu bạn thích, việc tô màu một chút sẽ không ảnh hưởng đến độ tương phản nhiều.)

Lưu ý rằng, để chính xác xác định cách tối hoặc ánh sáng màu xuất hiện cho người dùng, đó là không đủ để chỉ trung bình các giá trị màu RGB (hoặc để có những sáng / giá trị của một HSL / HSV màu). Thay vào đó, bạn cần tính đến (ít nhất) hai hiệu ứng:

1. phi tuyến tính của thiết bị, màu sắc được hiển thị trên đó, (đối với màu RGB trên màn hình máy tính, ít nhất) có xu hướng làm tối các midtones và

2. độ nhạy phổ của mắt người , nói một cách đại khái, làm cho màu sắc ở gần giữa phổ khả kiến ​​(xanh lục, vàng, lục lam) xuất hiện sáng hơn so với các cạnh gần (xanh lam, đỏ, tím).

Vấn đề đầu tiên có thể được giải thích bằng việc mở rộng gamma , trong khi vấn đề thứ hai đơn giản là yêu cầu trọng số không đồng đều của các kênh màu R / G / B. Kết hợp lại, đây là cách tính toán độ sáng cảm nhận của màu RGB và quyết định xem màu đen hay màu trắng sẽ tương phản với nó tốt hơn:

const float gamma = 2.2;
float L = 0.2126 * pow( R, gamma )
        + 0.7152 * pow( G, gamma )
        + 0.0722 * pow( B, gamma );

boolean use_black = ( L > 0.5 );

Điều đó giả định rằng R, Gvà Blà các số có dấu phẩy động trong khoảng từ 0,0 đến 1,0. Nếu bạn có số nguyên từ 0 đến 255, hãy chuyển đổi chúng thành số float và chia chúng cho 255.

Các hằng số trong mã ở trên là (xấp xỉ) chính xác cho đầu vào sRGB ; bạn có thể điều chỉnh chúng nếu bạn đang làm việc trong một số không gian màu khác, mặc dù các giá trị chính xác không thực sự quan trọng lắm: đối với các màu đủ tối hoặc sáng, câu trả lời sẽ giống nhau, trong khi các màu rơi gần đường viền sẽ tương phản dù sao cũng tốt như nhau với màu đen hoặc trắng.

Tôi đồng ý với John, giữ cho văn bản càng nhiều màu đen / trắng càng tốt để đảm bảo, bạn có thể thêm một lượng bão hòa nhỏ vào văn bản và bạn vẫn an toàn. Đây là một thử nghiệm nhỏ:

Xem trong 100% tại đây: http://flavius.clickgarden.net/random-hsb-bg-readable-text/test-01.png Tải xuống tệp .ai (nguồn) tại đây để chơi xung quanh: http: // flavius. clickgarden.net/random-hsb-bg-readable-text/test.ai