Encoders & Utilities

Color Converter & WCAG Contrast

HEX ↔ RGB ↔ HSL met paletgenerator en WCAG-contrastchecker.

Pick or paste a color Accepts HEX, rgb()/rgba(), hsl()/hsla(). Try the eyedropper or paste from anywhere.

Try:

Over deze tool

Color Converter vertaalt kleuren wederzijds tussen de formaten die designers en developers dagelijks gebruiken: HEX (#3366FF), RGB / RGBA, HSL / HSLA, HSV, OKLCH, CMYK, plus de benoemde CSS-kleuren (rebeccapurple, tomato, alle 147). Typ een willekeurig formaat en de rest update direct; alpha blijft behouden in de formaten die het ondersteunen.

Twee extra's maken dit meer dan een passieve converter. De palette-generator produceert tonale schalen (50/100/.../900) en harmoniegroepen (complementair, triadisch, tetradisch, gesplitst-complementair) rond uw basiskleur — nuttig voor het invullen van een designsysteem. De WCAG-contrastchecker kiest een voorgrond en achtergrond, berekent de contrastverhouding per WCAG 2.2 en vertelt u of het paar AA passeert (4,5:1 klein, 3:1 groot) en AAA (7:1 klein, 4,5:1 groot).

Wanneer gebruikt u deze tool

Een designsysteem bouwen. Kies één merkkleur, krijg een volledige tonale ladder voor primaire/secundaire/neutrale rollen.
Toegankelijkheid auditen. Voer elk tekst/achtergrond-paar door de contrastchecker; onder 4,5:1 betekent dat het WCAG AA-acceptatiecriterium faalt.
CSS migreren. Converteer oude hex-constanten naar OKLCH voor de moderne wide-gamut-workflow.
Designer-developer-overdracht. Vertaal Figma RGB-waarden naar CSS hex (of omgekeerd) zonder afrondingsfouten.

Over WCAG-contrast en OKLCH

WCAG 2.2-contrast gebruikt de historische "relatieve luminantie"-formule — adequaat voor de meeste gevallen maar bekend om bepaalde kleurparen te over- en onderschatten. APCA (het algoritme gepland voor WCAG 3) corrigeert dit met een perceptueel uniforme metriek; we tonen beide cijfers zodat u vooruit kunt plannen. OKLCH is een recente CSS-kleurruimte die perceptueel uniform is — gelijke numerieke stappen in L (lichtheid) zien er gelijk uit voor het oog, wat het genereren van consistente paletten veel makkelijker maakt dan met HSL.

Veelgestelde vragen

Wat is de WCAG AA-drempel?

Voor normale tekst: contrastverhouding ≥ 4,5:1 tussen tekst en achtergrond. Voor grote tekst (≥ 18pt regulier of ≥ 14pt vet): verhouding ≥ 3:1. De AAA-tier is strenger (7:1 / 4,5:1). De meeste publieke sites streven naar AA; overheids- en gezondheidszorg-interfaces vereisen steeds vaker AAA. Onze checker toont pass/fail voor elke drempel zodat u de getallen niet hoeft te onthouden.

Waarom zijn HEX en RGB equivalent?

Ze zijn dezelfde kleur anders geschreven. #3366FF is gewoon een afkorting voor "rood=0x33 (51), groen=0x66 (102), blauw=0xFF (255)" — drie bytes. RGB-notatie in CSS (rgb(51, 102, 255)) schrijft dezelfde drie bytes in decimaal. HEX is compacter (7 tekens vs ~17); RGB is leesbaarder wanneer u op de kanalen moet rekenen. Gebruik wat in uw context past; het resultaat is identiek.

Wat is OKLCH en moet ik het gebruiken?

OKLCH is een CSS Color 4-kleurruimte ontworpen om perceptueel uniform te zijn — gelijke numerieke sprongen in L (lichtheid), C (chroma) of H (tint) zien er gelijk uit voor het oog. HSL is niet uniform; een felgeel bij L=80 ziet er veel feller uit dan een marineblauw bij L=80. Voor designsystemen en tonale paletten is OKLCH dramatisch makkelijker om mee te werken. Browserondersteuning is uitstekend (Safari 16.4+, Chrome 111+, Firefox 113+).

Ondersteunt de contrastchecker transparantie?

Ja — semi-transparante voorgronden worden samengesteld tegen de achtergrondkleur voordat het contrast wordt berekend, wat is wat mensen werkelijk zien. rgba(0,0,0,0.6) op wit rendert als dezelfde kleur als #666666 op wit, en we behandelen ze identiek. Als u tegen een complexe achtergrond componeert (afbeelding, gradient), kies de gemiddelde achtergrondkleur als referentie.