Otillräcklig kontrast mellan text och bakgrund är ett av de problem som förekommer oftast i tillgänglighetsskanningar, och samtidigt ett av de lättaste misstagen att undvika. Det går fel när ljusgrå text står på en vit bakgrund, när knappar bara är synliga genom en subtil färgförändring, eller när platshållartext i ett formulärfält fungerar som den enda vägledningen för vad som ska fyllas i. För människor med en visuell funktionsnedsättning, men också för alla som använder en skärm i starkt solljus, blir texten bokstavligen oläslig.
WCAG 2.1, den norm som EN 301 549 hänvisar till, föreskriver för nivå AA ett minimikontrast mellan text och bakgrunden den står på: vanligtvis 4,5 mot 1 för vanlig text och 3 mot 1 för stor text och för användbara element som knappar och formulärkanter. Det låter tekniskt, men tanken bakom är enkel: kontrast är inget estetiskt val, det är en förutsättning för att kunna förmedla information.
Var det går fel i praktiken
Kontrastproblem uppstår sällan med avsikt. De smyger sig in via varumärkesbeslut som ser fina ut på en stor, skarp skärm i en designstudio, men på en normal skärm för en normal användare hamnar strax under normen. En ljusgrå knapptexst på en pastellfärgad bakgrund är ett klassiskt exempel. Detsamma gäller för länkar som bara är igenkännliga genom en färgskillnad, utan understrykning eller något annat visuellt signål, vilket gör att människor med färgblindhet helt enkelt inte ser dem som klickbara.
Ett annat återkommande mönster är hover-statusen: en knapp som i vila uppfyller kraven perfekt, men när musen rör sig förändras den till en färgkombination som inte har testats. Felmeddelanden i formulär är också ett vanligt misstag: röd text på en ljusröd bakgrund ser konsekvent ut med varumärket, men uppfyller ofta inte det erforderliga förhållandet. Om du är nyfiken på hur den här typen av problem ser ut i din egen miljö kan du se där din webbplats står på några frågor utan att behöva skapa ett konto först.
Varför en automatisk skanning löser detta delvis, men inte helt
Kontrастförhållanden är lätta att mäta automatiskt: en skanner läser färgvärdena för text och bakgrund och beräknar förhållandet. Detta gör det till ett av få WCAG-kriterier som ett verktyg kan testa tillförlitligt. Vad en skanning inte ser är kontrast som uppstår först efter en interaktion, som en utfällbar meny, ett verktygstips som visas vid fokus, eller en status som bara blir synlig efter en användaråtgärd. Det är exakt därför varje rapport anger vilket som är automatiskt testat och vilket som kräver manuell bedömning; kontrast är en stark punkt för automatisk testning, men inte hela bilden.
Hur du strukturellt undviker det
Det vanligaste sättet att varaktigt undvika det här problemet är att fastställa kontrast på nivån för designsystemet i stället för per sida. När ett varumärkes basfärger redan testats mot normen vid fastställandet, behöver en redaktör eller utvecklare inte kontrollera det på nytt varje gång. Det förhindrar också att en ny sida, en temporär kampanjbanner eller en externt inköpt widget försämrar kontrasten utan att det märks.
Det är dessutom klokt att ta med kontrast explicit vid varje visuell förändring av webbplatsen, inte bara vid den första leveransen. En uppdatering av grafiska profilen, ett nytt säsongsbaserat tema eller en ändrad knappstil kan introducera ett problem som inte fanns i den tidigare versionen. Tillgänglighet är i den meningen inte något fält som du bockar av en gång, utan en aspekt som följer med vid underhåll. Mer om hur denna löpande kontroll fungerar i praktiken läser du en förklaring av var bedömningen kommer från.
Slutligen lönar det sig att inte bara titta på miniminormen, utan på avsikten bakom den: kan alla, även under mindre än ideala ljusförhållanden eller på en äldre skärm, verkligen skilja text och knappar åt. Vanliga tveksamma fall, till exempel huruvida en logotyp eller en dekorativ bild också måste uppfylla kontrastkravet, är utförligt behandlade på sidan med svar på frågor som dyker upp ofta.
Vill du veta om kontrast, och de andra återkommande problem, även förekommer i din egen miljö? Den kostnadsfria snabbscanningen ger en första indikation på detta, och kunskapsdatabasen med ämnen sorterade efter situation visar hur denna fråga hänger ihop med resten av kraven enligt EU:s riktlinje för tillgänglighet.