Chcę pokazać kilka zdjęć takich jak ten przykład
Kolor wypełnienia jest określany przez pole w bazie danych z kolorem szesnastkowym (np .: ClassX -> Color: # 66FFFF). Teraz chcę pokazać dane nad wypełnieniem wybranym kolorem (jak na powyższym obrazku), ale muszę wiedzieć, czy kolor jest ciemny, czy jasny, więc wiem, czy słowa powinny być białe lub czarne. Czy jest jakiś sposób? tks
Odpowiedzi:
Opierając się na mojej odpowiedzi na podobne pytanie .
Musisz podzielić kod szesnastkowy na 3 części, aby uzyskać indywidualne intensywności czerwony, zielony i niebieski. Każda 2 cyfra kodu reprezentuje wartość w zapisie szesnastkowym (podstawa 16). Nie będę tutaj wchodził w szczegóły konwersji, można je łatwo sprawdzić.
Po uzyskaniu intensywności dla poszczególnych kolorów możesz określić ogólną intensywność koloru i wybrać odpowiedni tekst.
Próg 186 jest oparty na teorii, ale można go dostosować do smaku. W oparciu o komentarze poniżej próg 150 może działać lepiej dla Ciebie.
Edycja: Powyższe jest proste i działa dość dobrze i wydaje się mieć dobrą akceptację tutaj w StackOverflow. Jednak jeden z poniższych komentarzy pokazuje, że w niektórych okolicznościach może prowadzić do niezgodności z wytycznymi W3C. Otrzymuję zmodyfikowaną formę, która zawsze wybiera najwyższy kontrast w oparciu o wytyczne. Jeśli nie musisz przestrzegać reguł W3C, trzymałbym się prostszej formuły powyżej.
Wzór podany dla kontrastu w Zaleceniach W3C jest taki
(L1 + 0.05) / (L2 + 0.05)
, w którymL1
luminancja jest najjaśniejszym kolorem iL2
jest luminancją najciemniejszego w skali od 0,0 do 1,0. Luminancja czerni wynosi 0,0, a biel 1,0, więc zastąpienie tych wartości pozwala określić tę o najwyższym kontraście. Jeśli kontrast czerni jest większy niż kontrast bieli, użyj czerni, w przeciwnym razie użyj bieli. Biorąc pod uwagę luminancję koloru, który testujesz, gdyL
test staje się:Upraszcza to algebraicznie do:
Lub w przybliżeniu:
Pozostało tylko obliczyć
L
. Ta formuła jest również podana w wytycznych i wygląda na to, że konwersja z sRGB na liniowy RGB następuje zgodnie z zaleceniem ITU-R BT.709 dla luminancji.Próg 0,179 nie powinien zostać zmieniony, ponieważ jest powiązany z wytycznymi W3C. Jeśli wyniki Ci się nie podobają, wypróbuj powyższą prostszą formułę.
źródło
#D6B508
wartość 171, stąd biały kontrast. Kontrast powinien być jednak czarny (potwierdzony tutaj: webaim.org/resources/contrastchecker )Nie przypisuję sobie tego kodu, ponieważ nie jest on mój, ale zostawiam go tutaj, aby inni mogli szybko znaleźć w przyszłości:
Na podstawie odpowiedzi Mark Ransoms, oto fragment kodu dla prostej wersji:
a oto fragment kodu dla wersji zaawansowanej:
Aby z nich skorzystać, wystarczy zadzwonić:
Również dzięki
Alx
ichetstone
.źródło
isDark(bgColor)
Moje użycie jest wtedy'color': isDark(color)?'white':'black'
Co powiesz na to (kod JavaScript)?
źródło
Oprócz rozwiązań arytmetycznych możliwe jest również użycie sieci neuronowej AI. Zaletą jest to, że możesz dostosować go do własnych upodobań i potrzeb (tj. Białawy tekst na jasnych nasyconych czerwieniach wygląda dobrze i jest tak samo czytelny jak czarny).
Oto fajne demo Javascript ilustrujące tę koncepcję. Możesz również wygenerować własną formułę JS bezpośrednio w wersji demonstracyjnej.
https://harthur.github.io/brain/
Poniżej znajdują się wykresy, które pomogły mi rozwiązać problem . Na pierwszym wykresie jasność wynosi stałą 128, a odcień i nasycenie są różne. Na drugim wykresie nasycenie wynosi stałą 255, a odcień i jasność różnią się.
źródło
Oto moje rozwiązanie w Javie dla Androida:
źródło
Na podstawie odpowiedzi @MarkRansom stworzyłem skrypt PHP, który można znaleźć tutaj:
źródło
To jest szybka wersja odpowiedzi Marka Ransoma jako rozszerzenie UIColor
źródło
To tylko przykład, który zmieni kolor zaznaczenia SVG po kliknięciu elementu. Ustawi kolor zaznaczenia na czarny lub biały na podstawie koloru tła klikniętego elementu.
https://gist.github.com/dcondrey/183971f17808e9277572
źródło
Używam tej funkcji JavaScript do konwersji
rgb
/rgba
do'white'
lub'black'
.Możesz wprowadzić dowolny z tych formatów i wyświetli on
'black'
lub'white'
rgb(255,255,255)
rgba(255,255,255,0.1)
color:rgba(255,255,255,0.1)
255,255,255,0.1
źródło
Szczegółowa odpowiedź Marka działa świetnie. Oto implementacja w javascript:
Następnie można wywołać tę funkcję,
lum([111, 22, 255])
aby uzyskać biały lub czarny.źródło
Nigdy nie robiłem czegoś takiego, ale co z pisaniem funkcji sprawdzającej wartości każdego z kolorów w stosunku do mediany koloru Hex 7F (FF / 2). Jeśli dwa z trzech kolorów są większe niż 7F, oznacza to, że pracujesz z ciemniejszym kolorem.
źródło
Na podstawie różnych danych wejściowych z linku Zmień kolor pierwszego planu na czarny lub biały w zależności od tła i tego wątku, stworzyłem klasę rozszerzenia dla Koloru, która zapewnia wymagane kolory kontrastu.
Kod wygląda następująco:
źródło
Jeśli podobnie jak ja szukałeś wersji RGBA, która uwzględnia alfa, oto ta, która działa naprawdę dobrze, aby mieć wysoki kontrast.
źródło
To jest wersja R odpowiedzi Marka Ransoma, wykorzystująca tylko podstawową R.
źródło
@SoBiT, patrzyłem na twoją odpowiedź, która wygląda dobrze, ale jest w tym mały błąd. Twoja funkcja hexToG i hextoB wymagają drobnej edycji. Ostatnią liczbą w substr jest długość łańcucha, dlatego w tym przypadku powinna ona wynosić „2”, a nie 4 lub 6.
źródło
MNIEJ ma fajną
contrast()
funkcję, która działała dla mnie ładnie, patrz http://lesscss.org/functions/#color-operations-contrast„Wybierz, który z dwóch kolorów zapewnia największy kontrast z innym. Jest to przydatne, aby zapewnić czytelność koloru na tle, co jest również przydatne dla zapewnienia zgodności z dostępnością. Ta funkcja działa tak samo, jak funkcja kontrastu w Kompasie dla SASS. Zgodnie z WCAG 2.0 kolory są porównywane przy użyciu wartości luma z korekcją gamma, a nie ich lekkości. ”
Przykład:
Wynik:
źródło
Od szesnastkowego do czarnego lub białego:
źródło
Kod wersji celu c dla systemu iOS na podstawie odpowiedzi Marka:
źródło
Co powiesz na testowanie ze wszystkimi 24-bitowymi kolorami?
Należy pamiętać, że metoda YIQ zwróci minimalny współczynnik kontrastu 1,9: 1, który nie przejdzie testów AA i AAA WCAG2.0, przy założeniu progu 128.
W przypadku metody W3C zwróci minimalny współczynnik kontrastu 4,58: 1, który przejdzie testy AA i AAA dla dużego tekstu, a test AA dla małego tekstu, nie przejdzie testu AAA dla małego tekstu dla każdego koloru.
źródło
Oto moja własna metoda, z której korzystałem i jak dotąd nie miałem problemu 😄
źródło
Zrobiłem moduł Python, aby wybrać kolor pierwszego planu na podstawie wartości RGB lub HEX koloru tła: https://github.com/azaitsev/foreground
źródło
Oto mój kod dla Java Swing oparty na niesamowitej odpowiedzi Marka:
źródło