Contrastchecker
Controleer het contrast tussen een tekstkleur en de achtergrond volgens WCAG 2.2, gratis en in je browser. De contrastchecker toont de verhouding en welke niveaus slagen. Haalt je kleur een niveau niet, dan stelt hij de dichtstbijzijnde tekstkleur voor die wel slaagt. Er wordt niets verstuurd.
Zo check je het contrast volgens WCAG
- 1Typ of kies een "Tekstkleur"
- 2Typ of kies een "Achtergrondkleur"
- 3Lees de verhouding en "Geslaagd" of "Niet gehaald" per gebruik
- 4Haalt een niveau het niet, kopieer dan de voorgestelde tekstkleur
- De contrastverhouding, met AA en AAA voor elk gebruik
Zo werkt de controle
- Naar beneden afgerond.Een verhouding van 4,499 staat er als 4,49:1, dus wie 4,5:1 ziet, haalt AA echt
- Een voorbeeld dat meeloopt.Grote tekst van 24 px en lopende tekst van 16 px verschijnen in je twee kleuren terwijl je typt
- Er wordt niets verstuurd.Beide kleuren worden door je browser op je eigen apparaat gecontroleerd
Wat je kunt doen
- Een kleur typen als #hex, rgb(), hsl(), hwb(), lab(), lch(), oklch(), CSS-kleurnaam of Tailwind-naam zoals sky-500, of hem kiezen met de kleurkiezer
- De uitslag zien voor vijf soorten gebruik: lopende tekst volgens AA (4,5:1) en AAA (7:1), grote tekst volgens AA (3:1) en AAA (4,5:1), en pictogrammen, randen en formuliervelden volgens AA (3:1)
- De dichtstbijzijnde tekstkleur krijgen die AA of AAA haalt voor lopende tekst. Die houdt de tint van je kleur en wordt alleen lichter of donkerder, en je kunt hem kopiëren
- Met "Omwisselen" tekst en achtergrond van plaats laten wisselen
Goed om te weten
- Met transparantie wordt geen rekening gehouden. Een kleur met een alfawaarde wordt gecontroleerd alsof hij volledig dekt
- Elke kleur wordt eerst afgerond op zijn HEX-waarde, de kleur die een scherm echt toont, en pas dan vergeleken
- Grote tekst betekent 24 px, of 18,66 px vet. Kleinere tekst moet de niveaus voor lopende tekst halen
- Haalt geen lichtere of donkerdere versie van de tekstkleur een niveau op die achtergrond, dan meldt de tool dat in plaats van iets voor te stellen
Vragen
Welke contrastverhouding eist WCAG?
Voor lopende tekst vraagt AA 4,5:1 en AAA 7:1. Grote tekst heeft 3:1 nodig voor AA en 4,5:1 voor AAA. Pictogrammen, randen en formuliervelden hebben 3:1 nodig.
Is #777777 op wit genoeg voor WCAG AA?
Nee. #777777 op wit geeft 4,47:1, net onder 4,5:1. Eén stapje donkerder, #767676, geeft 4,54:1 en haalt AA voor lopende tekst.
Waarom rondt de contrastchecker naar beneden af?
WCAG vergelijkt de exacte verhouding, dus 4,499:1 haalt AA niet. Gewoon afgerond zou er 4,5:1 staan en lijkt het geslaagd. Naar beneden afgerond klopt wat je op het scherm ziet ook met de regel.
Hoe werkt de voorgestelde kleur?
De tool opent met #5B6770 op wit: 5,8:1, genoeg voor AA bij lopende tekst maar niet voor AAA. Voor AAA stelt hij #4F5A63 voor met 7,05:1, dezelfde tint iets donkerder.
Worden mijn kleuren naar een server gestuurd?
Nee. Het contrast wordt door je browser op je eigen apparaat berekend. Er gaat geen verzoek met je kleuren de deur uit.
Meer tools in Web en code
Deze pagina bestaat niet. Zoek hieronder of sleep een bestand hierheen om de tool te vinden die je nodig hebt.
Eén site voor elke bestandsklus. Wat is de jouwe?
Stop met hoppen tussen convertersites. Kies uit 410+ tools, of een recipe die er meerdere achter elkaar zet.
- Bestanden blijven op je apparaat
- Geen watermerk
- Werkt offline
Sleep een bestand hierheen
Een geplakt bestand werkt ook.
of zoek een tool
Open een app
Van ‘ugh, dit bestand’ naar klaar, in drie stappen.
- Sleep het erin, of kies een taak
Geen bestand? Zoek wat je nodig hebt. Bestanden worden op je eigen apparaat verwerkt, niet geüpload voor verwerking.
- Kies wat je wilt
Kleiner, een ander formaat, ondertekend, samengevoegd. Eén klik, zonder eerst instellingen te bestuderen.
- Maak er een recept van
Elke week dezelfde drie stappen? Zet ze één keer achter elkaar en voer de volgende keer hetzelfde recept uit.
Eén goedgekeurde gereedschapskist voor het hele team.
Op kantoor, op de bouwplaats of bij een bureau: teams werken de hele dag met vertrouwelijke bestanden. ToolRecipe geeft iedereen dezelfde tools en dezelfde recepten, en de bestanden worden verwerkt op ieders eigen computer.
- Bestanden worden verwerkt op het apparaat van de medewerker
- Bedrijfsrecepten die iedereen op dezelfde manier uitvoert
- Eén plek in plaats van tien converteersites