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
- 1.4.3 Contrast (Minimum), niveau AA
- 1.4.11 Non-text Contrast, niveau AA
Afsnit i EN 301 549
| 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 tjekEller 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