Tools kleurcontrast checken analyse kleuren webpagina

Test of de kleuren en het contrast tussen de kleuren van je WordPress website toegankelijk zijn.

Logo cursus traing wordpress

Tools kleurcontrast checken analyse kleuren webpagina

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.

Gratis tools voor kleurencheck

De volgende gratis hulpmiddelen zijn een goed vertrekpunt om te beginnen:

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 dan gaat het kleurcontrast niet goed:

tools kleurcontrast checken kleuren webbrowser webaim 02
tools kleurcontrast checken kleuren webbrowser Firefox webaim

Deze is wel goed:

tools kleurcontrast checken kleuren webbrowser webaim 01
tools kleurcontrast checken kleuren webbrowser webaim

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.

kleurcontrast toegankelijkheid richtlijnen toegankelijkheid kleur licht donker contrast website tekst typografie
kleurcontrast voor toegankelijkheid licht donker contrast tekst

Wil je meer details over Tools kleurcontrast checken analyse kleuren webpaginaof info?

Wil je meer weten? Veel bezoekers met interesse in Tools kleurcontrast checken analyse kleuren webpagina bekeken ook de onderstaande handleidingen:


Scroll naar boven