Kleur

Toegankelijke kleur

Gebruik niet alleen kleur om de aanwezigheid van een gebruikersinterfacecomponent of de status ervan aan te geven: Gebruik iconografie en/of vorm om onderscheid te maken. Geef succes/fouten niet ALLEEN aan met kleur. Gebruik iconen of tekst.

<!-- Good: Denotes state without colors alone -->
<div class="error-msg">
  <span aria-hidden="true">❌</span>
  <span>The password entered was invalid.</span>
</div>

Contrast

• Minimale contrastnormen: Houd 4,5:1 aan voor normale tekst en 3:1 voor grote tekst of iconen.
• Zorg dat je voldoet aan de normen voor niet-tekstcontrast: Houd een minimale contrastverhouding van 3:1 aan voor de grenzen en statussen van componenten van de gebruikersinterface.
  • Dit omvat visuele elementen (randen, achtergronden, box-shadows, onderstrepingen) die de grens vormen of de aanwezigheid van een UI-component aangeven (bijvoorbeeld randen van invoervelden).
  • Dit omvat ook visuele elementen die actieve statussen binnen een component aangeven (bijvoorbeeld vinkjes in selectievakjes of schakelaars).
  • Voorbehoud: Een contrast van 3:1 voor niet-tekst kan een uitdaging zijn voor minimalistische ontwerpen. Zachte kleurverlopen of subtiele schaduwen aan de binnen- of buitenkant kunnen visuele grenzen verzachten en tegelijkertijd voldoen aan de toegankelijkheidsvereisten.
• Gebruik prefers-contrast alleen als dat nodig is: Gebruik @media (prefers-contrast: more) als het ontwerp accenten met een laag contrast gebruikt (bijvoorbeeld subtiele randen, gedempte secundaire tekst) die moeten worden versterkt. De meeste sites die al aan het basiscontrast voldoen, hebben dit niet nodig.

Lichte en donkere kleurenschema's

• Ondersteun lichte en donkere kleurenschema's: Respecteer @media (prefers-color-scheme: dark) en koppel deze aan de CSS-property color-scheme, zodat formulierbesturingselementen, scrollbalken en andere door de UA gerenderde oppervlakken overeenkomen. Ga naar Donkere modus voor meer informatie.

Modus voor geforceerde kleuren

• Ondersteuning voor de modus Geforceerde kleuren: In de modus Geforceerde kleuren (hoog contrast in Windows) overschrijft de browser de kleuren van de auteur met systeemzoekwoorden en verwijdert deze background-image, box-shadow en border-image. Definieer alternatieve systeemkleuren voor kleur-tokens met @media (forced-colors: active).
• Gebruik forced-color-adjust: none alleen als kleur essentiële informatie is (syntax highlighter, kleurkiezerstaal). Gebruik forced-color-adjust: none NIET alleen om de esthetiek te behouden.
• Vertrouw niet op background-image, box-shadow of border-image om randen, scheidingstekens of status over te brengen: ze verdwijnen bij geforceerde kleuren (en vaak ook bij afdrukken). Als je dit toch moet doen, zorg je dat er een alternatief is in de modus voor geforceerde kleuren, zoals outline of border met zoekwoorden voor systeemkleuren (CanvasText, LinkText, ButtonText, Highlight, GrayText, enzovoort).

Tinten genereren

Voordat je tinten dynamisch genereert, controleer je of je een bestaande, vooraf gedefinieerde designtoken kunt gebruiken. Zo hebben ontwerpers veel meer controle en wordt consistentie gewaarborgd.

Als je dynamisch lichtere of donkerdere kleuren wilt genereren:

• Pas NIET alleen het helderheidskanaal aan in oklch/oklab of lch/lab, bijvoorbeeld oklab(from var(--primary) 0.9 a b). Hoewel dat theoretisch de juiste manier is, implementeren browsers nog geen kleurbereiktoewijzing, waardoor de resulterende kleur onvoorspelbaar is.
• Je kunt color-mix() gebruiken om te mengen met wit of zwart (bij voorkeur in oklab). Zo blijft de kleur veilig binnen het kleurengamma, maar worden kleuren vaak te veel ontkleurd en ontstaan er fletse tinten en schakeringen.
• Je KUNT de helderheidsaanpassing combineren met een van de andere methoden (bijvoorbeeld color-mix(in oklab, oklch(from var(--primary) 0.9 c h), white 30%)) voor een balans tussen de 2, maar ga niet hoger dan 30% voor de helderheidsaanpassing.