ImageColorPicker.com

Kleurcontrastcontrole

Test de contrastverhouding tussen voorgrond- en achtergrondkleuren om toegankelijkheid te garanderen.

Controleer je kleuren

Test kleurcombinaties om te zorgen dat ze voldoen aan de WCAG-toegankelijkheidsnormen voor tekstleesbaarheid.

20.26 tot 1
Contrast
AAA
Tekstresultaat
Super

Vergeleken: #000000 op #FBFBF9

Tekst

16px, Regular (400)

Telt als normale tekst.

  • AA (WCAG 1.4.3): minstens 4.5:1

    Geslaagd

  • AAA (WCAG 1.4.6): minstens 7:1

    Geslaagd

UI-onderdelen en grafische elementen

Pictogrammen, randjes van invoervelden, focusindicatoren en andere onderdelen die je moet kunnen zien om de interface te gebruiken.

  • AA (WCAG 1.4.11): minstens 3:1

    Geslaagd
20.26 op 1. Tekst: voldoet aan AA, voldoet aan AAA. UI-componenten: voldoet.
Hoe dit wordt gecontroleerd
Vergeleken kleuren (na mengen)
Tekst #000000 op achtergrond #FBFBF9
Relatieve luminantie
Tekst 0.0000, achtergrond 0.9634
Formule
(L1 + 0.05) / (L2 + 0.05) waarbij L1 de luminantie van de lichtere kleur is en L2 van de donkere.
Exacte ratio
20.2686 op 1, weergegeven als 20.26 op 1. De getoonde waarde wordt afgekapt, niet afgerond, dus het lijkt nooit beter dan het is. De exacte waarde is degene die vergeleken wordt met de eis.

Tekstgrootte: 16px, Regular (400)

Telt als normale tekst. Grote tekst is minstens 24px (18pt), of minstens 18.67px (14pt) bij vet (gewicht 700 of meer). Groottes worden afgekapt weergegeven, niet afgerond.

Telt als normale tekst. Grote tekst is minstens 24px (18pt), of minstens 18.67px (14pt) bij vet (gewicht 700 of meer). Groottes worden afgekapt weergegeven, niet afgerond.

Aa
Voorbeeldtitel

De snelle bruine vos springt over de luie hond

Voorbeeld van kleine tekst (12px)

Tekst
#000000
Achtergrond
#fbfbf9

WCAG-normen

Niveau AA

Minimale contrastverhouding van 4.5:1 voor normale tekst en 3:1 voor grote tekst. Vereist voor de meeste websites.

Niveau AAA

Verhoogde contrastverhouding van 7:1 voor normale tekst en 4.5:1 voor grote tekst. Aanbevolen voor optimale toegankelijkheid.

Kleurcontrastcontrole

Bereken de contrastverhouding van tekst- en achtergrondkleuren.

Kies een kleur met behulp van de color picker voor tekst- en achtergrondkleur of voer een kleur in RGB hexadecimaal formaat in (bijv. #259 of #2596BE). Je kunt de schuifregelaar aanpassen om een kleur te selecteren. De Web Content Accessibility Guidelines (WCAG) heeft een specifieke richtlijn om te helpen bepalen of tekst leesbaar is voor ziende gebruikers. Dit criterium gebruikt een bepaald algoritme om kleurencombinaties in vergelijkbare verhoudingen in kaart te brengen. Volgens deze formule stelt WCAG dat een 4.5:1 kleurcontrast ratio met tekst en zijn achtergrond voldoende is voor normale tekst, en grote tekst (18+ pt normaal, of 14+ pt vet) een minimum contrastverhouding van 3:1 moet hebben.

Belangrijkste kenmerken

  • Realtime contrastverhouding berekening
  • WCAG AA & AAA nalevingscontrole
  • HSL schuifregelaars voor verfijning
  • Meerdere voorbeeldformaten

Geavanceerde tools

  • Automatisch kleuren corrigeren
  • Tekst- en achtergrondvoorbeelden
  • Kleurnaam detectie
  • Resultaten exporteren

Veelgestelde vragen

Voor WCAG AA-naleving vereist normale tekst een minimale contrastverhouding van 4,5:1, terwijl grote tekst (18pt of 14pt vet) 3:1 vereist.

WCAG AAA vereist hogere contrastverhoudingen: 7:1 voor normale tekst en 4,5:1 voor grote tekst, tegenover 4,5:1 en 3:1 bij AA.

Gebruik onze functie voor automatisch corrigeren om tekst- of achtergrondkleuren aan te passen met behoud van je ontwerp, of pas kleuren handmatig aan met de HSL-schuifregelaars met visuele indicatoren die de optimale zones voor AA/AAA-naleving tonen.

De groene zones en AA/AAA-markeringen tonen de optimale bereiken om WCAG-naleving te halen. De richtingsaanwijzingen (Lichter/Donkerder) helpen je naar een beter contrast op basis van je huidige kleurcombinatie.

Ja, je kunt elke hexkleurcode invoeren of de kleurkiezer gebruiken om eigen kleuren te kiezen. De URL wordt automatisch bijgewerkt, zodat je specifieke kleurcombinaties kunt delen.