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.

Het probleem met omgekeerde kleuren is dat het ook de kleuren van afbeeldingen 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 {
filter: 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” kleurenschema 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.

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 kleur van de achtergrond.

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: