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.

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: