Dlaczego nie użyć czystej czerni (# 000) i czystej bieli (#FFF)?


17

Nowy górny pasek wymiany stosów mówi:

Pierwszą rzeczą, którą zauważysz, jest to, że jest naprawdę czarna* .

* Jin zauważa, że ​​technicznie nie jest całkiem czarny: to # 212121.

W swoim CSS widzę,

background: #2f2f2f;
background: rgba(0, 0, 0, 0.8);

Dlaczego nie „naprawdę czarny”: dlaczego „nie całkiem czarny” jest lepszy?

Podobnie w pozostałej części tła widzę coś takiego,

background: #fdfdfd

Dlaczego nie czysta biel?

Nie pytam konkretnie o StackExchange - mam na myśli to, czy jest to dobra ogólna zasada dla dowolnej / wszystkich stron internetowych: kiedy specyfikacja projektu wydaje się prosić o czerń lub biel, czy powinienem używać prawie czerni i bieli zamiast naprawdę czarny i biały?

Czy ta „reguła” ma zastosowanie również do innych kolorów (jaka dokładnie jest reguła)?

Czy reguła zależy od urządzenia?


Google zawsze używa czysto białego tła.
Pacerier

Odpowiedzi:


18

Krótko mówiąc, jest przyjemny dla oczu;

„Mówiąc wprost, kontrast jest różnicą między dwoma kolorami. Na stronie internetowej wymagany kontrast różni się w zależności od części strony. Zwykle potrzebujesz wysokiego kontrastu między tekstem a kolorem tła. Jednak zbyt wysoki kontrast między elementami projektu może wywołać niepokój i bałagan. Czerń i biel tworzą najwyższy możliwy kontrast ”. -Cytuj stąd

Jest to świetna strona zawierająca sugestie / przykłady kolorów UX i teorię. I omawia kontrast różnych kolorów na tle, nawet podając kod szesnastkowy, co jest dość przydatne.

Omówiono tu także kontrast i balans kolorów .

Wydaje się to również być stylem, który zyskuje na popularności, ponieważ niższy kontrast między bckgroundami sprawia, że ​​kontrast tekstu jest nieco ładniejszy (moim zdaniem), jak widać z kolorem tu i tutaj. Te próbki służą raczej do patrzenia na kolor niż na jego zawartość w warunki tego, co chcę tutaj przekazać.

Niekoniecznie jest to reguła raczej preferencji lub stylu. Jest bardziej zależny od zawartości niż od urządzenia. Chodzi o to, gdzie chcesz mieć największy nacisk lub skupienie - gdziekolwiek to się dzieje, tam, gdzie powinien być największy kontrast. W przypadku StackExchange chodzi przede wszystkim o pytania i odpowiedzi, więc ciało jest tam, gdzie najbardziej kontrastuje, i tam, gdzie jest najbardziej istotne.

Powodzenia w wyborze kolorów w przyszłości, to kolejna uwaga, którą należy wziąć pod uwagę: D


1
Zdaję sobie sprawę, że odpowiedzi tutaj muszą być krótkie, więc dziękuję za skorzystanie z twoich linków do dostarczenia linków do bardziej szczegółowej lektury (jestem kompletnym nowicjuszem).
ChrisW

Cieszę się, że mogę pomóc (choć trochę). Odpowiedź na to pytanie składa się z 3 głównych elementów: teorii koloru, preferencji / stylu i projektu UX. Niemożliwe jest pokrycie każdego 100% w jednej odpowiedzi (jak już wspomniałeś). Chciałem tylko dać ci krótką odpowiedź i pomysł na to, co odkrywać.
Jenna,

6

Czysty czarny górny pasek wyglądałby bardzo uderzająco na białym tle używanym przez wiele stron internetowych, co jest złe, ponieważ należy skupić się na treści, a nie przyciągać wzrok do góry ekranu. Jaśniejsze (szare) zmniejsza kontrast między górnym paskiem a tłem ciała.

Jednak szare tło na czymkolwiek utrudnia czytelność, zmniejszając możliwy kontrast między tekstem a tłem. Ludzkie oko jest najbardziej wrażliwe na różnice w jasności, więc wybór 50% szarości oznacza, że ​​bez względu na wybrany kolor tekstu, używasz co najwyżej połowy różnicy jasności, jaką może wytworzyć ekran użytkownika.

Dlatego myślę, że wybór 80% czerni jest kompromisem między zmniejszeniem wstrząsów górnego paska a zachowaniem kontrastu w nim.

Na tekście, na ogół nie chcą używać czystej czerni na jasnym tle, w celu zwiększenia kontrastu, a tym samym czytelność. (Dotyczy to zarówno ekranu, jak i wydruku.) Zauważ, że kolor tła korpusu różni się od czystej bieli tylko odrobinę. Ogólnie rzecz biorąc, strony internetowe często wybierają tła, które są bardzo lekko złamane bieli. Jednym z celów jest sprawienie, aby strona wydawała się cieplejsza lub chłodniejsza, wybierając jasnoróżowy lub niebieski (tutaj jest jednak neutralny szary).


Na tej stronie nawet div.post-textkolor pierwszego planu jest color: #111;zamiast czystej czerni. Dlaczego nie pozostawić czytelności lub jasności ekranu domyślnej przeglądarce / urządzeniu / użytkownikowi w celu optymalizacji?
ChrisW

0

Moim zdaniem ... Tylko moda, trendy.

Jeśli użytkownik uważa, że ​​strony raniły mu oczy, może on po prostu dostosować jasność ekranu. W urządzeniach mobilnych ludzie robią to cały czas.

Istnieje tendencja do tworzenia „starych” obrazów. Niskie nasycenie, wyprane.

Zmyte spojrzenie może sprawić, że najciemniejszy i / lub biały punkt będzie szary.

https://www.google.com/search?q=vintage+photos&client=firefox-b-ab&dcr=0&source=lnms&tbm=isch&sa=X&ved=0ahUKEwjb04iVr6vYAhUj94MKHQ3nBfQQ_AUICigB&biw=1920&bih

Nie tylko na zdjęciach, ale także na filmach ... w tym filmach „szczęśliwych”.

https://www.youtube.com/watch?v=9HjrFnKEE8w

To prawda, że ​​wiele kontrastów może być nieprzyjemne, szczególnie ciemne tło z białym tekstem ... Pamiętaj o projektowaniu stron internetowych z lat 90. , z czarnym tłem i przesyconymi animowanymi gifami ...

Trendem jest posiadanie bardziej „przyjaznych” stron internetowych, bardziej „intymnych”, więc jest to miękkość. Może również nadać bardziej „kinowy” wygląd, zamiast „telewizyjnego”.

Jednym z przeciwnych trendów w obrazach jest na przykład „ wygląd Hdri ” lub styl draggan, który akcentuje kontrast i mikro kontrast.

W niektórych przypadkach wyprany obraz może nadać wygląd bardziej wewnętrznego zakresu dynamicznego, w porównaniu z mapowanym tonem, wzmocnionego kontrastu rzeczywistego obrazu o wysokim zakresie dynamicznym.


Również jeśli cała paleta jest w jakiś sposób ograniczona, możesz oszukać autobalance swojego oka. Prowadząc do wyższego zakresu dynamicznego. Malarze używają tego przez cały czas.
joojaa

1
To po prostu nie jest poprawna odpowiedź. Nauka wokół Natomiast stosując czarny, stosując biały, tylko że - nauka, a nie opinia.
Mike Earley
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.