Веб-дизайндағы қарама-қайшылықты фон мен түстердің түстерін пайдалану

Веб-сайттың оқылуын және пайдаланушы тәжірибесін тиісті контрастпен жақсартыңыз

Контраст кез-келген веб-сайттың дизайнын жетістіктерінде маңызды рөл атқарады. Осы сайттың типографиясынан , сайтта қолданылған бейнелерге, алдыңғы қатарлы элементтер мен фон түстері арасындағы айырмашылыққа дейін - сапалы пайдаланушы тәжірибесін және ұзақ мерзімді сайт табысын қамтамасыз ету үшін жақсы жобаланған сайттың осы барлық аумақтарда барабар контраст болуы керек.

Төмен контраст нашар оқу тәжірибесіне тең

Керісінше тым төмен веб-сайттар оқуға және пайдалануға қиын болуы мүмкін, бұл кез-келген сайттың табысына кері әсерін тигізеді. Түс контрастынының нашар түрлері жиі анықтауға оңай. Әдетте веб-браузерде көрсетілетін бетті қарап шығып, мәтіннің нашар түстер таңдауына байланысты оқуға қиын екенін көре аласыз. Дегенмен, қандай түстер бір-бірімен жақсы жұмыс істемейтінін анықтау оңай болуы мүмкін, бірақ, басқалардан айырмашылығы қандай түстер жақсы жұмыс істейтінін анықтау өте қиын болуы мүмкін. Сіз жұмыс істемейтін шығарсыз, бірақ жұмыс істейтінді қалай анықтайсыз? Бұл мақаланың суреті әртүрлі түстерді және олардың алдыңғы және артқы өң түстері ретінде қарама-қарсы екенін көрсетуге көмектесуі керек. Сіз кейбір «жақсы» жұптастыруды және кейбір «нашар» жұптастыруды көре аласыз, бұл сіздің жобаларыңызда дұрыс түсті таңдау жасауға көмектеседі.

Контрастқа қатысты

Айта кету керек, контраст фонда қаншалықты жарқын болатындығын білуден де артық. Жоғарыда айтылған суретте көргеніңіздей, осы түстердің кейбіреулері өте жарқын және қара түсте, мысалы, қара түске боялған көрінеді, бірақ мен оны әлі де нашар контраст ретінде белгіледім. Мен мұны істедім, себебі жарқын болуы мүмкін, бірақ түс комбинациясы мәтінді оқуды қиындатады. Қара фонда барлық көк мәтіндерде бетті жасасаңыз, сіздің оқырмандарыңыз өте жылдам көрінеді. Нақ сондықтан да контраст тек қара және ақ емес (иә, бұл пунт жоспарланған). Контрасты үшін ережелер мен ең жақсы әдістер бар, бірақ дизайнер ретінде сіз өзіңіздің нақты жағдайда жұмыс істейтініне көз жеткізу үшін әрдайым осы ережелерді бағалағаныңыз жөн.

Түстерді таңдау

Контраст - веб-сайт дизайны үшін түстерді таңдау кезінде ескеру керек факторлардың бірі ғана, бірақ бұл маңызды нәрсе. Түстерді таңдағанда, компания үшін бренд стандарттарын есіңізде сақтаңыз, сонымен қатар ұйым брендінің нұсқауларына сәйкес келуі мүмкін болса, түс бояғыштарын шешуге дайын болыңыз, онлайн режимінде жұмыс істемеңіз. Мысалы, әрқашан веб-сайттарда тиімді пайдалану үшін өте сары және жарқын жасыл түсті. Егер бұл түстер компания брендінің нұсқауларында болса, олар, ең алдымен, ерекше түстер ретінде қолданылуы керек, өйткені бұл екеуімен де жақсы контрастты табу қиын.

Сол сияқты, сіздің брэнд түстері қара және ақ болса, бұл үлкен контрастты білдіреді, бірақ мәтіннің ұзын саны бар сайт бар болса, ақ мәтінмен қара фон бар, өте қатты оқитын болады. Ақ-қара түстің арасындағы айырмашылық өте жақсы, қара түсті фондағы ақ мәтін ұзын өтпелерге көздің шиеленісін тудырады. Бұл жағдайда ақ түсте қара мәтінді пайдалану үшін түстерді инвертируем едім. Бұл көрнекі түрде қызығушылық танытпауы мүмкін, бірақ сіз одан да жақсы контраст таба алмайсыз!

Онлайн құралдар

Өзіңіздің дизайныңыздың мағынасына қоса, сіздің сайтыңыздың түс таңдауын тексеру үшін пайдалануға болатын кейбір онлайн құралдары бар.

CheckMyColours.com сайттағы барлық түстерді тексереді және беттегі элементтер арасындағы контраст коэффициентіне есеп береді.

Сонымен қатар, түс таңдау туралы ойлағанда, веб-сайттың қол жетімділігі мен түстің соқырлық нысандары бар адамдарға назар аударыңыз. WebAIM.org бұл мүмкіндікті пайдалана алады, мысалы, WCAG нұсқауларына қарсы таңдауларды сынайтын ContrastChecker.com.