Ontwerp

Kleurcontrast Checker

WCAG-contrastverhouding voor twee kleuren.

Bijna voordat we het wisten, waren we van de grond.
1.00
Contrastverhouding
StandaardNormale tekstGrote tekst
WCAG AA
WCAG AAA
WCAG 1.4.11Niet-tekstuele / UI-componenten (≥3:1): —

Dichtstbijzijnde AA-tekstalternatiefOKLCH-alternatief wordt berekend…

Dit rapport volgt de eisen voor contrastverhoudingen van WCAG 2.2. APCA blijft experimenteel en is geen conformiteitsresultaat voor WCAG 3.

Kleuren kiezen? Kleurenconverter · sociale bio's: Fancy tekstgenerator · schalen: Kleurtinten generator.

Hoe te gebruiken

Kies een tekstkleur en een achtergrondkleur. De contrastratio en geslaagd/mislukt voor elk WCAG-niveau worden live bijgewerkt, met een voorbeeld.

FAQ

Wat is een goede contrastverhouding?

WCAG AA vereist 4.5:1 voor normale tekst en 3:1 voor grote tekst. AAA vereist respectievelijk 7:1 en 4.5:1. WCAG 1.4.11 vereist ook 3:1 voor essentiële niet-tekstuele afbeeldingen en de grenzen of toestanden van UI-componenten.

Wat telt als grote tekst?

Grote tekst is ongeveer 18pt (24px) of 14pt (18.66px) vetgedrukt en groter.

Hoe wordt de verhouding berekend?

Van de relatieve luminantie van beide kleuren: (lichter + 0,05) ÷ (donkerder + 0,05), volgens de WCAG-formule.

Laatst bijgewerkt: