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å texten 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 Riktlinjer för WCAG 2.1 AA för att se till att texten är läslig för alla. Följ dessa krav och våra tips 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ängligheten, och trots att de inte är allvarliga bör de åtgärdas.

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.

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 Stora problem i tabellen Tillgänglighetsproblem för att visa listan över stora problem. Välj de problem som har med konstrast att göra.

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

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.

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.

Förhandsgranskningsverktyg

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

• 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 ska du ladda ner originalfilen.

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

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- eller källkoden i din CMS.

Ally antar även att du har behörighet att uppdatera färgerna 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.

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. 

Innan du gör några ändringar ska du kontrollera din webbplatsstilguide. Färgen är ofta relaterad till profilering 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 innehållshanteringssystem har en redigerare för rik text (RTE) med användarvänliga sätt att formatera text. Med redigerare för rik text kan du välja en förinställd stil för rubriker, färger, teckensnitt, bilder och så vidare. Men inte alla innehållshanteringssystem har en redigerare för rik text, utan vissa kräver att man redigerar 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. Uppdatering av mallar kräver viss kunskap om HTML och CSS och kan vara avhängigt av varumärket för din webbplats. 

Gå till w3schools för mer information 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. Dessa hexadecimala tal inleds med nummertecknet/hashtagsymbolen (#). Till exempel så anges samma röda nyans som #fd0202.

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

Tips 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

Är du osäker på om din text har tillräckligt med kontrast?  Använd Colour Contrast Analyser från 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 innehållet.