Skip to main content

Uppdatera textfärgkontrasten

Alla bör kunna läsa texten

Det är viktigt att texten kan ses och är läslig. Om du vill att dina besökare ska förstå den måste de kunna läsa den.

Bra textkontrast gör att alla kan se texten mot bakgrunden den är placerad på.

Alla ser inte färger på samma sätt. WCAG har definierat specifika kontrastkrav i WCAG 2.2 AA-riktlinjerna för att säkerställa att texten är läsbar för alla. Följ dessa krav och våra bästa praxis för kontrast för att åtgärda eller förhindra kontrastproblem.

Ally följer kontrastkraven för att verifiera att det finns tillräcklig konstrast mellan textfärgen och bakgrundsfärgen. Dålig textkontrast är ett stort problem. Stora problem påverkar tillgänglighet och kräver uppmärksamhet, även om de inte är allvarliga.

Använd Ally för att hitta text med dålig kontrast

Använd Allys tillgänglighetsrapport för att upptäcka och åtgärda tillgänglighetsproblem på din webbplats. Använd länken som anges för rapporten och logga in. Öppna rapporten och titta på listan över problem i tabellen Tillgänglighetsproblem.

Tips

Tabellen Tillgänglighetsproblem finns både på fliken Översikt och fliken Domän. Börja på fliken Domän för att se problem som är specifika för en domän.

Det är ett stort problem att ha text med dålig kontrast. Använd fliken Större i tabellen Tillgänglighetsproblem för att visa listan över större problem. Välj de problem som har med konstrast att göra.

alt

Tips

Om du börjar i fliken Översikt markerar du problemet och sedan domänen med problemet.

Tips

Kontrastproblem kan börja med dokument eller HTML i listan.

I listan över kontrastproblem i domänen väljer du poängindikatorn bredvid ett objekt med problemet. Innehållsredigerarens återkopplingspanel öppnas.

alt

Förhandsgranska texten med dålig kontrast

Allys återkopplingspanel visar en förhandsgranskning av innehållet samt detaljerad återkoppling och stöd för att hjälpa dig fixa dina tillgänglighetsproblem. Använd förhandsvisningen för att se texten med dålig kontrast.

Förhandsvisningen visar var du kan hitta specifika tillgänglighetsproblem i dokumentet. Markeringar visar varje förekomst av en problemtyp i taget. Om din text till exempel har dålig kontrast visar markeringarna alla platser där detta problem finns.

alt

Förhandsgranskningsverktyg

Använd förhandsvisningsverktygen för att utforska problemen i ditt dokument.

alt
  • Gå igenom förhandsvisningen sida för sida.

  • Se hur många gånger ett enskilt problem förekommer.

  • Hoppa mellan problemmarkeringar.

  • Dölj eller visa markeringarna.

  • Zooma in eller ut på förhandsvisningsinnehållet.

  • Om problemet finns i ett bifogat dokument laddar du ned originalfilen.

Följ stegen i Allys vägledning nedan för att åtgärda dålig kontrast

Viktigt

Ally utgår från att du har grundläggande kunskaper om HTML och hur du använder ditt innehållshanteringssystem (CMS). För att följa instruktionerna behöver du veta hur man redigerar en webbsida i HTML-kod eller källkoden i ditt CMS.

Viktigt

Ally antar också att du har behörighet att uppdatera färg på din webbplats. Färgerna som ska användas anges ofta i en webbplats stilguide och kan vara kopplat varumärket i fråga. Innan du gör några ändringar bör du kontrollera stilguiden för din webbplats.

Tillsammans med förhandsgranskningen ger Ally dig stegvisa instruktioner om hur du åtgärdar problemet. Ally strukturerar denna återkoppling i ett beslutsträd. Allt du behöver göra är att läsa anvisningarna och svara på uppmaningarna. Lär dig vad problemet är, varför det spelar roll och hur man korrigerar det korrekt.

Klicka på Så här åtgärdar du kontrast för att följa instruktionerna.

alt

Olika sätt att lösa kontrastproblem

När texten har dålig kontrast betyder det att det inte finns tillräckligt med färgkontrast mellan texten och bakgrunden den är placerad på.

I Allys vägledning beskrivs även hur du ändrar textens färg. Du kan även ändra bakgrundsfärg.

Viktigt

Innan du gör några ändringar bör du kontrollera stilguiden för din webbplats. Färg är ofta relaterat till varumärke och bör ändras med försiktighet.

I Allys vägledning beskrivs även hur du gör uppdateringarna i HTML-källkoden för enskilda webbsidor. Innehållshanteringssystem kan variera. Vissa CMS-system har en RTE (Rich Text Editor) som kan ge dig användarvänliga sätt att formatera text. Med RTE:er kan du välja förinställd stil för rubriker, färger, teckensnitt, bilder och så vidare. Det är dock inte alla CMS-system som har en RTE och kräver redigeringar i källkoden med HTML. Ibland kan också både HTML och RTE finnas tillgängliga.

För återkommande kontrastproblem kan det vara bra att uppdatera mallen istället. Malluppdateringar kräver viss HTML- och CSS-kunskap och kan bero på webbplatsens varumärke.

Tips

Gå till w3schools för att få reda på mer om HTML och CSS

HEX- eller RGB-färg

HEX och RGB är olika sätt att definiera färg.

  • RGB definierar färg med mängden rött (R), grönt (G) och blått (B) som används. En röd nyans kan till exempel definieras som RGB (253, 2, 2).

  • HEX är ett hexadecimalt format som definierar en färg med hjälp av värdena för rött, grönt och blått i en kombination av sex bokstäver och siffror. Hexadecimaler börjar med numret eller hashtaggsymbolen (#). Till exempel så anges samma röda nyans som #fd0202.

Det hexadecimala formatet är det vanligaste sättet att definiera färger på webbsidor.

Bästa praxis för textkontrast

Det finns många enkla justeringar du kan göra för att förbättra textens läsbarhet.

  • Använd teckensnitt med breda teckendrag.

  • Använd en teckenstorlek på minst 12 px. Om du använder ett typsnitt med smala streck ska storleken vara minst 16px.

  • Använd enbart ”tunna” teckensnitt mot mörka bakgrunder.

  • Använd ljus text mot mörka bakgrunder.

  • Använd mörk text på ljusa bakgrunder.

  • Undvik dessa färgkombinationer:

    • Grönt och rött

    • Grönt och brunt

    • Blått och lila

    • Grönt och blått

    • Ljusgrönt och gult

    • Blått och grått

    • Grönt och grått

    • Grön och svart

Tips

Är du osäker på om din text har tillräckligt med kontrast? Använd Colour Contrast Analyser från The Paciello Group för att kontrollera ditt innehåll.

Varför är textkontrast viktigt?

Text med låg kontrast kan vara svår att läsa i många situationer.

  • Vid projicering under lektion

  • För elever med färgblindhet

  • På en mobil med ett starkt ljus eller ljusreflexer på skärmen

  • På skärmar av låg kvalitet

Låg kontrast kan leda till överansträngning av ögonen, göra innehållet svårt att upptäcka och söka i och orsakar frustration.

Bra kontrast gör att alla kan se texten tydligt och får en bättre helhetsupplevelse när de läser ditt innehåll.