Kontrastkontroll (Contrast Checker)

Kontrollera textkontrasten innan du publicerar

Bra färgkontrast är ett av de enklaste sätten att göra en webbplats lättare att läsa. Den här kontrastkontrollen jämför en textfärg och en bakgrundsfärg med WCAG:s formel för relativ luminans och visar sedan kontrastförhållandet samt godkänt/underkänt för nivåerna AA och AAA. Den är användbar för knappar, navigering, märken, kort, varningsmeddelanden och överallt där text visas på en färgad yta.

Beräkningen körs i din webbläsare och kräver ingen uppladdning. Välj två färger, byt plats på dem vid behov och använd förhandsvisningen för att se hur en riktig text känns. Förhållandet är objektivt, men förhandsvisningen är ändå viktig eftersom teckentjocklek, textstorlek och omgivande layout påverkar läsbarheten. Ett par som tekniskt sett klarar kraven kan ändå vara tröttande om texten är liten eller ytan är visuellt stökig.

Förstå AA- och AAA-resultat

WCAG AA är det vanliga målet för de flesta webbplatser och produkter. Normal text ska nå minst 4,5:1 och stor text minst 3:1. AAA är strängare: 7:1 för normal text och 4,5:1 för stor text. Stor text betyder 18 pt normal eller 14 pt fet och uppåt. Den lägre gränsen finns eftersom större, tjockare bokstäver är lättare att urskilja vid lägre kontrast än liten brödtext. Om du är osäker på vilken kategori som gäller, behandla texten som normal och sikta på det högre kravet.

Utforma tillgängliga färgsystem

Kontrasten bör kontrolleras tidigt, inte bara när den visuella designen är klar. När du väljer varumärkesfärger, testa dem mot de ytor där de faktiskt kommer att visas: vita kort, mörka navigeringsfält, dämpade bakgrunder och inaktiverade tillstånd. Dokumentera tillgängliga kombinationer som tokens så att teamen slipper upptäcka dem på nytt. Kom ihåg att kontrast bara är en del av tillgängligheten. Använd synliga fokusramar, tydliga etiketter, semantisk HTML och förlita dig inte enbart på färg för att förmedla viktiga tillstånd som fel, lyckade åtgärder och varningar.