IN DEZE HANDLEIDING:
Beste Kleurcontrast gereedschappen
Er zijn een aantal betaalde en gratis tools die UX ontwerpers kunnen helpen bij het analyseren van de kleurenpaletten die je op dit moment gebruikt. De volgende gratis tools zijn een goede plek om te beginnen.
Waarom kleurcontrast checken
Kleurcontrast is belangrijk om te voldoen aan de WCAG voorwaarden.
Contrast toegankelijkheid scherm media accessibility
8 tips kleurenblindheid kleurenblinden webdesign sites
Kleurcontrast richtlijnen kleur licht donker contrast
Gratis tools voor kleurencheck
De volgende gratis hulpmiddelen zijn een goed vertrekpunt om te beginnen:
- WebAIM Contrast Checker – Een eenvoudig hulpmiddel van WebAIM, een non-profitorganisatie die uitgaat van het Centrum voor Personen met een Handicap van de Utah State University
- Colorzilla – Een Firefox-extensie die kleuren rechtstreeks van een website haalt
- WAVE (web evaluation accessibility tool) – Een standalone tool en een Chrome-extensie die kleurcontrast en alle andere WCAG-toegankelijkheidsrichtlijnen onderzoekt
- Google DevTools Lighthouse – Geweldig voor degenen die ook direct met code werken
- Color Contrast Analyser – Dit hulpmiddel van de Paciello Group, die gespecialiseerd is in toegankelijkheid, is downloadbare software voor Windows en Mac
- Contrast Ratio – Een heel goed eenvoudig hulpmiddel van Lea Verou, een specialist in Mens-Computer Interactie. De beste contrast ratio checker die ik ben tegen gekomen.
- Success Criterion 1.4.3 – Contrast (minimum) – Meer informatie over WCAG’s richtlijnen voor contrastverhoudingen en tegemoetkomen aan de standaarden en richtlijnen
Beste extensies voor webpagina checken in Firefox browser
Deze vind ik helemaal top! Ik gebruik dit bijna dagelijks. De Firefox Accessibility Extension en de Web Accessibility Toolbar (voor IE en Opera).
Installeer de extensie. Het ziet er dan zo uit als je de pagina gaat checken. Zie je een rood kader dan gaat het kleurcontrast niet goed:
Deze is wel goed:
Kleurcontrast berekenen volgens WCAG standaard
Je kan hieronder het kleurcontrast berekenen volgens WCAG standaard. Vul rechts je 2 kleurwaarden in en zie de score die erbij past:
See the Pen Understanding the Contrast Ratio by Stacie (@Metahari) on CodePen.
Nog een link om te controleren:
Richtlijnen contrastverhouding testen
Wat het kleurcontrast betreft, stellen de WCAG richtlijnen dat tekst en afbeeldingen van tekst een contrastverhouding van ten minste 4,5:1 moeten hebben.
