Komplementarne boje: kako ih odabrati i provjeriti

Komplementarne boje nalaze se jedna nasuprot drugoj na krugu boja. Na poznatom slikarskom krugu to su, primjerice, crvena i zelena, plava i narančasta te žuta i ljubičasta. Takav par može biti dobra polazna točka za paletu brenda, ali položaj na krugu ne govori je li tekst čitljiv, ostaje li značenje jasno bez razlikovanja boja ni kako će boja izgledati u tisku.

Zato nije dovoljno zapisati "plava i narančasta". Svaki od tih naziva obuhvaća mnogo nijansi koje mogu biti svjetlije, tamnije, prigušene ili zasićene. Odabrani krug ili digitalni alat predlaže konkretan par, a Vi zatim trebate provjeriti točne vrijednosti u svakoj stvarnoj ulozi.

Krug boja predlaže odnos, a ne gotovu paletu

Ako već imate glavnu boju brenda, pronađite njezin hex kod i unesite ga u digitalni krug boja, primjerice Adobe Color. Odaberite komplementarnu shemu i spremite kod boje na suprotnoj strani kao radni par za provjeru. Ako glavnu boju još nemate, prvo je odaberite uz vodič za odabir boje brenda ili taj korak prepustite dizajneru.

Dvije boje mogu biti komplementarne i svejedno biti loš izbor za tekst i pozadinu. Drugi par može zadovoljiti potreban omjer kontrasta ako se njegove točne vrijednosti dovoljno razlikuju. Presudan je izmjereni odnos stvarne boje teksta i stvarne pozadine, zajedno s veličinom i debljinom teksta.

Isto vrijedi za omjer površina. Često je praktično pustiti jednu boju da nosi veće površine, a drugu koristiti kao naglasnu boju. To je početna odluka za slaganje rasporeda, a ne pravilo poput 90 prema 10. Ravnoteža ovisi o odabranim nijansama, veličini obojenih površina, sadržaju i mediju. Provjerite gotov raspored prije nego što odredite konačne uloge.

1. Zapišite točne vrijednosti i namjenu

Za prikaz na zaslonu zapišite hex ili RGB vrijednost svake boje. Hex je kod koji počinje znakom #, primjerice #1F4E79. Možete ga pronaći u alatu u kojem je dizajn izrađen, u postavkama web stranice ili ga zatražiti od dizajnera ili osobe koja održava web.

Zatim popunite uloge koje stvarno trebate:

Paleta nije provjerena dok za svaki važan tekst, ikonu ili drugi element ne zapišete njegovu boju i boju pozadine. Jedan rezultat ne vrijedi automatski za sve primjene iste boje.

2. Izmjerite kontrast teksta i pozadine

WCAG je standard koji se koristi pri provjeri pristupačnosti web sadržaja. Za razinu AA kriterij 1.4.3 traži omjer kontrasta od najmanje 4,5 : 1 za običan tekst i 3 : 1 za veliki tekst. Broj je rezultat koji prikazuje alat za provjeru kontrasta. Ne morate ga računati ručno.

U alat unesite točnu boju teksta i točnu boju pozadine za svaku kombinaciju koju koristite. W3C objašnjava postupak i razliku između ručne procjene i mjerenja u uputama za provjeru kontrasta, a pragove i iznimke navodi u objašnjenju kriterija 1.4.3.

Ako kombinacija ne prolazi, možete:

• posvijetliti ili potamniti jednu boju
• premjestiti tekst na neutralnu pozadinu
• zadržati naglasnu boju, ali promijeniti boju teksta

Zamjena jedne komplementarne nijanse drugom ne jamči bolji omjer. Ponovite mjerenje nakon svake promjene.

Tekst koji je dio logotipa ili naziva brenda izuzet je iz tog konkretnog WCAG kriterija. Iznimka se ne odnosi na običan tekst stranice, navigaciju, tekst gumba i ostale oznake sučelja. Ako ne možete potvrditi da tekst prema W3C definiciji pripada velikom tekstu, provjerite ga prema strožem omjeru za običan tekst. Veličinu i debljinu prikazanog teksta može Vam potvrditi dizajner ili osoba koja održava web.

Prolazak navedenog kriterija nije dokaz potpune usklađenosti s WCAG-om niti jamstvo da će sadržaj biti jednako čitljiv svakoj osobi.

3. Provjerite gumbe, ikone i grafikone

Tekst nije jedino mjesto na kojem je kontrast važan. Provjerite važan obrub polja, ikonu, oznaku stanja ili dio grafikona bez kojeg korisnik ne može prepoznati element ili razumjeti informaciju. Tamo gdje se WCAG kriterij 1.4.11 primjenjuje, potreban je omjer od najmanje 3 : 1 prema boji neposredno uz element. Detalji i primjeri nalaze se u W3C objašnjenju kontrasta netekstualnih elemenata.

To ne znači da svaki ukrasni obrub ili svaka ilustracija moraju zadovoljiti isti zahtjev. Ako nije jasno koji dio treba provjeriti ili primjenjuje li se kriterij, neka ga odredi dizajner, osoba koja održava web ili stručnjak za pristupačnost.

4. Provjerite ostaje li značenje bez boje

Dobar omjer kontrasta ne rješava situaciju u kojoj korisnik mora prepoznati baš crvenu ili zelenu boju da bi razumio poruku. WCAG kriterij 1.4.1 traži da boja ne bude jedini vizualni način prenošenja informacije, označavanja radnje ili razlikovanja važnog elementa.

Primjerice, pogrešku u obrascu nemojte označiti samo crvenim obrubom. Dodajte poruku i, gdje pomaže, ikonu. U grafikonu uz boje koristite oznake, uzorak ili oblik. Poveznicu u odlomku možete razlikovati podcrtavanjem, umjesto da se oslanjate samo na drugu boju. Više primjera daje W3C objašnjenje uporabe boje.

Prikaz u sivim tonovima i simulacija različitih načina raspoznavanja boja mogu pomoći pronaći mjesta na kojima se boje teško razlikuju. Ne potvrđuju da je potreban omjer kontrasta zadovoljen niti da informacija ima dodatnu oznaku, poput teksta ili ikone.

5. Testirajte stvaran raspored, ne samo uzorak palete

Uzorak s dvije obojene površine ne pokazuje kako će paleta izgledati u navigaciji, tekstu, obrascu, grafikonu ili gumbu. Provjerite stvarnu veličinu i debljinu teksta, sve važne kombinacije boje elementa i pozadine te stanja u kojima boja prenosi informaciju.

Ako jedna boja dominira, a druga služi kao naglasak, pogledajte usmjerava li naglasak pažnju na pravi element. Ako su površine podjednake, provjerite ostaje li sadržaj jasan. Nije potrebno zabraniti jednaku podjelu ili potpuno zasićene boje unaprijed. Odluku donesite prema stvarnom rasporedu i rezultatima provjere.

6. Zaslon i tisak provjeravajte odvojeno

Omjer kontrasta na web stranici računa se iz konkretne boje teksta ili drugog elementa i boje pozadine. Tisak ima drukčiji problem: rezultat ovisi o izlaznom uređaju, profilu, tinti, papiru i uvjetima gledanja. Neke RGB boje mogu biti izvan raspona koji određena kombinacija pisača i papira može reproducirati.

Pretvaranje hex vrijednosti u CMYK ili ispis na uredskom pisaču ne dokazuje kako će izgledati komercijalna naklada. Od tiskare zatražite upute za pripremu datoteke i profil koji odgovara planiranom uređaju i vrsti papira. Ako je točnost boje važna, odobrite probni otisak izrađen za namjeravani postupak, tintu i papir.

Program može pomoću izlaznog profila prikazati zaslonsku procjenu tiska, ali pouzdanost takvog prikaza ovisi o monitoru, profilima i uvjetima gledanja. Adobe objašnjava razliku između zaslonskog pregleda i probnog otiska u uputama za upravljanje bojama, a vezu profila pisača, uređaja, papira i raspona boja u uputama za tisak iz Photoshopa.

Kratak zapis za provjeru jednog para

Prije odobrenja palete sačuvajte ovaj zapis:

Krug boja pomaže pronaći početni par. Ovaj zapis pokazuje je li par prikladan za poslovnu primjenu za koju ste ga odabrali.

Mischka Studio može definirati uloge boja, vrijednosti za zaslon i tisak te pravila uporabe u sklopu izrade brenda i vizualnog identiteta. Konačnu pristupačnost treba provjeriti na stvarnom dizajnu, a tisak odobriti prema konkretnom proizvodnom postupku.