WCAG 1.4.3 Kontrast (minimum)

Text ska ha ett kontrastvärde på minst 4,5:1 mot bakgrunden. För stor text, från 18 punkter eller 14 punkter i fetstil, räcker 3:1. Kravet gäller också text i bilder, men inte logotyper och inte kontroller som är inaktiverade. I en webbutik är det oftast ljusgrå hjälptext, rabattpriser och text ovanpå kampanjbilder som inte når upp till kravet.

• Ljusgrå text på vit bakgrund för artikelnummer, lagerstatus och leveranstid.
• Rabattpriser i rött eller orange som inte når 4,5:1 mot den vita bakgrunden.
• Text direkt ovanpå kampanjbilder, där kontrasten varierar med bilden bakom.
• Platshållartext och hjälptext i kassans fält som är för ljus för att läsas.
• Valet ”Bara nödvändiga” i cookierutan i blekt grått bredvid en tydlig knapp för att godkänna alla.
• Text på knappar i varumärkets ljusa färg, till exempel vit text på ljusgrön botten.

Mät kontrasten mellan textfärgen och bakgrunden, och gör texten eller bakgrunden mörkare tills värdet når 4,5:1. Text ovanpå bilder får en egen bakgrund eller ett mörkt lager mellan bilden och texten.

/* #999999 mot vitt ger 2,8:1 */
.lagerstatus { color: #999999; }

/* #595959 mot vitt ger 7,0:1 */
.lagerstatus { color: #595959; }

.kampanj-text {
  background: rgba(0, 0, 0, 0.75);
  color: #ffffff;
}

Månadsgranskningen

Månadsgranskningen mäter kontrasten på texten med axe-core i en riktig webbläsare, och dessutom på länkar och knappar när muspekaren är över dem och när de har fokus. Text ovanpå bilder och text i bilder går inte att mäta automatiskt och behöver kontrolleras för hand. Enskilda färgpar kan du mäta själv i kontrastkontrollen.

Kontrastkontroll enligt WCAG 2.1

• Understanding 1.4.3 Contrast (Minimum) hos W3C (på engelska)
• Kravet i W3C:s svenska översättning

Det svenska namnet kommer från W3C:s auktoriserade svenska översättning, som gäller WCAG 2.0. Kravet 1.4.3 har samma lydelse i WCAG 2.1.