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

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

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)
Før og efter Eksempeldata

assets/base.css.liquid Ændringer i assets/base.css.liquid: 3 tilføjet, 3 fjernet

Æ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)
darkens the unit price colour to 4.5:1 with the same hue; axe clears it on both pages Eksempeldata

Resources/app/storefront/src/scss/_variant-broken.scss Ændringer i Resources/app/storefront/src/scss/_variant-broken.scss: 1 tilføjet, 1 fjernet

Æ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)
darkens the footer text colour when every element it styles was measured Eksempeldata

assets/css/main.css Ændringer i assets/css/main.css: 1 tilføjet, 1 fjernet

Æ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)
darkens the single #929292 token and validates Eksempeldata

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

Æ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

Æ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 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