Communicatiekleuren

Dit thema is beschikbaar in alle 17 communincatiekleuren van de rijkshuisstijl.

Alle kleurensets voldoen ten minste aan WCAG succes-criterium 1.4.3 (niveau AA). Waar nodig wordt afgeweken van de officiële tinten van de rijkshuisstijl om voldoende tekstcontrast te waarborgen. Zie Over afgeleide tinten voor toelichting.

Benodigde stappen

  1. Kies een van de beschikbare kleuren.

  2. Gebruik de $brand-color-variabele bij het importeren van het thema om de kleurkeuze vast te leggen. Bijvoorbeeld:

    @use "@minvws/nl-rdo-rijksoverheid-ui-theme" with (
  $brand-color: "mint-green"
);

  3. Optioneel: gebruik in indien nodig de optie voor verhoogd contrast om te voldoen aan WCAG succes-criterium 1.4.6 (niveau AAA). Gebruik hiervoor de $enhance-contrast-variabele:

    @use "@minvws/nl-rdo-rijksoverheid-ui-theme" with (
  $brand-color: "mint-green",
  $enhance-contrast: true
);

Beschikbare kleuren

Overzicht van de beschikbare communicatiekleuren
Communi­catie­kleur $brand-color $enhance-contrast Voorbeeld
Logoblauw "logo-blue" false
true
Paars "purple" false
true
Violet "violet" false
true
Robijnrood "ruby-red" false
true
Roze "pink" false
true
Rood "red" false
true
Oranje "orange" false
true
Donkergeel "dark-yellow" false
true
Geel "yellow" false
true
Donkerbruin "dark-brown" false
true
Bruin "brown" false
true
Donkergroen "dark-green" false
true
Groen "green" false
true
Mosgroen "moss-green" false
true
Mintgroen "mint-green" false
true
Donkerblauw "dark-blue" false
true
Hemelblauw "sky-blue" false
true
Lichtblauw "light-blue" false
true

Over afgeleide tinten

Waar mogelijk wordt de "volle kleur" (de 100% tint) van de rijkshuisstijl gebruikt. Hier wordt alleen van afgeweken indien het tekstcontrast anders ontoereikend is.

In dat geval wordt bij voorkeur een andere combinatie van officiële tinten gebruikt. Alleen als ook dat niet voldoende contrast heeft, wordt een niet-officiële tint gebruikt. De afwijkende tint wordt daarbij gebaseerd op de oklch chroma-waarde van de officiële 100% tint om te zorgen dat deze zo goed mogelijk aansluit op de officiële tinten.

Terug naar het hoofdmenu