Kontrast

Vi har i tidigare delar av denna sektion sett hur vi kan välja ut färgar som kompletterar varann och passar ihop. Ytterligare en aspekt vi kan använda för att underlätta läsbarhet och få till rätt känsla är att anpassa kontrasten mellan färgarna. Vi vill hamna på en lagom nivå, precis som vi såg i Färg på text.

I exemplet nedan syns tre olika boxar med CSS klasserna .too-high, .lagom och .too-high. .too-high blir oerhört skrikig, men kan fungera om man designar en hemsida för discount varor iallafall om det används sparsamt. .lagom hamnar rätt där den introducerar färg till bakgrund, men samtidigt är skillnaden mellan bakgrunden och texten inte för liten, som exemplet .too-low visar prov på. I exemplet too-low hade det varit bättre att använda vit eller en ljus färg på texten.

See the Pen on CodePen.

Kontrast

#Revision history

  • 2018-10-10: (A, efo) Första versionen.

Document source.