ToolPronto
Controleer kleurcontrast en palet
Meet contrast, vind een geldige variant en kopieer CSS-kleuren.
Kleuren controleren
Tekstcontrast controleren
Toets een tekst- en achtergrondkleur aan de WCAG 2.x-grenzen.
Leesbare kleur begint in de echte context.Leesbare kleur begint in de echte context.
- Contrastverhouding
- 16.68:1
- Normale tekst AA
- ✓ Geslaagd
- Grote tekst AA
- ✓ Geslaagd
Kleurformaten
#17201Brgb(23 32 27)hsl(147 16% 11%)Kleuren controleren
Palet met vijf kleuren
Genereer, vergrendel, controleer, simuleer en exporteer een herbruikbaar kleurenpalet.
Deze vaste weergave is een benadering, geen diagnose of conformiteitstest. Geëxporteerde kleuren blijven gelijk.
Contrastcontrole van het originele palet
In elke rij is de eerste kleur de tekst en de tweede de achtergrond.
- Kleur 1 op kleur 2
#096447 / #E2F3EC6.24:1Normale tekst AA: GeslaagdNormale tekst AAA: Niet geslaagdGrote tekst AA: GeslaagdGrote tekst AAA: Geslaagd - Kleur 1 op kleur 3
#096447 / #17201B2.32:1Normale tekst AA: Niet geslaagdNormale tekst AAA: Niet geslaagdGrote tekst AA: Niet geslaagdGrote tekst AAA: Niet geslaagd - Kleur 1 op kleur 4
#096447 / #F4F6F36.61:1Normale tekst AA: GeslaagdNormale tekst AAA: Niet geslaagdGrote tekst AA: GeslaagdGrote tekst AAA: Geslaagd - Kleur 1 op kleur 5
#096447 / #6D46D91.21:1Normale tekst AA: Niet geslaagdNormale tekst AAA: Niet geslaagdGrote tekst AA: Niet geslaagdGrote tekst AAA: Niet geslaagd - Kleur 2 op kleur 1
#E2F3EC / #0964476.24:1Normale tekst AA: GeslaagdNormale tekst AAA: Niet geslaagdGrote tekst AA: GeslaagdGrote tekst AAA: Geslaagd - Kleur 2 op kleur 3
#E2F3EC / #17201B14.51:1Normale tekst AA: GeslaagdNormale tekst AAA: GeslaagdGrote tekst AA: GeslaagdGrote tekst AAA: Geslaagd - Kleur 2 op kleur 4
#E2F3EC / #F4F6F31.06:1Normale tekst AA: Niet geslaagdNormale tekst AAA: Niet geslaagdGrote tekst AA: Niet geslaagdGrote tekst AAA: Niet geslaagd - Kleur 2 op kleur 5
#E2F3EC / #6D46D95.18:1Normale tekst AA: GeslaagdNormale tekst AAA: Niet geslaagdGrote tekst AA: GeslaagdGrote tekst AAA: Geslaagd - Kleur 3 op kleur 1
#17201B / #0964472.32:1Normale tekst AA: Niet geslaagdNormale tekst AAA: Niet geslaagdGrote tekst AA: Niet geslaagdGrote tekst AAA: Niet geslaagd - Kleur 3 op kleur 2
#17201B / #E2F3EC14.51:1Normale tekst AA: GeslaagdNormale tekst AAA: GeslaagdGrote tekst AA: GeslaagdGrote tekst AAA: Geslaagd - Kleur 3 op kleur 4
#17201B / #F4F6F315.35:1Normale tekst AA: GeslaagdNormale tekst AAA: GeslaagdGrote tekst AA: GeslaagdGrote tekst AAA: Geslaagd - Kleur 3 op kleur 5
#17201B / #6D46D92.80:1Normale tekst AA: Niet geslaagdNormale tekst AAA: Niet geslaagdGrote tekst AA: Niet geslaagdGrote tekst AAA: Niet geslaagd - Kleur 4 op kleur 1
#F4F6F3 / #0964476.61:1Normale tekst AA: GeslaagdNormale tekst AAA: Niet geslaagdGrote tekst AA: GeslaagdGrote tekst AAA: Geslaagd - Kleur 4 op kleur 2
#F4F6F3 / #E2F3EC1.06:1Normale tekst AA: Niet geslaagdNormale tekst AAA: Niet geslaagdGrote tekst AA: Niet geslaagdGrote tekst AAA: Niet geslaagd - Kleur 4 op kleur 3
#F4F6F3 / #17201B15.35:1Normale tekst AA: GeslaagdNormale tekst AAA: GeslaagdGrote tekst AA: GeslaagdGrote tekst AAA: Geslaagd - Kleur 4 op kleur 5
#F4F6F3 / #6D46D95.48:1Normale tekst AA: GeslaagdNormale tekst AAA: Niet geslaagdGrote tekst AA: GeslaagdGrote tekst AAA: Geslaagd - Kleur 5 op kleur 1
#6D46D9 / #0964471.21:1Normale tekst AA: Niet geslaagdNormale tekst AAA: Niet geslaagdGrote tekst AA: Niet geslaagdGrote tekst AAA: Niet geslaagd - Kleur 5 op kleur 2
#6D46D9 / #E2F3EC5.18:1Normale tekst AA: GeslaagdNormale tekst AAA: Niet geslaagdGrote tekst AA: GeslaagdGrote tekst AAA: Geslaagd - Kleur 5 op kleur 3
#6D46D9 / #17201B2.80:1Normale tekst AA: Niet geslaagdNormale tekst AAA: Niet geslaagdGrote tekst AA: Niet geslaagdGrote tekst AAA: Niet geslaagd - Kleur 5 op kleur 4
#6D46D9 / #F4F6F35.48:1Normale tekst AA: GeslaagdNormale tekst AAA: Niet geslaagdGrote tekst AA: GeslaagdGrote tekst AAA: Geslaagd
Wat Kleurcontrast controleren doet
Berekent WCAG-contrast en onderzoekt of paletkleuren voldoende te onderscheiden zijn. Meet contrast, vind een geldige variant en kopieer CSS-kleuren.
Veelgebruikte toepassingen
- Tekst tegen een achtergrond testen.
- Een toegankelijk alternatief vinden.
- Een kleurenpalet beoordelen.
Zo gebruik je deze tool
- Kies voor- en achtergrondkleur.
- Bekijk verhouding en WCAG-resultaten.
- Pas een kleur aan of kopieer een geldige waarde.