Länkfärgskontrast
Silktide hittar länkar i din text som endast särskiljs från de omgivande orden genom färg, med för liten färgskillnad för att personer med nedsatt färgseende ska kunna upptäcka dem. Länkar måste kunna kännas igen som länkar, annars kan läsarna inte använda dem.
Varför detta är viktigt
Cirka 1 av 12 män och 1 av 200 kvinnor har en färgseendedefekt. Om det enda som markerar en länk är en subtil färgförändring ser dessa läsare vanlig text och vet aldrig att länken finns. Det innebär missad navigering, missade uppmaningar och ett fel enligt nivå A – detta är bland de mest grundläggande kraven på tillgänglighet.
Så här åtgärdar du det
Det finns två sätt att göra en länk i löpande text förenlig med kraven:
- Särskilj den med mer än färg – den enklaste lösningen är en understrykning, vilket är vad de flesta läsare förväntar sig att länkar ska ha. Även en kantlinje, bakgrund eller märkbart kraftigare teckenvikt fungerar.
/* Länkar som enbart förlitar sig på färg */
a { color: #4a6da7; text-decoration: none; }
/* Åtgärdat: understrykning gör länken synlig för alla */
a { color: #4a6da7; text-decoration: underline; }
- Använd en tydligt annorlunda färg samt ett synligt fokus- och hovringstillstånd – länkfärgen måste ha en på minst 3:1 mot den omgivande texten, och länken måste ändras synligt (till exempel genom att få en understrykning) när muspekaren hovrar över den och vid .
Så här testar Silktide detta
- Hitta synliga länkar som ligger i ett textstycke, med ord direkt före eller efter dem. Fristående länkar, som menyalternativ och knappar, testas inte av denna kontroll.
- Hoppa över länkar där länkfärgen, färgen på den omgivande texten eller bakgrundsfärgen inte kan fastställas på ett tillförlitligt sätt.
- Godkänn länkar som är visuellt särskiljbara utan färg: understrukna, försedda med kantlinje, försedda med bakgrund eller har en teckenvikt som är minst 200 enheter tyngre än den omgivande textens.
- Mät annars kontrastkvoten mellan länkfärgen och färgen på den omgivande texten, och undersök hur länken ändras vid fokus och hovring. Rapportera länken om inte kvoten är minst 3:1 och fokus- eller hovringstillståndet är synligt annorlunda.
Felsökning
Mina länkar ändras vid hovring – varför flaggas de då?
En förändring vid hovring räcker inte – länken måste också ha minst 3:1 i färgkontrast mot den omgivande texten. Och även tillsammans hjälper denna lösning bara personer som kan uppfatta färgskillnaden tillräckligt väl för att försöka hovra över länken från början. En understrykning är fortfarande den mest tillförlitliga lösningen.
Länkar i menyer och knappar flaggas inte
Det stämmer – denna kontroll gäller endast länkar som omges av annan text, där läsaren måste kunna skilja länken från orden runt omkring. Fristående länkar är visuellt identifierbara genom sin placering och utformning.