Elementer skal opfylde tærsklerne for minimumsfarvekontrast
Tekst, der er for bleg i forhold til baggrunden, er svær eller umulig at læse for kunder med nedsat syn, farveblindhed eller aldrende øjne og for alle, der bruger mobilen i solskin. Priser, rabatkoder, hjælpetekster i formularer og knaptekster, der ikke kan læses, fører til fejl og tabte ordrer.
- Regel-id
- color-contrast
- Kilde
- axe-core 4.13.0
- Alvorlighed
- Alvorlig
- Rettelsesniveau
- ASSISTED
- på Shopify, Shopware, WooCommerce og Magento
- Status
- køres
Hvad kontrollen gør
Sørg for, at kontrasten mellem forgrunds- og baggrundsfarver opfylder tærsklerne for minimumskontrast i WCAG 2 AA
Reglen omfatter elementer, der selv har en synlig tekstnode, samt input-, select- og textarea-felter, også tomme. Undtaget er et select uden valgmuligheder og et felt, hvis text-indent flytter teksten ud af betjeningselementet. Der ses bort fra inputfelter uden tekst som afkrydsningsfelter, fra deaktiverede eller inerte elementer, fra etiketter til deaktiverede betjeningselementer og fra tekst, der kun består af emoji eller tegnsætning.
Kontrollen aflæser den beregnede tekstfarve og bygger baggrunden op af de elementer, der ligger i lag bag teksten. Halvgennemsigtige lag blandes oven på en hvid side. Tekst regnes som stor fra en font-size på 18 pt (24 px), eller 14 pt (18,66 px), når font-weight er 700 eller derover.
Når kontrollen ikke kan afgøre det, bliver resultatet »kræver gennemgang«, for eksempel ved et baggrundsbillede eller en farveovergang, et billede eller en video bag teksten, et andet element oven på teksten, et stort, absolut placeret ::before eller ::after med baggrund eller et enkelt tegn, der ikke opfylder kontrastkravet. Validiscans scanner gør ikke den slags resultater til fund, så tekst af den art skal gennemgås af et menneske.
Farverne aflæses i den tilstand, siden indlæses i, med det lyse farveskema og i hver scannet viewport. vs-hover-focus-contrast måler hover- og fokustilstande.
Sådan retter du det
Hæv kontrasten for normal tekst til mindst 4,5:1 og for stor tekst (24 px eller 18,66 px fed) til mindst 3:1. Justér farven i temaindstillingerne eller CSS-variablerne i stedet for på de enkelte elementer, så brandets farvetone bevares og kun lysheden ændres, og tjek også tekst på billeder og udsalgsmærkater.
WCAG-succeskriterier
- 1.4.3 Contrast (Minimum), 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 |
Opskrifter, der angiver denne regel
Reglen har niveau ASSISTED. I et projekt følger et fund af reglen ASSISTED-forløbet, og disse opskrifter anvendes ikke på det.
Shopify: opskrift contrast-tokens
Vis før og efter (1)
assets/base.css.liquid Ændringer i assets/base.css.liquid: 3 tilføjet, 3 fjernet
| Linje før | Linje efter | Ændring | Kode |
|---|---|---|---|
| 745 | 745 | font-size: 0.8125rem; | |
| 746 | 746 | letter-spacing: 0.04em; | |
| 747 | 747 | text-transform: uppercase; | |
| 748 | Fjernet | color: #929292; | |
| 748 | Tilføjet | color: #767676; | |
| 749 | 749 | } | |
| 750 | 750 | ||
| 751 | 751 | .rating { | |
| 1013 | 1013 | ||
| 1014 | 1014 | .copyright__content { | |
| 1015 | 1015 | margin: 0; | |
| 1016 | Fjernet | color: #929292; | |
| 1016 | Tilføjet | color: #6f6f6f; | |
| 1017 | 1017 | } | |
| 1018 | 1018 | ||
| 1019 | 1019 | .policies { | |
| 1077 | 1077 | ||
| 1078 | 1078 | .cookie-banner__text, | |
| 1079 | 1079 | .cookie-banner__link { | |
| 1080 | Fjernet | color: #9a9a9a; | |
| 1080 | Tilføjet | color: #767676; | |
| 1081 | 1081 | } | |
| 1082 | 1082 | ||
| 1083 | 1083 | .cookie-banner__icon-button { |
Shopware: opskrift contrast-tokens
Vis før og efter (1)
Resources/app/storefront/src/scss/_variant-broken.scss Ændringer i Resources/app/storefront/src/scss/_variant-broken.scss: 1 tilføjet, 1 fjernet
| Linje før | Linje efter | Ændring | Kode |
|---|---|---|---|
| 45 | 45 | /* Light grey unit prices, 3.1:1 (color-contrast). */ | |
| 46 | 46 | .product-price-unit, | |
| 47 | 47 | .product-detail-price-unit { | |
| 48 | Fjernet | color: #929292; | |
| 48 | Tilføjet | color: #757575; | |
| 49 | 49 | } | |
| 50 | 50 | ||
| 51 | 51 | /* Fixed two-line product names (vs-text-spacing). */ |
WooCommerce: opskrift contrast-tokens
Vis før og efter (1)
assets/css/main.css Ændringer i assets/css/main.css: 1 tilføjet, 1 fjernet
| Linje før | Linje efter | Ændring | Kode |
|---|---|---|---|
| 676 | 676 | .kb-footer-about, | |
| 677 | 677 | .kb-footer-newsletter-intro, | |
| 678 | 678 | .site-info { | |
| 679 | Fjernet | color: #888; | |
| 679 | Tilføjet | color: #6e6e6e; | |
| 680 | 680 | } | |
| 681 | 681 | ||
| 682 | 682 | .site-footer ul.menu { |
Magento: opskrift contrast-tokens
Vis før og efter (1)
app/design/frontend/Validiscan/fixture/web/css/source/_theme.less Ændringer i app/design/frontend/Validiscan/fixture/web/css/source/_theme.less: 1 tilføjet, 1 fjernet
| Linje før | Linje efter | Ændring | Kode |
|---|---|---|---|
| 1099 | 1099 | // VALIDISCAN-SEEDED color-contrast: #929292 on white is 3.1:1. | |
| 1100 | 1100 | .block-promo .info, | |
| 1101 | 1101 | .toolbar-amount { | |
| 1102 | Fjernet | color: #929292; | |
| 1102 | Tilføjet | color: #767676; | |
| 1103 | 1103 | } | |
| 1104 | 1104 | ||
| 1105 | 1105 | // VALIDISCAN-SEEDED vs-reflow: the promo row keeps a 1100px minimum width at every breakpoint. |
app/design/frontend/Validiscan/fixture/web/css/styles-m.css Ændringer i app/design/frontend/Validiscan/fixture/web/css/styles-m.css: 1 tilføjet, 1 fjernet
| Linje før | Linje efter | Ændring | Kode |
|---|---|---|---|
| 1075 | 1075 | ||
| 1076 | 1076 | .block-promo .info, | |
| 1077 | 1077 | .toolbar-amount { | |
| 1078 | Fjernet | color: #929292; | |
| 1078 | Tilføjet | color: #767676; | |
| 1079 | 1079 | } | |
| 1080 | 1080 | ||
| 1081 | 1081 | .block-promo-wrapper { |
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