Knapper og links skal bevare tilstrækkelig kontrast ved hover og fokus

Mange temaer gør knapper lysere eller inverterer dem ved hover og fokus. Når teksten bliver lysegrå på hvid netop i det øjeblik, en kunde peger på »Læg i kurv«, kan svagsynede og folk med nedsat farvesyn ikke længere læse den.

Regel-id
vs-hover-focus-contrast
Kilde
Validiscan-kontrol
Alvorlighed
Alvorlig
Rettelsesniveau
ASSISTED
på Shopify, Shopware, WooCommerce og Magento
Status
køres

Hvad kontrollen gør

Måler tekstkontrasten (1.4.3) og kontrasten for kanter og indikatorer (1.4.11) på knapper og links i deres hover- og fokustilstand, som statiske kontrastkontroller ikke ser.

Kontrollen aflæser a[href], button, [role="button"], [role="link"] og input-knapper, men springer dem over, der er deaktiverede, skjulte eller næsten gennemsigtige. Den tager ét element pr. stil (tag, klasse, farver, skrift, sideområde) som stikprøve, op til 60 pr. side, og fastfryser CSS-overgange for at aflæse de endelige farver.

Efter ét rigtigt tryk på Tab, så :focus-visible gælder, aflæses hver stikprøve i sin standardtilstand og derefter med fokus. Stikprøver med tekst, som intet andet element dækker ved deres midtpunkt, får desuden musen holdt over sig, indtil kontrollen har kørt i 10 sekunder.

Tekst er et fund, når en hover- eller fokustilstand med ændrede farver falder under 4,5:1, eller 3:1 for stor tekst (24 px, eller 18,66 px i fed). Farverne blandes gennem de overordnede elementers baggrunde og opacitet oven på hvidt; tekst oven på et billede, en video eller en anden overlappende boks springes over. Et fokus-outline eller en tilføjet box-shadow er et fund, når den bedste af dem er under 3:1 mod den tilstødende baggrund; browserens auto-ring måles ikke. Kanter, understregninger og baggrundsændringer måles ikke som fokusmarkeringer.

Sådan retter du det

Vælg hover- og fokusfarver, der bevarer en kontrast på mindst 4,5:1 for tekst (3:1 for stor tekst) og mindst 3:1 for knapkanter og fokusindikatorer, helst ved at justere temaets farvevariabler, så alle tilstande bevarer tilstrækkelig kontrast.

WCAG-succeskriterier

Afsnit i EN 301 549

Afsnittet i EN 301 549 for hvert kriterium, fordelt på versioner af standarden
WCAG-kriterium Version 3.2.1 Version 4.1.1
1.4.3 9.1.4.3 9.1.4.3
1.4.11 9.1.4.11 9.1.4.11

Begynd med et gratis tjek af din webshop.

Send din webshops adresse. Validiscan scanner den og svarer med hver fejl, scanningen kan påvise, med siden og koden.

Bestil et gratis tjek

Eller skriv til info@validiscan.com.

Hvad det gratis tjek omfatter, og hvad det udelader
Du sender
din webshops adresse
Sider, der scannes
op til 15
Du får
hver fejl, scanningen kan påvise, med siden og koden
På din webshop
kun offentlige sider; intet login, intet købt, ingen formularer sendt
Hvad det ikke er
et fuldt audit

Skriv til Validiscan

Til et gratis tjek skal du skrive din webshops adresse og platform.

Validiscan bruger det, du sender, til at svare dig. Privatlivspolitik