Aktiver Dark mode Deaktiver Dark mode

Få styr på kontrasterne på dit website og gør dit website mere tilgængeligt og brugervenligt

Få styr på kontrasterne på dit website og gør dit website mere tilgængeligt og brugervenligt

Forstå hvordan farvekontraster kan påvirke design, brugervenlighed og webtilgængelighed på dit website.

Farvekontraster er en vigtig del af brugervenligheden og tilgængeligheden. Kontrasten påvirker nogle brugeres evne til at opfatte den pågældende information.

Hvad er farvekontrast?

Farver, der differentierer sig fra hinanden er kontrastfarver. Hvor høj kontrast varierer alt efter hvor på farvehjulet de forskellige farver er placeret (se grafik af farvehjulet herunder). F.eks. er farver overfor hinanden – altså på den anden side af farvehjulet – med høj kontrast, hvorimod farver placeret ved siden af hinanden har en lav kontrast.

farvekontraster
Hvordan påvirker farvekontraster brugeroplevelsen på dit website?

Farvekontraster er en vigtig del, når vi snakker bruger- og webtilgængelighed 👨‍💻

For at sikre, at din tekst kan læses af alle skal være en høj kontrast mellem tekst farve og baggrund. Dette gælder ikke blot tekst på en ren baggrundsfarve, men også tekst på billede, ikoner og knapper mm. 🎨
Nogle gange er det ikke meget, der skal til førend din tekst enten bliver lettere eller sværere at læse og afkode.

farvekontraster eksempel

Nu tænker du måske: ”Jamen jeg kan da sagtens læse teksten ved den lave kontrast?” Alle der kan se, ser ting forskelligt. De fleste ser former og faconer ens, mens nuancer kan opfattes forskelligt. Dette kan f.eks. skyldes farveblindhed.

Hvordan vælger jeg så de rigtige farver?

Vi har tidligere skrevet et indlæg omkring farvepsykologi – og hvordan farver kan påvirke os. Farvers påvirkning er meget følelsesbetonede og afhænger af kultur, erfaring, minder mm. Når man skal vælge farver til sit website, så skal man altså ikke udelukkende baserer det ud fra personlige præferencer. Selvfølgelig skal det passe til din brand identitet, men vigtigst af alt skal det også være tilgængeligt.

Der findes forskellige værktøjer, der kan hjælpe dig med at tjekke om dine farvekontraster følger de retningslinjer, der er givet for tilgængelighed af webindhold (WCAG).

Gratis værktøjer til kontrast udregning

Brug disse værktøjer til hurtigt at tjekke om dit farveskema er brugervenligt og webtilgængeligt:

Contrast Checker

Gratis online værktøj med gråskala. Gråskalaen gør det nemt for dig, at tjekke hvorvidt dine tekster også kan læses af farveblinde.

WCAG-Contrast-checker-mozilla

WCAG Contrast Checker

Addon til firefox

Color Contrast Analyzer

Chrome extension

Vær sikker på at alle kan læse dine tekster og budskaber og giv dine brugere den bedst mulige oplevelse, når de navigerer rundt på dit website.

Del artikel: 
envelopephone-handsetchevron-downarrow-uparrow-leftarrow-right