Leesbaar voor iedereen

Een grote tussenkop

Bij lopende tekst doet weinig contrast het meeste pijn, omdat je die langer en in een kleine letter leest. Een tekstlink

Knop

Tekstkleur

Tekstdekking

Achtergrondkleur

Kleurenblindheid simuleren

Thema

Meer informatie over kleurcontrast

Kleurcontrastchecker

Controleer of tekst leesbaar is op zijn achtergrond voordat je een ontwerp publiceert. Kies of typ een tekstkleur en een achtergrondkleur, en de checker toont de WCAG 2.x-contrastverhouding met geslaagd of niet geslaagd voor AA en AAA, voor normale en grote tekst en voor UI-onderdelen. Een live voorbeeld, simulatie van kleurenblindheid en voorgestelde oplossingen helpen je een paar te vinden dat werkt. Kies een tekstkleur en een achtergrond als HEX, RGB of HSL. De WCAG-contrastverhouding, de AA- en AAA-resultaten en het voorbeeld worden bijgewerkt terwijl je typt, en de dichtstbijzijnde kleuren die wel slagen worden voorgesteld. Alles wordt in deze browser bewaard.

Hoe het werkt

Kies een tekstkleur en een achtergrondkleur, of typ ze als HEX, RGB of HSL. Stel de tekstdekking in als de tekst half transparant is.
Lees de contrastverhouding en de AA- en AAA-badges voor normale tekst, grote tekst en UI-onderdelen af, en bekijk het live voorbeeld.
Pas een voorgestelde kleur toe als het paar zakt, bewaar goede paren in je palet en kopieer de CSS naar je project.

Oplossingen, niet alleen cijfers

Als een paar zakt, zoekt de checker de dichtstbijzijnde tekstkleur en achtergrondkleur met dezelfde tint en verzadiging die AA en AAA halen, en met één klik pas je die toe. Half transparante tekst wordt eerst met de achtergrond gemengd, precies zoals een browser hem tekent.

Privé en overdraagbaar

Je kleuren en palet worden alleen in deze browser bewaard. Sla alles op als JSON om een back-up te maken of het naar een ander apparaat te verplaatsen, of bewaar het resultaat als pdf of afbeelding. Ongedaan maken en opnieuw werken voor elke wijziging.

Veelgestelde vragen

Is de kleurcontrastchecker gratis?

Ja. Hij is gratis, vraagt geen account en werkt in elke moderne browser.

Welke verhouding heb ik nodig?

WCAG-niveau AA vraagt minstens 4,5:1 voor normale tekst en 3:1 voor grote tekst en voor UI-onderdelen zoals invoerranden en pictogrammen. Niveau AAA vraagt 7:1 voor normale tekst en 4,5:1 voor grote tekst.

Waarom zakt 4,48 terwijl het afrondt op 4,5?

De WCAG-grenzen zijn exact. Een verhouding van 4,48:1 ligt onder 4,5:1 en haalt AA voor normale tekst dus niet. De checker vergelijkt de niet afgeronde waarde, dus de badges zijn altijd streng.