Kleurcontrastcontrole

Wat is Kleurcontrastcontrole?

De Kleurcontrastcontrole is een gratis online WCAG- en APCA-contrastcontrole voor ontwerpers, ontwikkelaars en toegankelijkheidstesters. De tool accepteert kleuren als HEX (#rgb, #rrggbb en 8-cijferig #rrggbbaa met alfa), rgb()/rgba() en hsl()/hsla(), composeert een doorschijnende voorgrond over de achtergrond vóór het meten en geeft zowel de WCAG 2.1-verhouding (1:1 tot 21:1) als de APCA Lc-helderheidscontrastscore. Hij markeert WCAG 2.1 niveau AA (4.5:1 normaal, 3:1 groot) en AAA (7:1 normaal, 4.5:1 groot), voegt een 3:1-badge toe voor niet-tekstuele UI-componenten en afbeeldingen, en kan de dichtstbijzijnde geslaagde voorgrond voorstellen — alleen de helderheid wordt aangepast tot AA of AAA wordt gehaald — die je met één klik toepast.

Kleurcontrastcontrole gebruiken

1. Voer de voorgrondkleur (tekst) in als HEX, rgb() of hsl() — 8-cijferige HEX of rgba met alfa wordt geaccepteerd — of klik op de kleurkiezer om er visueel een te kiezen.
2. Voer de achtergrondkleur op dezelfde manier in; een halftransparante voorgrond wordt erover gecomposeerd (en de achtergrond over wit) voordat het contrast wordt gemeten.
3. Gebruik de knop Wisselen om voorgrond en achtergrond op elk moment om te wisselen.
4. Lees de WCAG 2.1-contrastverhouding en de APCA Lc-score die er direct naast staat.
5. Bekijk de AA- en AAA-badges voor normale en grote tekst, plus de 3:1-badge voor UI-componenten en afbeeldingen.
6. Als een paar zakt, bekijk je de dichtstbijzijnde geslaagde AA- of AAA-kleur en klik je op Toepassen om de voorgrond bij te werken.

Voorbeelden

Voorgrond #595959, Achtergrond #ffffff

Verhouding 7.00:1 met een hoge APCA Lc — slaagt voor AA en AAA voor normale en grote tekst

Voorgrond #00000080 (50% zwart) op #ffffff

Eerst gecomposeerd tot een effen grijs, daarna worden de WCAG-verhouding en APCA Lc berekend

Voorgrond #999999 op #ffffff — 2.85:1, zakt voor AA

Open de dichtstbijzijnde AA-kleur en klik op Toepassen om 4.5:1 te halen met dezelfde tint

Veelgestelde vragen

Welke contrastverhoudingen vereist WCAG?

WCAG 2.1 niveau AA vereist ten minste 4.5:1 voor normale tekst en 3:1 voor grote tekst; niveau AAA vereist 7:1 en 4.5:1. Niet-tekstuele UI-componenten en grafische objecten (SC 1.4.11) vereisen 3:1. Deze controle toont een geslaagd/gezakt-badge voor elk van die drempels.

Wat is de APCA Lc-score?

APCA (Accessible Perceptual Contrast Algorithm) is de contrastmethode die voor WCAG 3 is voorgesteld. Hij geeft een helderheidscontrast-waarde (Lc) van ongeveer 0 tot 108, waarbij hoger meer contrast betekent, en houdt rekening met polariteit (donker op licht versus licht op donker). Hij wordt naast de WCAG 2.1-verhouding getoond en gebruikt eigen richtlijnniveaus in plaats van één geslaagd/gezakt.

Hoe werkt de suggestie voor de dichtstbijzijnde geslaagde kleur?

Hij behoudt de tint en verzadiging van de voorgrond en past alleen de helderheid lichter of donkerder aan totdat het contrast met de achtergrond AA (4.5:1) of AAA (7:1) haalt; daarna pas je hem met één klik toe. Als de achtergrond een middentoon heeft en het doel niet haalbaar is, toont hij in plaats daarvan de dichtstbijzijnde mogelijke kleur.

Welke kleurformaten kan ik invoeren?

HEX (#rgb, #rrggbb, plus #rgba en 8-cijferig #rrggbbaa met alfa), rgb()/rgba() en hsl()/hsla(), met een native kleurkiezer voor elk veld. Een halftransparante voorgrond wordt over de achtergrond gecomposeerd — die zelf eerst op wit wordt afgevlakt — voordat de verhouding wordt berekend. Benoemde kleuren worden niet ondersteund.

Worden mijn kleuren naar een server gestuurd?

Nee. Alle parsing, compositie en berekeningen van luminantie, verhouding en APCA draaien volledig in je browser met JavaScript — er worden geen kleuren geüpload en er wordt niets naar een server gestuurd, dus het werkt privé en zelfs offline zodra de pagina is geladen.