Merkkleuren kiezen en controleren.

De vijf kleurrollen

Onder “Ontwerp” en “Kleuren” vind je “Je kleurenpalet”. Elke kleur heeft een taak: “Achtergrond” is de ondergrond van de hele pagina, “Vlak” is alles wat daarop ligt — kaarten, vakken, velden. “Tekstkleur” geldt voor de lopende tekst, “Accentkleur” voor knoppen, links en alles waarmee je iets doet. “Tekst op knoppen” is het opschrift op het accent; laat je het leeg, dan berekenen we het zo dat het leesbaar is.

Je stelt een kleur in met een klik op het kleurvlak, of je typt de hexwaarde eronder in, bijvoorbeeld #8A4B2E, en bevestigt met Enter. Een vlak met een stippellijn betekent: nog niet ingesteld, het sjabloon beslist. Het × naast een ingestelde kleur geeft die weer vrij, en de kleine i naast elke rol legt die in één zin uit.

1. 1Open “Ontwerp” en kies “Kleuren”.
2. 2Klik op het kleurvlak van een rol of typ de hexwaarde ervan in.
3. 3Bekijk het voorbeeld — opslaan gebeurt vanzelf.

Combinaties op het kleurenwiel

“Kleurencombinaties ontdekken” klapt het kleurenwiel open. De grote stip is de “Basiskleur”, en dat is je accentkleur: wat je op het wiel kiest, wordt meteen als accentkleur opgeslagen. Je sleept de stip met je muis of vinger; heeft die de focus, dan werken ook de pijltoetsen, met Shift in grotere stappen. De schuifregelaar “Helderheid” eronder maakt de kleur lichter of donkerder.

Daarnaast kies je een “Harmonie”: “Analoog”, “Monochroom”, “Complementair”, “Gesplitst complementair”, “Triadisch”, “Vierkant”, “Tinten” of “Eigen”. Het “Palet” eronder toont de passende kleuren met hun hexwaarde; “Gebruik als …” onder een kleur legt die op één afzonderlijke rol.

“Op het merk toepassen” verdeelt het palet in één keer: de basis als accent, plus een lichte achtergrond, een licht vlak, een donkere tekstkleur en knoptekst in zwart of wit — zo berekend dat alles leesbaar is. Daarna kun je elke rol afzonderlijk wijzigen.

1. 1Klap onder “Kleuren” “Kleurencombinaties ontdekken” open.
2. 2Sleep de grote stip naar je hoofdkleur en kies een harmonie.
3. 3Klik op “Op het merk toepassen”.

Leesbaarheid

Onder het palet meet het vak “Leesbaarheid” vier kleurenparen: “Tekst op achtergrond”, “Tekst op vlak”, “Tekst op knoppen” en “Accent op achtergrond” — volgens WCAG, minimaal 4,5:1. Elk paar toont zijn contrast en een oordeel in woorden: “Zeer goed leesbaar”, “Goed leesbaar”, “Krap — moeilijk te lezen” of “Niet leesbaar”. Een paar waarvan één kleur nog niet is ingesteld, wordt niet gemeten.

Is een paar niet leesbaar, dan staat de waarschuwing bij beide kleuren (“Te weinig contrast met: …”) en toont het vak het gevolg per tool. “Wordt vervangen in: …” betekent dat die tool daar in plaats van jouw kleur een leesbare kleur toont — website, formulier en WordPress zwart of wit, de winkel eerst zijn eigen kleur. “Blijft zo in: …” betekent dat de tool precies jouw kleuren toont, ook als ze moeilijk leesbaar zijn.

Daaronder staat dan “Zo wordt het leesbaar”: tot drie kant-en-klare paletten waarin elk paar slaagt. We berekenen alle paren samen, zodat geen enkele correctie een ander paar breekt — elke kleur wordt alleen lichter of donkerder en behoudt haar tint; de tekst op knoppen blijft jouw kleur of wordt zwart of wit. Een klein voorbeeld toont per suggestie de vier paren, en ernaast staat welke kleur hoe verschuift. “Toepassen” legt het palet op je merk, “Ongedaan maken” haalt je eigen kleuren terug.

Leesbare kleuren helpen iedereen: mensen die slecht zien, en iedereen die in de zon op zijn telefoon kijkt.

Contrast in detail controleren

“Contrast in detail controleren” neemt één paar nauwkeurig onder de loep. Bovenaan kies je het paar; groot staat de verhouding, bijvoorbeeld 5,20 : 1. Daaronder staan voorgrond en achtergrond, elk met een kleurvlak en een schuifregelaar “Helderheid” — wat je hier wijzigt, wijzigt de kleur van je merk.

De tabel toont welke niveaus het paar haalt: “Grote tekst”, “Kleine tekst” en “Graphics en bediening”, elk voor AA en AAA met “Geslaagd” of “Gezakt”. Lopende tekst heeft 4,5:1 nodig, grote koppen 3:1; voor een accent tegen de achtergrond is 3:1 genoeg. Ernaast zie je het paar als kleine pagina met een kop en een alinea.

Is het contrast onvoldoende, dan verschijnen “Suggesties — dezelfde tint, alleen lichter of donkerder”: één klik legt de voorgestelde kleur op de rol. Lukt het met die tint helemaal niet, dan meldt het vak dat je een van de twee kleuren opnieuw moet kiezen.

1. 1Klap onder “Kleuren” “Contrast in detail controleren” open.
2. 2Kies bovenaan het paar dat niet leesbaar is.
3. 3Klik op een suggestie of sleep de schuifregelaar “Helderheid” tot “Geslaagd” verschijnt.