Kleur omkeren scherm media query css toegankelijkheid

Logo cursus traing wordpress

Kleur omkeren scherm media query css toegankelijkheid

Kleuren omkeren MacOS toegankelijkheidsvoorkeuren

De inverted-colors functie informeert of de gebruiker heeft gekozen voor het inverteren van de kleuren in zijn systeemvoorkeuren of de browserinstellingen. Soms wordt deze optie gebruikt als alternatief voor hoog contrast. Ze neemt 2 waarden aan:

geen:
Als de kleuren normaal worden weergegeven

omgekeerd:
Wanneer een gebruiker de optie heeft geselecteerd om kleuren om te keren.

instellingen computer mac kleuren omkeren invert colors kleurenblinden toegankelijkheid
instellingen computer mac kleuren omkeren invert colors

Het probleem met omgekeerde kleuren is dat het ook de kleuren van en video's zal omkeren, waardoor ze eruit zien als röntgenbeelden. Met een CSS-inverteerfilter kun je alle afbeeldingen en video's selecteren en terugdraaien.

@media (inverted-colors) {
img, video {
: invert(100%);
}
}

Op het moment van schrijven wordt deze functie alleen ondersteund door Safari.

voorkeuren kleurenschema donkere lichte modus

Het hebben van een “donkere modus” is iets wat we tegenwoordig veel meer zien, en dankzij de prefers-color-scheme functie kunnen we de systeem- of browservoorkeuren van een gebruiker aanboren om te bepalen of we een “donker” of een “licht” thema aanbieden, gebaseerd op de voorkeuren van de gebruiker.

instellingen computer mac weergave donker tips kleurenblinden toegankelijkheid
instellingen computer mac weergave donker tips kleurenblinden toegankelijkheid

Het neemt twee waarden aan:

licht: Wanneer een gebruiker heeft geselecteerd dat hij een licht thema verkiest of geen actieve voorkeuren heeft
donker: Wanneer een gebruiker in zijn instellingen een donkere weergave heeft geselecteerd

Media queries ccs kleurenschema donkere lichte modus

body {
  --bg-color: white; 
  --text-color: black;

  background-color: var(--bg-color);
  color: var(--text-color);
}

@media screen and (prefers-color-scheme: dark) {
  body {
    --bg-color: black;
    --text-color: white;
  }
}

Zoals is uitlegt in deze complete gids voor de donkere modus komt er veel meer bij kijken dan alleen het veranderen van de van de .

Voordat je begint met de donkere modus, moet je bedenken dat als je geen slimme implementatiestrategie hebt, je met een moeilijk te onderhouden code komt te zitten. CSS-variabelen kunnen wonderen doen, maar ik zal daar binnenkort een handleiding voor schrijven.

Meer css media queries om toegankelijkheid te verbeteren

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


Meer weten over Kleur omkeren scherm media query css toegankelijkheidof info?

Wil je meer weten? Veel lezers met interesse in Kleur omkeren scherm media query css toegankelijkheid bekeken ook de onderstaande artikelen:


Meer halen uit je WordPress sites

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

Scroll naar boven