Contrast toegankelijkheid scherm media query css accessibility

Contrast is een belangrijk onderdeel van digitale toegankelijkheid. Bij veel, ook grote, websites is dat lang niet altijd goed geregeld. Waar op letten?

Logo cursus traing wordpress

Contrast toegankelijkheid scherm media query css accessibility

Contrast beeldscherm toegankelijkheid

De contrast voorkeuren functie informeert of de gebruiker heeft gekozen voor meer of minder contrast in zijn systeemvoorkeuren of de browserinstellingen. Het heeft drie waarden:

geen-voorkeur

Wanneer een gebruiker geen voorkeur kenbaar heeft gemaakt aan het systeem. Als u het gebruikt als een boolean zal het onwaar evalueren.

hoog contrast

Wanneer een gebruiker de optie heeft geselecteerd om een hoger contrastniveau weer te geven.

laag contrast

Wanneer een gebruiker de optie heeft geselecteerd om een lager contrastniveau weer te geven.

instellingen computer mac kleurcontrast beeldscherm kleur contrast tips kleurenblinden toegankelijkheid
instellingen computer mac kleurcontrast contrast tips

Contrast beeldscherm media query css accessibility website

Op het moment van schrijven wordt deze functie door geen enkele browser ondersteund. Microsoft heeft een niet-standaard eerdere implementatie gedaan met de -ms-high-contrast functie die alleen werkt op Microsoft Edge v18 of eerder (maar niet op Chromium gebaseerde versies).

Je kan het met CSS zo oplossen

.button {
  background-color: #0968d8;
  color: #fff;
}

@media (prefers-contrast: high) {
  .button {
    background-color: #0a0db6;
  }
}

Dit voorbeeld verhoogt het contrast van een knop van de klasse AA naar AAA wanneer de gebruiker een hoog contrast aan heeft staan.

Meer css media queries voor toegankelijkheid

Met css media queries kun je de toegankelijkheid en accessibility verbeteren. Lees meer handleidingen:


Meer informatie over Contrast toegankelijkheid scherm media query css accessibilityof info?

Wil je meer informatie? Veel web-designers met interesse in Contrast toegankelijkheid scherm media query css accessibility bekeken ook de onderstaande veel gelezen handleidingen:


Meer halen uit je WordPress sites

Wil je meer halen uit je WordPress websites dan nu?
Overweeg dan de volgende trainingen en adviezen:

Scroll naar boven