Wat te weten
- Gebruik het diagram in dit artikel om de beste achtergrond- en voorgrondkleurencombinaties voor het ontwerpen van webpagina's te bepalen.
- Gebruik een online tool zoals CheckMyColors.com om de kleuren van uw site te testen en te rapporteren over de contrastverhouding tussen elementen op de pagina.
- Gebruik een tool zoals ContrastChecker.com om uw keuzes te toetsen aan de Richtlijnen voor toegankelijkheid van webinhoud.
In dit artikel wordt uitgelegd hoe u effectief contrast creëert tussen achtergrond- en voorgrondkleuren in webdesign.
Hoe een sterk contrast te creëren
Sommige kleuren kunnen helder zijn en levendig verschijnen op een bepaalde achtergrondkleur, zoals blauw op zwart, maar het zijn slechte contrastkeuzes. Als je bijvoorbeeld een pagina zou maken met alleen maar blauwe tekst op een zwarte achtergrond, zouden je lezers heel snel last krijgen van vermoeide ogen.
Bestudeer de onderstaande tabel om een idee te krijgen van de beste achtergrond/voorgrond combinaties.
Er zijn regels en best practices voor contrast, maar als ontwerper moet u die regels altijd evalueren om er zeker van te zijn dat ze in uw specifieke geval werken.
Gebruik online hulpmiddelen voor contrastcontrole
Probeer, naast uw eigen gevoel voor design, enkele online tools om de kleurkeuze van uw site te testen. CheckMyColors.com test alle kleuren van uw site en rapporteert over de contrastverhouding tussen elementen op de pagina.
Bovendien moet u bij het nadenken over kleurkeuzes ook rekening houden met de toegankelijkheid van websites en met mensen met vormen van kleurenblindheid. WebAIM.org kan hierbij helpen, net als kan ContrastChecker.com, die uw keuzes zal testen tegen Richtlijnen voor toegankelijkheid van webinhoud.
Waarom is contrast belangrijk?
Sterk contrast speelt een belangrijke rol in het succes van het ontwerp van een website. Adequaat contrast zorgt voor een hoogwaardige gebruikerservaring en een betere leesbaarheid die zullen bijdragen aan het succes van een site op de lange termijn. Websites met een te laag contrast kunnen echter moeilijk te lezen en te gebruiken zijn, wat een negatief effect heeft op de effectiviteit van elke site.
Hoewel het misschien gemakkelijk is om te bepalen welke kleuren niet goed bij elkaar passen, is het een moeilijkere vraag om te beslissen welke kleuren effectief bij elkaar passen, zowel in tegenstelling tot anderen als binnen het ontwerp van a website.
Merknormen en contrasterende kleurkeuzes
Contrast is slechts een van de factoren waarmee u rekening moet houden bij het kiezen van kleuren voor het ontwerp van uw website. Bij het selecteren van kleuren moet u waarschijnlijk ook rekening houden met de merknormen voor de klant, of het nu een bedrijf, een andere organisatie of zelfs een persoon is. Hoewel kleurenpaletten in overeenstemming kunnen zijn met de merkrichtlijnen van een organisatie, kunnen ze niet goed worden vertaald voor online presentaties.
Geel en felgroen zijn bijvoorbeeld erg uitdagend om effectief te gebruiken op websites. Als deze kleuren in de merkrichtlijnen van een bedrijf staan, moeten ze waarschijnlijk alleen als accentkleuren worden gebruikt, omdat het moeilijk is om kleuren te vinden die goed contrasteren met beide.
Evenzo, als uw merkkleuren zwart en wit zijn, betekent dit een groot contrast, maar als u een site heeft met grote hoeveelheden tekst, een zwarte achtergrond met witte tekst zal het lezen een zeer vermoeiende ervaring maken, ondanks de inherente sterkte van het contrast tussen zwart en wit. In dit geval is het raadzaam om de kleuren om te keren, met zwarte tekst op een witte achtergrond. Dat is misschien niet zo visueel interessant, maar het is een veel betere keuze voor contrast en leesbaarheid.