Alle bør kunne lese teksten din.

Det er viktig at teksten er synlig og leselig. Hvis du vil at besøkende skal kunne forstå den, må de kunne lese den..

God tekstkontrast gjør at alle kan se teksten mot bakgrunnen den er plassert på.

Ikke alle ser fargen på samme måte. WCAG har definert spesifikke kontrastkrav i WCAG 2.1 AA-retningslinjer for å sikre at teksten er leselig for alle. Følg disse kravene og nyttige tips om kontrast for å løse eller forhindre kontrastproblemer.

Ally følger kontrastkravene for å verifisere om det er nok kontrast mellom tekstfarge og bakgrunnsfarge. Dårlig tekstkontrast er et stort problem. Store problemer påvirker tilgjengelighet, og krever oppmerksomhet.

Bruk Ally for å finne tekst med dårlig kontrast

Bruk Allys tilgjengelighetsrapport for å finne og løse tilgjengelighetsproblemer på siden din. Bruk lenken som er oppgitt for rapporten, og logg på. Åpne rapporten og se på listen over problemer i Tilgjengelighetsproblemer-tabellen.

Tilgjengelighetsproblemer-tabellen er både i Oversikt- og Domene-fanene. Start i Domene-fanen for å se problemer som er spesifikke for et domene. 

Det er et stort problem å ha tekst med dårlig kontrast. Bruk Stor-fanen i Tilgjengelighetsproblemer -tabellen for å se listen over store problemer. Velg problemer med kontrastproblemer.

Hvis du starter i Oversikt -fanen, velg problemet og deretter domenet med problemet.

Kontrastproblemer kan starte med Dokument eller HTML i listen.

I listen over kontrastproblemer i domenet kan du velge poengsum-indikatoren ved siden av et element med problemet. Innholdsredigeringsprogrammets tilbakemeldingspanel åpnes.

Forhåndsvis teksten med dårlig kontrast

Allys tilbakemeldingspanel viser deg en forhåndsvisning av innhold samt detaljert tilbakemelding og støtte for å hjelpe deg å fikse tilgjengelighetsproblemene dine. Bruk forhåndsvisningen for å se teksten med dårlig kontrast.

Forhåndsvisningen fremhever hvor i dokumentet du kan finne spesifikke tilgjengelighetsproblemer. Fremhevingene viser alle forekomster av én problemtype av gangen. Hvis teksten din for eksempel har dårlig kontrast, viser understrekingene deg alle steder dette spesifikke problemet oppstår.

Verktøy for forhåndsvisningen

Bruk forhåndsvisningsverktøyene for å utforske problemene i dokumentet ditt.

  • Gå gjennom forhåndsvisningen side for side.
  • Se hvor mange ganger et spesifikt problem vises.
  • Gå til andre steder problemet er fremhevet.
  • Vis eller skjul fremhevingene.
  • Zoom inn på eller ut av innholdet i forhåndsvisningen.
  • Hvis problemet er i et vedlagt dokument, må du laste ned originalfilen.

Følg instruksjonene på Ally for å rette opp dårlig kontrast

Ally antar at du har grunnleggende kunnskap om HTML og hvordan du bruker et CMS (Content Management System). For å følge trinnene i veiledningen må du vite hvordan du redigerer en nettside i HTML eller kildekode i ditt CMS.

Ally forutsetter også at du har tillatelse til å oppdatere farge i webområdet ditt. Farger er ofte definert i stilveiledningen for et sted og kan reflektere merking. Ta en titt på veiledningen for sidestil før du gjør endringer. 

Sammen med forhåndsvisningen gir Ally deg en trinnvis veiledning om hvordan du kan løse problemet. Ally organiserer denne tilbakemeldingen i et beslutningstre.Alt du trenger å gjøre, er å lese retningslinjene og svare på spørsmålene. Finn ut hva problemet er, hvorfor det er viktig, og hvordan du kan utbedre det på riktig måte.

Velg Slik fikser du kontrast for å følge fremgangsmåten.

Måter å rette opp kontrastproblemer på

Når teksten har dårlig kontrast, betyr det at det ikke er nok fargekontrast mellom teksten og bakgrunnen den er plassert på.

Fremgangsmåten for Ally har forklart hvordan du endrer fargen på teksten. Du kan også endre bakgrunnsfargen. 

Sjekk veiledningen for nettstedsstil før du gjør endringer. Farge er ofte knyttet til merking og bør endres med forsiktighet.

Veiledende trinn for Ally forklarer også hvordan du gjør oppdateringene i HTML-kildekode på enkeltnettsider. CMS-er kan variere. Enkelte CMS-er har et rikt tekstredigeringsprogram (RTE) (RTE) Dette kan gi brukervennlige måter å style tekst på. Med RTE-er kan du velge en forhåndsinnstilt stil for overskrifter, farger, skrifter, bilder og så videre. Men ikke hver CMS gir en RTE og krever endringer i kildekoden med HTML. Noen ganger er både HTML og RTE tilgjengelige også.

For problemer med gjentakende kontrast kan du også oppdatere malen i stedet. Maloppdateringer krever en viss HTML- og CSS -kunnskap og kan være avhengig av områdets merke. 

Besøk w3schools for å finne ut mer om HTML og CSS

Farge-HEX eller -RGB

Både HEX og RGB er forskjellige måter farger kan defineres på.

  • RGB definerer farge med mengden rødt (R), grønt (G) og blått (B) som brukes. En sjattering av rødt kan for eksempel defineres som RGB (253, 2, 2).
  • HEX er et heksadesimalt format som definerer en farge med de røde, grønne og blå verdiene i en kombinasjon av seks bokstaver og tall. Heksadesimaler starter med nummeret eller emneknaggsymbolet (#). Den samme sjatteringen av rødt ville for eksempel blitt definert som #fd0202.

Heksadesimal er den vanligste metoden for å definere farger på nettsider.

Anbefalt fremgangsmåte for tekstkontrast

Det finnes mange lette justeringer du kan gjøre for å gjøre tekst lettere å lese.

  • Bruk skrifter med brede streker.
  • Bruk en skriftstørrelse på minst 12 piksler. Hvis du bruker en skrifttype med tynne tegnstrøk, bruk minst 16px.
  • Du bør bare bruke tynne skrifter på mørke bakgrunner.
  • Bruk lys tekst på mørke bakgrunner.
  • Bruk mørk tekst på lyse bakgrunner.
  • Unngå disse fargekombinasjonene:
    • Grønt og rødt
    • Grønt og brunt
    • Blått og lilla
    • Grønt og blått
    • Lysegrønt og gult
    • Blått og grått
    • Grønt og grått
    • Grønt og svart

Er du usikker på om teksten din har nok kontrast?Bruk Colour Contrast Analyser fra The Paciello Group til å sjekke innholdet ditt.

Hvorfor er tekstkontrast viktig?

Det kan i mange situasjoner være vanskelig å lese tekst med lav kontrast.

  • Ved fremvisning i timen
  • For fargeblinde studenter
  • På mobilenheter med sterkt lys eller gjenskinn på skjermen
  • På skjermer av lav kvalitet

Lav kontrast kan føre til belastning på øynene, slik at det blir vanskelig å se og raskt lese innholdet, noe som igjen kan føre til frustrasjon.

Med god kontrast kan alle se teksten klart og tydelig, slik at det blir enklere å lese innholdet.