Hjørner, streger, skygger

Hjørner

Designsystemets hjørner er med til at skabe visuel genkendelse samt til at lede brugerens opmærksomhed.

Lille og mellem runding anvendes afhængigt af komponentens størrelse. Som en tommelfingerregel anvendes 8px på komponenter, der er 40px og større. Fuld runding anvendes kun på elementer, brugeren kan interagere med, f.eks. trinindikator, faneblade og paginering.

Streger

Fokusstreg

Farve: #454545

Tykkelse: 3px

Denne streg gør det tydeligt, hvilket interaktivt element, der har fokus. En tydelig fokusstreg med tilstrækkelig farvekontrast er afgørende for brugere, der navigerer med tastatur.

Meningsbærende streger (kontrast over 1:3)

Farve: #8E8E8E

Brug denne streg, når stregens visuelle afgrænsning er afgørende for, at brugeren kan se og forstå komponenten. Eksempelvis skal interaktive elementer såsom inputfelter have tilstrækkelig kontrast, før alle seende brugere kan se og forstå, at der er tale om et inputfelt.

Horizontal ruler <hr> anvender denne stregfarve.

Dekorative streger (kontrast under 1:3)

Farve: #BFBFBF

Farve: #DCDCDC

Dekorative streger har lav kontrastværdi. Brug kun disse streger, når brugeren kan se og forstå komponenten helt uden stregen, dvs. kraft af generelt layout og afstande/luft om komponenten. Eksempelvis kan tabeller forstås uden streger, eftersom den grafiske opsætning i sig selv er nok til, at brugerne kan læse og forstå tabellen.

Inden du anvender dekorative streger, så overvej, om dit design kan holdes mere enkelt fx ved i stedet at nøjes med mere afstand mellem dine komponenter.

Skygger

Det Fælles Designsystem anvender skygger til at visualisere dybde på skærmen. Skygger anvendes kun til elementer, der lægger sig oven på andre elementer i brugergrænsefladen. Helt grundlæggende ligger elementer med den store skygge øverst, derefter kommer den lille skygge, og nederst resten af brugergrænsefladen uden skygge.

Vær opmærksom på, at skyggen er relativ til konteksten. Fx vil en tooltip, der åbnes inde i en modal med stor skygge, fortsat have den lille skygge.

Referencer

• W3C (WCAG 2.1): Understanding SC 1.4.11: Non-text Contrast (Level AA)