Controleer dan twee kleuren aan WCAG AA en AAA en zie de tekst op het scherm. Zet een kleur om tussen HEX, RGB, HSL, HSV en OKLCH en test of tekst makkelijk leesbaar is op zijn achtergrond. Het is gratis en draait in je browser.
Hoe je een kleur omzet
- Gebruik Kiezen om een kleur te kiezen, of typ of plak een waarde in Elke kleur.
- Lees dezelfde kleur als HEX, RGB, HSL, HSV, OKLCH en zijn CSS-naam waar die er is.
- Druk op Kopiëren naast het formaat dat je wilt, of op HEX kopiëren.
Hoe je contrast controleert
- Kies een Tekstkleur en een Achtergrondkleur, of gebruik De hoofdkleur als tekst gebruiken of Als achtergrond gebruiken.
- Lees de contrastverhouding en of die AA en AAA haalt voor normale tekst, Grote tekst van 24px, Vette tekst van 19px en een Knoprand.
- Als het paar niet slaagt, gebruik dan de voorgestelde nabije kleur die wel slaagt.
Welk formaat je moet gebruiken
HEX en RGB beschrijven het rode, groene en blauwe licht in een kleur en werken overal. HSL en HSV beschrijven tint, verzadiging en lichtheid of helderheid, wat het makkelijker maakt een kleur met de hand bij te stellen. OKLCH is het nieuwste CSS-formaat: zijn lichtheid komt overeen met hoe helder kleuren er voor mensen uitzien, dus twee kleuren met dezelfde L zien er echt even licht uit, wat geweldig is voor paletten en thema's. Alle moderne browsers ondersteunen oklch() in CSS.
Hoe de contrastverhouding werkt
De verhouding vergelijkt de relatieve luminantie van de twee kleuren, van 1:1 voor identieke kleuren tot 21:1 voor zwart op wit. Resultaten worden nooit naar boven afgerond, dus 4,49:1 haalt AA niet. Als de tekstkleur doorzichtig is, wordt hij eerst met de achtergrond gemengd. Als een paar niet slaagt, wordt voor beide kanten een nabije kleur voorgesteld die wel slaagt.
WCAG AA vraagt 4,5:1 voor normale tekst en 3:1 voor grote tekst. AAA vraagt 7:1 voor normale tekst en 4,5:1 voor grote tekst. Hieraan voldoen helpt mensen met een slecht gezichtsvermogen en iedereen die op een helder scherm leest.
Invoer die deze tool begrijpt
Drie-, vier-, zes- en achtcijferige HEX met of zonder #, rgb() en rgba() met komma's of spaties, hsl() met deg, turn of rad, hsv(), oklch() en oklab(), de 148 CSS-kleurnamen en gewone getallen zoals 59, 130, 246. Alfa na een schuine streep of als vierde waarde blijft behouden.
Wie gebruikt het
Webontwerpers en ontwikkelaars die een thema bouwen, kleine ondernemers die controleren of hun huisstijlkleuren leesbaar zijn, studenten die dia's maken en iedereen die een kleur in het ene formaat heeft en een ander nodig heeft. Gebruik de kleurenkiezer uit afbeelding om een kleur uit een foto te vinden.
Vragen
Wat is een goede contrastverhouding?
Mik op minstens 4,5:1 voor normale tekst. Hoger is beter, en 7:1 voldoet aan AAA.
Waarom zien dezelfde kleurwaarden er op schermen iets anders uit?
Schermen verschillen in helderheid en kleur. De getallen zijn hetzelfde, maar het scherm verandert hoe ze eruitzien.
Wordt er iets geüpload?
Nee. De omzetting gebeurt in je browser.