Kleurcontrast Checker
Filmquiz bracht knappe ex-yogi van de wijs
Filmquiz bracht knappe ex-yogi van de wijs
Wat is het Kleurcontrast Checker
Deze tool meet de contrastverhouding tussen een tekstkleur en een achtergrondkleur en toetst die aan de WCAG 2.1-toegankelijkheidsrichtlijnen. Hij toont een live voorbeeld van beide kleuren samen en vertelt je of het paar AA of AAA haalt voor normale en grote tekst, zodat je leesbaarheidsproblemen opvangt voordat ze in productie komen.
Hoe te gebruiken
- Kies of typ de tekstkleur in het eerste veld, als HEX-code.
- Kies of typ de achtergrondkleur in het tweede veld.
- Bekijk de contrastverhouding en de geslaagd/mislukt-badges voor AA en AAA.
- Klik op de wisselknop om de kleuren omgekeerd te testen.
- Kopieer de URL om het exacte paar met je team te delen.
Wanneer te gebruiken
Kies je bodytekst voor een nieuw ontwerp en twijfel je of het leesbaar genoeg is? Voer je tekstkleur en achtergrond in, bijvoorbeeld #767676 op #FFFFFF, en je krijgt een verhouding van 4,54:1: geslaagd voor AA normale tekst maar mislukt voor AAA. Dat is het verschil tussen een toegankelijk product en een gemarkeerde audit, of je nu een klantsite beoordeelt of je eigen app uitbrengt.
Veelgestelde vragen
Wat is een goede contrastverhouding voor tekst?
WCAG AA vereist minstens 4,5:1 voor normale tekst en 3:1 voor grote tekst (18pt of 14pt vet en groter). WCAG AAA is strenger: 7:1 voor normale tekst en 4,5:1 voor grote tekst.
Wat is de maximaal mogelijke contrastverhouding?
21:1, de verhouding tussen zuiver zwart (#000000) en zuiver wit (#FFFFFF). Geen enkel kleurpaar kan die overtreffen.
Waarom zakten mijn kleuren voor AA terwijl het ontwerp er voor mij prima uitziet?
Contrastverhouding meet toegankelijkheid, geen persoonlijke smaak. Iemand met slechtziendheid, of wie een scherm in fel zonlicht bekijkt, heeft meer contrast nodig dan een paar dat er voor gemiddeld zicht prima uitziet.
Controleert deze tool ook kleurenblindheid?
Nee. Deze tool controleert luminantiecontrast volgens de WCAG-formule, wat alle gebruikers helpt, waaronder veel vormen van kleurenblindheid, maar hij simuleert geen specifieke kleurzienstoornissen.
Kan ik deze tool delen met mijn ingevulde gegevens?
Ja. De URL wordt automatisch bijgewerkt terwijl je kleuren kiest. Kopieer de link uit de adresbalk of gebruik de Deel-knop, iedereen die de link opent ziet jouw exacte kleuren al klaar.
Gerelateerde tools
Beeldverhouding Berekenen
Bereken de beeldverhouding, vind de ontbrekende breedte of hoogte en schaal afbeeldingen en video zonder de verhoudingen te vervormen. Gratis.
Base64 Decoder
Decodeer Base64-strings direct naar platte tekst in je browser. Ondersteunt volledige Unicode-uitvoer inclusief emoji's. Gratis online Base64-decoder.
Base64 Encoder
Codeer elke tekst direct naar Base64 in je browser. Ondersteunt Unicode, emoji's en speciale tekens. Gratis online Base64-encoder.