ThumbProof
Contrast telt zwaarder dan kleur. Houd de gemiddelde helderheid tussen ongeveer 22% en 80% zodat de afbeelding niet opgaat in een donkere of lichte feed, mik op een RMS-luminantiecontrast van 0,20 of hoger en geef tekst een contrastverhouding van minstens 4,5:1 met wat erachter zit. Check de thumbnail daarna in grijstinten en met een kleurzichtsimulatie: komt het onderwerp nog los van de achtergrond, dan werkt het ontwerp voor iedereen.
Waarom contrast op feedformaat wint van kleur
Als een afbeelding krimpt tot 168×94 pixels, middelen fijne kleurverschillen uit. Twee verzadigde kleuren met dezelfde helderheid, zeg rood en groen, worden voor het luminantiekanaal van het oog bijna hetzelfde grijs, en juist dat kanaal gebruiken we het meest om randen en vormen te zien. Licht tegen donker overleeft daarentegen verkleining, schittering en goedkope schermen.
Daarom leggen toegankelijkheidsrichtlijnen contrast ook vast als verhouding in luminantie, niet als lijst toegestane kleuren. De regel voor normale webtekst is minstens 4,5:1, en voor grote tekst minstens 3:1. Thumbnailtekst is meestal groot en vet, maar staat op een foto in plaats van een egale achtergrond, dus mikken op 4,5:1 geeft een veiligheidsmarge.
“De visuele presentatie van tekst en afbeeldingen van tekst heeft een contrastverhouding van minstens 4,5:1”
Understanding SC 1.4.3 Contrast (Minimum) — W3C WCAG 2.2 · citaat vertaald uit het Engels
Doelcijfers voor helderheid en contrast
De visuele audit van ThumbProof geeft drie cijfers die met contrast te maken hebben. Gemiddelde helderheid is de gemiddelde luminantie van de afbeelding, van 0% (zwart) tot 100% (wit). RMS-contrast is de standaardafwijking van de luminantie, een robuuste maat voor hoeveel licht-donkervariatie er is. Scherpte meet fijn randdetail na verkleining tot 168×94.
| Maat | Zwak | Matig | Sterk / doel |
|---|---|---|---|
| Gemiddelde helderheid | < 22% of > 80% | 22–30% of 70–80% | 30–70% |
| RMS-contrast | < 0,12 | 0,12–0,20 | ≥ 0,20 |
| Contrastverhouding tekst | < 3:1 | 3:1–4,5:1 | ≥ 4,5:1 |
| Scherpte op 168×94 | < 0,05 | 0,05–0,09 | ≥ 0,09 |
Deze drempels zijn praktische doelen van de tool, geen platformregels. Een dramatische, overwegend donkere thumbnail kan nog steeds werken als een helder onderwerp sterk contrast geeft; de helderheidscheck waarschuwt alleen dat hij kan verdwijnen in een donkere feed.
Donkere modus en lichte modus
Feeds worden in donkere modus op een bijna zwarte achtergrond getoond en in lichte modus op wit of lichtgrijs. Een thumbnail met een zwarte rand of donkere vignet verliest zijn randen in donkere modus, terwijl een bleke thumbnail in pasteltinten zijn randen verliest in lichte modus. Veel kijkers gebruiken ’s avonds op de telefoon de donkere modus en overdag op de desktop de lichte, dus je moet door beide heen komen.
De snelste check is het feedthema in de preview omzetten. Kijk naar de omtrek van de thumbnail, niet naar het onderwerp: je wilt in beide thema’s een duidelijke rand tussen afbeelding en pagina. Verdwijnt de rand, maak de schaduwen dan iets lichter, voeg een lichter achtergrondelement toe of een subtiel kader.
Kleurzichtafwijkingen
Kleurenblindheid komt vaak voor. Volgens het Amerikaanse National Eye Institute is rood-groenblindheid de meest voorkomende vorm, en die treft mannen veel vaker dan vrouwen. Bij een groot publiek ziet een merkbaar deel van de kijkers het verschil niet tussen een rode pijl en een groene achtergrond.
ThumbProof simuleert protanopie (roodblind), deuteranopie (groenblind), tritanopie (blauwblind) en achromatopsie (geen kleur). Je hoeft niet voor elk geval apart te ontwerpen. Slaagt de thumbnail voor de grijstintencheck, wat betekent dat het onderwerp alleen al door helderheid loskomt, dan werkt hij voor bijna alle soorten kleurzicht.
| Simulatie | Wat verandert | Typische fout |
|---|---|---|
| Protanopie | Rood oogt donker en bruinig | Rode tekst op donkere achtergrond verdwijnt |
| Deuteranopie | Rood en groen lopen in elkaar over | Vergelijkingen ‘goed/fout’ in groen vs. rood |
| Tritanopie | Blauw en geel verschuiven | Gele tekst op lichtblauw |
| Achromatopsie | Alleen helderheid blijft over | Elk kleurpaar met dezelfde helderheid |
Check kleur en contrast in vijf stappen
- 01
Laad de thumbnail
Zet je afbeelding in de safe-zone-checker of de feedpreview.
- 02
Doe de knijptest
Vervaag de afbeelding. Het onderwerp moet een duidelijke vorm blijven.
- 03
Schakel naar grijstinten
Haal de kleur weg. Tekst en onderwerp moeten nog op helderheid loskomen.
- 04
Wissel tussen donkere en lichte feed
Zorg dat de randen van de thumbnail op beide achtergronden zichtbaar blijven.
- 05
Probeer de kleurzichtmodi
Loop de vier simulaties door en lees daarna de rijen voor helderheid en contrast in de uitsplitsing van de audit.
Een palet kiezen dat opvalt
Kijk wat er al in je niche gebeurt. Gebruikt elke gamingthumbnail verzadigd paars en blauw, dan valt een warm geel of oranje accent meer op dan nog een neonblauw. Houd het palet klein: één dominante achtergrondtint, één onderwerp en één accent voor tekst of een belangrijk detail.
Gebruik verzadiging voor nadruk, niet overal. Als alles verzadigd is, valt niets op. Een ingetogen achtergrond met één verzadigd onderwerp leest op klein formaat meestal beter dan een volledig verzadigd beeld, omdat het oog direct naar het ene afwijkende gebied gaat.
- Eén achtergrondtint, één onderwerp, één accent
- Kies een accent dat zeldzaam is in je niche
- Ingetogen achtergrond, verzadigd onderwerp
Tekst op drukke foto’s
Tekst direct op een gedetailleerde foto zakt bijna altijd ergens langs de letters voor de contrasttest. Er zijn vier betrouwbare oplossingen: een dikke rand (ongeveer 6–10% van de letterhoogte), een zachte slagschaduw, een effen of halfdoorzichtig vlak achter de woorden, of de tekst verplaatsen naar een rustig deel van het beeld, zoals lucht of een kale muur.
Check het resultaat in grijstinten. De letters moeten over hun hele omtrek duidelijk lichter of donkerder zijn dan alles eromheen, niet alleen gemiddeld.
Contrast over een heel kanaal, niet één afbeelding
Kijkers zien vaak meerdere van je video’s naast elkaar op een kanaalpagina of in een playlist. Gebruikt elke thumbnail hetzelfde donkere palet, dan lijkt de pagina één blok en zijn losse video’s moeilijk uit elkaar te houden. Houd een consistente stijl (lettertypes, accentkleur, kadrering), maar wissel de dominante achtergrondtint af tussen opeenvolgende uploads.
Een praktische regel is om om de paar video’s af te wisselen tussen een donkerdere en een lichtere achtergrond, en de accentkleur gelijk te houden. Zo blijft het kanaal herkenbaar en heeft elke thumbnail toch een eigen rand. Gebruik de kanaalpaginaweergave in de preview om een nieuwe upload naast de vorige te checken.
| Kanaalpatroon | Effect op de kanaalpagina | Oplossing |
|---|---|---|
| Alleen donkere achtergronden | Video’s smelten samen tot één blok | Wissel donkere en middentonen af |
| Elke video willekeurige kleuren | Geen herkenbare stijl | Houd één accentkleur en lettertype |
| Zelfde lay-out, andere tinten | Herkenbaar en onderscheidend | Zo doorgaan |
Schermen, helderheid en compressie
Kijkers zien je thumbnail op van alles, van felle OLED-telefoons tot doffe kantoormonitors en tv’s aan de andere kant van de kamer. Donker detail verdwijnt als eerste op goedkope of donkere schermen, en nachtmodi op telefoons verlagen het contrast nog verder. Houd belangrijke vormen uit de donkerste 10% van het toonbereik, waar ze egaal zwart worden.
Ook compressie vreet contrast. JPEG-compressie strijkt eerst fijne kleurvariatie glad, dus subtiele verlopen en texturen met weinig contrast worden blokkerig. Steunt je ontwerp op een subtiele gloed of zacht verloop voor scheiding, versterk dat dan, anders kan het effect verdwijnen nadat het platform de afbeelding opnieuw codeert. Een snelle test: exporteer als JPEG op kwaliteit 70 en kijk of het ontwerp overeind blijft; zo ja, dan overleeft het elke verwerking door het platform.
- Houd belangrijke vormen uit de donkerste tinten
- Versterk subtiele gloed en verlopen
- Test een export op kwaliteit 70
Uitgewerkt voorbeeld: een marktscène met weinig contrast
Een reismaker gebruikt een foto van een drukke markt: honderden kleurrijke kraampjes, allemaal ongeveer even helder, met de gele tekst “HIDDEN GEM” erop. Op volledig formaat oogt het levendig. Op 168×94 wordt het grijze ruis, het RMS-contrast is 0,11 en de gele tekst heeft een verhouding van ongeveer 1,8:1 tegen de kraampjes.
De maker maakt de achtergrond 30% donkerder, licht één kraampje uit als blikvanger en zet de tekst in een donker vlak. Het RMS-contrast stijgt naar 0,24, de tekstverhouding naar 7:1, en de knijptest toont één duidelijke vorm.
| Maat | Voor | Na |
|---|---|---|
| Gemiddelde helderheid | 48% | 36% |
| RMS-contrast | 0,11 | 0,24 |
| Tekstcontrast | 1,8:1 | 7:1 |
| Knijptest | Ruis | Duidelijke blikvanger |
Veelgemaakte fouten met kleur en contrast
Kleurparen met dezelfde helderheid
Rood op groen of blauw op paars oogt fel, maar loopt in grijstinten in elkaar over.
Donkere randen en vignetten
Die wissen in donkere modus de rand van de thumbnail uit.
Dunne gekleurde tekst op foto’s
Zonder rand of vlak zakt die ergens langs de letters voor het contrast.
Alles oververzadigen
Als alles schreeuwt, valt niets op. Houd één accent.
Lichte modus negeren
Pastelontwerpen die in donkere modus stralen, kunnen op wit verdwijnen.
Exports met breed gamut
Display P3- of CMYK-bestanden kunnen kleuren verschuiven. Exporteer in sRGB.
Formaat, resolutie, bestandslimieten en safe zones van een videothumbnail
Checklist voor thumbnails met hoge CTR: 7 visuele principes die opvallen
Titelafkapping per apparaat: pixelbreedte, geen aantal tekens
Tekst op thumbnails: hoeveel woorden, hoe groot en waar
Gezichten en blikvanger: één ding dat je niet kunt missen