Tilgængelighedslovgivningen gør det særligt vigtigt at være opmærksom på de farver, du vælger til din hjemmeside. Du skal nemlig sørge for at bruge kontrastforhold, som tager hensyn til farveblinde og svagtseende.
Som vi nævner i ”Guide i webtilgængelighed - designet af din hjemmeside”, skal kontrastforholdene på din hjemmeside mindst være 4,5:1 (med enkelte undtagelser).
I denne guide vejleder vi dig i de farveindstillinger, der findes i backend, og vi viser dig, hvordan du tjekker, om dine farvekontraster lever op til kravene.
Gør de ikke det, fortæller vi også, hvordan du kan justere farverne.
Farver
Hjemmesiden har masser af farvemuligheder, og det er derfor vigtigt at udvælge farver, der har et godt kontrastforhold. F.eks. sort tekst på hvid baggrund.
Vi gennemgår i denne guide:
- Hjemmesidens 4 forskellige grundfarver
- Farvedesign til kasser med indhold
- Farvedesign til typografier, såsom overskrifter, brødtekst, links og menuen
- Bånd med baggrundsfarve
Men først får du en gennemgang af, hvordan du tjekker, om dine farver allerede lever op til kravene.
Hvilket værktøj kan jeg bruge til at tjekke min kontrast?
Når du skal tjekke, om dine farvekontraster lever op til tilgængelighedskravene, anbefaler vi dig at bruge Monsido Color Contrast Checker. Det er en farvekodelæser, som vurderer, om kontrastforholdet er stort nok.
I det følgende vil vi vejlede dig i, hvordan du bruger værktøjet:
- Gå ind på Monsido farvekodelæser.
I venstre side ser du farveskalaerne, hvor du kan vælge din farve eller indtaste den farve, du bruger på hjemmesiden.
I toppen kan du se, om farvevalget er godkendt indenfor AA og AAA-standarden. Din hjemmeside skal leve op til AA standarden.
I midten kan du se valget af dine farver med tekst på baggrund.
I bunden ser du en skala med kontrastforholdet. Ved at ændre farverne vil kontrastforholdet ændre sig.
- Din hjemmeside bruger Hex som farvekode. Kopier derfor Hex-koden for din baggrundsfarve og indsæt den i det første felt på den øverste farveskala (se nedenfor). Derefter kopierer du din tekstfarve ind i den anden farveskala (se nedenfor).
- Du vil med det samme kunne se, om resultatet følger standarderne i toppen og bunden af siden. Hvis resultatet ikke lever op til kravene, vil du kunne rette lidt i de to farveskalaer til venstre, indtil du får vist grønne flueben på den øverste linje (WCAG AA).
- Derefter kan du kopiere Hex-koden fra de to skalaer og indsætte dem på din hjemmeside.
Hjemmesidens fire forskellige grundfarver
Din hjemmeside er bygget op omkring fire forskellige grundfarver, som bliver brugt i menu, bund, kalender og forskellige bokse.
Du finder farverne under Design -> Udseende (se nedenfor).
Alternativfarve
Denne bruges på headeren i toppen, footeren i bunden, kalenderen og som valgmulighed i forskellige andre elementer. I kalenderen er skriften hvid, så det er vigtigt, at I ikke vælger en for lys baggrundsfarve, da det vil blive svært at se og derfor ikke vil leve op til kravene.
Grundfarve
Denne bliver brugt i nogle kalendervisninger, ved billeder med overskrift og som valgmulighed i forskellige andre elementer.
Special 1
Er en supplementsfarve, som kun bruges som en valgmulighed i forskellige elementer.
Special 2
Er den sekundære supplementsfarve. Den bliver brugt under footeren - hvor jeres Cookie-politik befinder sig - og som en valgmulighed i forskellige elementer.
Brug Monsido farvekodelæser til at hjælpe dig med dine valg.
Farvedesign til kasse med indhold
På hjemmesiden har du mulighed for at oprette en kasse med indhold. Ved sådan en kasse skal du foretage tre forskellige farvevalg - for kassen, overskriften og brødteksten (se nedenfor).
Boks
Her kan du styre rammens farve og tykkelse og vælge, hvilken baggrundsfarve kassen skal have.
Overskrift
Her styrer du skrifttype, størrelse og farve på overskriften. Overskriften har også en baggrundsfarve. Vi anbefaler, at du vælger den samme farve som baggrundsfarven på kassen.
Brødtekst
Her kan du vælge skrifttypen, størrelsen og farven på din brødtekst. Det er vigtigt, at du finder en farve, som står i god kontrast til kassens baggrundsfarve, så det bliver letlæseligt.
Brug Monsido farvekodelæser til at hjælpe dig med dine valg.
Farve design til typografi: Menu, overskrifter, brødtekst og links
Menu
I menuindstillingerne under punktet udseende kan du styre skriften på menuen: valg af skrifttype, farve, størrelse, placering, farve på det aktive menupunkt og farve, når musen er over et menupunkt.
Farven, du vælger her, skal kunne læses på din hjemmesides grundfarve (primær).
Overskrift
Systemet har mulighed for tre forskellige overskrifter. Ved alle tre overskrifter kan du indstille skrifttypen, størrelsen og farven.
Det er en god idé at bruge den samme farve og skrifttype til alle overskrifterne på din hjemmeside for at skabe et ens udtryk.
Overskrifterne kan med fordel have forskellige størrelser, hvor overskrift 1 er den største.
Brødtekst
Det er den tekst, som ses i alle tekstelementerne. Her har du de samme indstillingsmuligheder som ved overskriften: Skrifttype, størrelse og farve.
Links
Har kan du styre den generelle linkfarve, samt den farve linket får, når besøgende på hjemmesiden kører musen over linket.
Det er en god idé at vælge en farve, som kan ses både i din kasses baggrund og på hjemmesidens baggrund.
Husk, at dine links også skal være understreget og/eller med fed for at leve op til tilgængelighedskravene.
Brug Monsido farvekodelæser til at hjælpe dig med dine valg.
Bånd med baggrundsfarve
Det sidste indholdselement på hjemmesiden, som du kan bestemme farven på, er båndet, som du har mulighed for at indsætte både på forsiden og på undersiderne.
I det farvede bånd kan du placere dine indholdselementer.
Du kan se et eksempel nedenfor:
Farven på båndet indstilles her:
Her er det vigtigt, at du vælger en farve, som kan læses sammen med din brødtekst.
Brug Monsido farvekodelæser til at hjælpe dig med dine valg.
Kommentarer
0 kommentarer
Log ind for at kommentere.