Online kleuren
Voor online toepassingen kun je uit de 17 communicatiekleuren van het Rijkshuisstijl palet kiezen met een extra palet van 7 grijstinten. Verder worden kleurrichtlijnen gegeven voor achtergrondkaders, een linkkleur, functionele kleuren bij meldingen en een focuskleur. Bij kleurcombinaties met tekst moet altijd aan de contrasteisen worden voldaan voor een goede leesbaarheid.
17 communicatiekleuren online
Je kiest 1 basiskleur met eventueel 1 of 2 lichte tinten ter ondersteuning voor de website, magazine of applicatie. Aanvullend kunnen voor achtergrondkaders, grafieken en tabellen meer tinten van een kleur worden toegepast door toevoeging van wit in stappen van 15%. De online kleuren van de Rijkshuisstijl zijn ook als kleurstalen bibliotheek beschikbaar. De onderstaande hex- en rgb-kleurwaarden zijn opgenomen in een '.ase'-bestand dat je in Photoshop, Illustrator of Indesign kunt importeren.
Paars #42145f | rgb(66, 20, 95)
Tint 1 #c6b9cf | rgb(198, 185, 207)
Tint 2 #e3dce7 | rgb(227, 220, 231)
Violet #a90061| rgb(169, 0, 97)
Tint 1 #e5b3d0 | rgb(229, 179, 208)
Tint 2 #f2d9e7 | rgb(242, 217, 231)
Robijnrood #ca005d | rgb(202, 0, 93)
Tint 1 #efb3ce | rgb(239, 179, 206)
Tint 2 #f7d9e7 | rgb(247, 217, 231)
Roze #f092cd | rgb(240, 146, 205)
Tint 1 #fbdef0 |rgb(251, 222, 240)
Tint 2 #fdeff8 | rgb(253, 239, 248)
Rood #d52b1e | rgb(213, 43, 30)
Tint 1 #f2bfbc | rgb(242, 191,188)
Tint 2 #f9dfdd | rgb(249, 223, 221)
Oranje #e17000 | rgb(225, 112, 0)
Tint 1 #f6d4b3 | rgb(246, 212, 179)
Tint 2 #fbead9 | rgb(251, 234, 217)
Donkergeel #ffb612 | rgb(255, 182, 18)
Tint 1 #ffe9b8 | rgb(255, 233, 184)
Tint 2 #fff4db | rgb(255, 244, 219)
Geel #f9e11e | rgb(249, 225, 30)
Tint 1 #fdf6bc | rgb(253, 246, 188)
Tint 2 #fefbdd | rgb(254, 251, 221)
Donkerbruin #673327 | rgb(103, 51, 39)
Tint 1 #d1c2be | rgb(209, 194, 190)
Tint 2 #e8e0df | rgb(232, 224, 223)
Bruin #94710a | rgb(148, 113, 0)
Tint 1 #dfd4b6 | rgb(223, 212, 182)
Tint 2 #efeada | rgb(239, 234, 218)
Donkergroen #275937 | rgb(39, 89, 55)
Tint 1 #becdc3 | rgb(190, 205, 195)
Tint 2 #dfe6e1 | rgb(223, 230, 225)
Groen #39870c | rgb(57, 135, 12)
Tint 1 #c4dbb6 | rgb(196, 219, 182)
Tint 2 #e1eddb | rgb(225, 237, 219)
Mosgroen #777b00 | rgb(119, 123, 0)
Tint 1 #d6d7b3 | rgb(214, 215, 179)
Tint 2 #ebebd9 | rgb(235, 235, 217)
Mintgroen #76d2b6 | rgb(118, 210, 182)
Tint 1 #d6f2e9 | rgb(214, 242, 233)
Tint 2 #eaf8f4 | rgb(235, 248, 244)
Donkerblauw #01689b | rgb(1, 104, 155)
Tint 1 #b3d2e1 | rgb(179, 210, 225)
Tint 2 #d9e8f0 | rgb(217, 232, 240)
Hemelblauw #007bc7 | rgb(0, 123, 199)
Tint 1 #b3d7ee | rgb(179, 215, 238)
Tint 2 #d9ebf7 | rgb(217, 235, 247)
Lichtblauw #8fcae7 | rgb(143, 202, 231)
Tint 1 #ddeff8 | rgb(221, 239, 248)
Tint 2 #eef7fb | rgb(238, 247, 251)
Tinten voor achtergrondkaders, grafieken en tabellen
Voor achtergrondkaders, grafieken en tabellen kunnen deze 7 neutrale grijstinten worden toegepast. Of tinten van een communicatiekleur door toevoeging van wit in stappen van 15%. Voor tekstachtergrond wordt grijstint1 of communicatiekleur tint2 aanbevolen om aan de contrasteisen van een goede leesbaarheid te voldoen, zie Succescriterium 1.4.3 - Contrast (minimum)
Rijksoverheid grijs 1 - 7
Grijs 1 #f3f3f3 | rgb(243, 243, 243)
Grijs 2 #e6e6e6 | rgb(230, 230, 230)
Grijs 3 #cccccc | rgb(204, 204, 204)
Grijs 4 #b4b4b4 | rgb(180, 180, 180)
Grijs 5 #999999 | rgb(153, 153, 153)
Grijs 6 #696969 | rgb(105, 105, 105)
Grijs 7 #535353 | rgb(83, 83, 83)
Kleuren en contrasteisen
Voor een goede leesbaarheid zorg je bij teksten en interactieve elementen voor een goed contrast met de achtergrondkleur, zie Succescriterium 1.4.3 - Contrast (minimum). Je kunt de contrastwaarde tussen 2 kleuren meten met behulp van een kleur contrast checker. De uitkomst wordt getoetst aan de AA-norm die de Rijksoverheid hanteert.
In onderstaande kleurentabel zijn de combinaties met een goede leesbaarheid herkenbaar aan de groene bollen. Vanaf een lettergrootte van 18 pt. komen daar de combinaties met een groene cirkel bij.
Kleur tekstlink
De linkkleur is donkerblauw #01689b en voor bezochte links paars #884488. Om voldoende op te vallen worden tekstlinks in lopende tekst onderstreept en krijgen ze een afwijkende kleur, de linkkleur. In linklijstjes wordt een linkicoon toegevoegd in de linkkleur. De onderstreping wordt dan weggelaten. Zie voor iconen Functionele iconen 24px (nr. 12 interne-linkicoon en nr. 40 externe-linkicoon). Beide linkkleuren voldoen aan de contrasteisen op een witte achtergrond of op grijstint1 en op alle tint2kleuren.
Wanneer geen onderstreping of linkicoon wordt toegepast moet de linkkleur aan 2 contrasteisen voldoen, ten opzichte van de gewone tekstkleur maar ook ten opzichte van de achtergrondkleur. Je kunt de link contrast checker gebruiken om te controleren of deze aan de contrasteisen voldoet. Vermijd de kleur rood om verwarring met foutmeldingen te voorkomen.
Kleurgebruik bij meldingen
Met name bij formulieren is soms feedback nodig om de gebruiker te helpen bij het invullen. Een melding bestaat uit een icoon in een betekenisvolle kleur met bijpassende achtergrondtint en een helptekst. Plaats de melding bij het betreffende formulierveld zodat meteen duidelijk is waar de melding over gaat. Voor de meldingen zijn functionele iconen beschikbaar.
- Foutmelding (icoon nr. 19): achtergrond rood tint2 #f9dfdd
- Waarschuwing (icoon nr. 64): achtergrond donkergeel tint2 #fff4db
- Bevestiging (icoon nr. 04) : achtergrond groen tint2 #e1eddb
- Toelichting (icoon nr. 55): achtergrond hemelblauw tint2 #d9ebf7
Focus outline
Webpagina’s moeten volledig te gebruiken zijn met alleen het toetsenbord. Bij navigeren via het toetsenbord is het belangrijk dat goed zichtbaar is welk interactief onderdeel van een pagina geselecteerd is (buttons, banners, tekstlinkjes, formuliervelden etc.). Een kaderomlijning is een goede manier om deze toetsenbordfocus te tonen. Door een afwisseling van zwarte en witte stippen voldoet deze aan de contrasteis op zowel lichte als donkere achtergronden. In de footer van deze webpagina zie je zo'n zwart-wit gestippelde kaderlijn als je op een link klikt. Voor meer informatie over focus, zie Succescriterium 2.4.7 - Focus zichtbaar