A 60-30-10 szabály: így oszd el a színeket a weboldaladon

A legtöbb amatőr weboldal nem a csúnya színek miatt rossz, hanem mert túl sok helyen használja őket. Minden szekció más hátteret kap, a címsorok színesek, a linkek színesek, a gombok színesek, és a végén semmi nem tűnik ki. A 60-30-10 szabály erre ad egyszerű kapaszkodót.

Mit mond a szabály?

A 60-30-10 a belsőépítészetből ered: egy szobában a felület 60%-a az alapszín (falak), 30%-a a másodlagos szín (bútorok, függöny), 10%-a pedig a kiemelés (párnák, kiegészítők). Weboldalra lefordítva:

• 60% – alapszín: a háttér és a nagy, nyugodt felületek. Szinte mindig semleges: fehér, törtfehér, világosszürke, sötét módban mélyszürke.
• 30% – másodlagos szín: a szöveg, a fejléc és a lábléc, a kártyák, a váltakozó szekcióhátterek. Ez adja az oldal karakterét és szerkezetét.
• 10% – kiemelő szín: a gombok, a fontos linkek, a címkék, egy-egy kiemelt szó. Ez a márkaszín legélénkebb árnyalata.

Ezen az oldalon is így van: a háttér világos (60%), a szöveg és a sötét blokkok közel feketék (30%), a gombok és a jelölések magentaszínűek (10%).

Miért működik?

A szem azt veszi észre először, ami eltér a környezetétől. Ha a kiemelő szín ritka, akkor minden előfordulása jelentést hordoz: „ide kattints”, „ez fontos”. Ha mindenhol ott van, elveszíti ezt a szerepét. A 10% tehát nem esztétikai, hanem konverziós kérdés: az ajánlatkérés gombjának kell a legerősebb pontnak lennie a képernyőn.

A 60%-os nyugodt alap közben az olvasást segíti. Hosszú szöveget semleges háttéren a legkényelmesebb olvasni, és a tartalom (képek, termékek) is jobban érvényesül.

Gyakori hibák

A kiemelő szín mindenhol

Színes címsorok, színes ikonok, színes keretek és színes gombok egyszerre. Az eredmény: a gomb beleolvad. Ha a márkaszín erős, használd takarékosan, a címsorok maradjanak sötétek.

Túl sok „egyenrangú” szín

Négy-öt különböző élénk szín azonos arányban. Ilyenkor nincs hierarchia. Ha több márkaszín van, az egyik legyen a kiemelő, a többi tompítva, felületként jelenjen meg.

Kontraszt helyett szín

A világosszürke szöveg fehér háttéren elegánsnak tűnik, de sokan nem tudják elolvasni. A WCAG 2.1 AA szerint a szöveg és a háttér között legalább 4,5:1 kontrasztarány kell, a nagy szövegnél, valamint a nem szöveges elemeknél (például egy beviteli mező kerete vagy egy ikon) legalább 3:1. A gomb felirata is szöveg, ezért a kiemelő színt úgy kell megválasztani, hogy a fehér felirat 4,5:1 kontraszttal olvasható legyen rajta.

Elfelejtett sötét mód

Ha az oldalnak van sötét módja, ott is érvényes az arány, csak megfordul: a 60% a sötét háttér, a 30% a világos szöveg. A kiemelő színt gyakran világosítani kell, hogy a sötét háttéren is elég kontrasztos legyen.

Szabály vagy ajánlás?

Ajánlás. Nem kell pixelre kimérni, és egy fotós portfólió vagy egy gyerekprogram oldala bátran eltérhet tőle. Kiindulópontnak viszont szinte mindig jó, és ha egy oldal „valahogy zavaros”, az első, amit érdemes megnézni: hány helyen szerepel a kiemelő szín.

Hogyan kerül ez a gyakorlatba?

A színeket nem oldalanként választjuk, hanem egyszer, a design systemben rögzítjük: melyik a háttér, a felület, a szöveg és a kiemelés színe, és melyik komponens melyiket használja. Így a 60-30-10 nem a szerkesztő fegyelmén múlik, hanem a témába van építve.

Ha még nincs kiforrott színpalettád, a mini arculatban ezt is megkapod, webre és nyomtatásra, ellenőrzött kontraszttal.