Wat meet een contrastchecker?
Een contrastchecker vergelijkt de relatieve luminantie van een voorgrondkleur en een achtergrondkleur. Het resultaat wordt weergegeven als een verhouding van 1:1, waarbij de kleuren visueel identiek zijn, tot 21:1, waarbij zwart en wit het maximale contrast hebben.
Deze tool geeft WCAG-achtige slaag- en faalindicatoren weer voor normale tekst en grote tekst. Het is nuttig voor vroege ontwerpbeslissingen, componentstatussen, thema-tokens en snelle controles vóór een meer volledige toegankelijkheidsbeoordeling.
Hoe de resultaten te lezen
| Check | Minimale verhouding | Meaning |
|---|---|---|
| AA normale tekst | 4.5:1 | Veelvoorkomend doel voor reguliere lopende tekst. |
| AA grote tekst | 3:1 | Toegepast op grotere of zwaardere tekst waarvoor lettervormen gemakkelijker te lezen zijn. |
| AAA normale tekst | 7:1 | Strenger doel voor reguliere tekst in hoogtoegankelijkheidscontexten. |
| AAA grote tekst | 4.5:1 | Strenger doel voor grote tekst. |
Wat deze tool niet aantoont
Een verhouding is een sterk signaal, maar het is geen volledige toegankelijkheidsaudit. Werkelijke leesbaarheid hangt ook af van typografie, letterdikte, hover-/focusstatussen, uitgeschakelde staten, omliggende kleuren, beeldschermkwaliteit en of tekst over afbeeldingen of verlopen verschijnt.
- Transparantie en verlopen vereisen een aparte beoordeling.
- Kleine pictogrammen en dunne lijnen hebben mogelijk sterker contrast nodig dan nabijgelegen tekst.
- Merkkleuren kunnen in de ene combinatie slagen en in een andere falen.
- QR-scancontrast en tekstleesbaarheidscontrast zijn gerelateerd, maar niet dezelfde controle.
Manieren om zwak contrast te verbeteren
Maak de voorgrond donkerder
Voor lichte achtergronden, breng de tekstkleur dichter naar een donkerder neutraal of een sterkere merkkleur.
Maak de achtergrond lichter
Kleine aanpassingen van de achtergrond kunnen ervoor zorgen dat een merkkleur slaagt zonder het voorgrondtoken te wijzigen.
Vergroot de tekstgrootte of -dikte
Grote of zwaardere tekst heeft een lagere AA-drempel, maar heeft nog steeds voldoende visuele scheiding nodig.
Controleer elke status
Hover-, focus-, uitgeschakelde, geselecteerde en foutstatussen gebruiken vaak andere kleurparen.
Veelgestelde vragen
Is dit een volledige WCAG-conformiteitsscan?
Nee. Het berekent WCAG-achtige contrastdrempels voor kleurparen. Een volledige beoordeling controleert ook lay-out, toetsenbordgedrag, semantiek, focusstatussen, tekstalternatieven en de daadwerkelijk gerenderde typografie.
Wat geldt als grote tekst?
WCAG-richtlijnen beschouwen grote tekst als ongeveer 18 pt reguliere tekst of 14 pt vette tekst en groter. Controleer in webwerk de daadwerkelijk gerenderde grootte en dikte, niet alleen het ontwerplabel.
Kan ik dit gebruiken voor transparante kleuren?
Deze compacte checker gebruikt ondoorzichtige sRGB-kleuren. Als uw UI transparantie gebruikt, meng dan eerst de uiteindelijk gerenderde voor- en achtergrond en controleer vervolgens dat resulterende paar.
Betekent voldoen aan AA dat het ontwerp altijd leesbaar is?
Niet altijd. Zeer dunne lettertypen, kleine UI-labels, drukke achtergronden en beeldschermen van lage kwaliteit kunnen tekst nog steeds moeilijk leesbaar maken. Beschouw de verhouding als één belangrijk signaal.
Is dit hetzelfde als QR-codecontrast?
Nee. Het contrast voor QR-codes beïnvloedt de betrouwbaarheid van scanners, terwijl deze tool zich richt op leesbaarheidsdrempels voor tekst. De wiskunde is gerelateerd, maar de praktische beslissing is anders.