WCAG AA- en AAA-contrastcontrole

Controleer kleurcontrast volgens WCAG 2.2 AA en AAA, bekijk tekstgroottes en vind toegankelijke kleuralternatieven.

Beweeg de aanwijzer over een veld of selecteer het voor hulp. Druk op Escape om te sluiten.

VoorgrondAchtergrondOndoorzichtige basis

Gebruik HEX, RGB, RGBA of HSL. Transparante kleuren worden over de ondoorzichtige basis samengesteld.

5.84:1

Drempels gebruiken de verhouding met volledige precisie, nooit de afgeronde weergavewaarde.

WCAG 2.2
Niveau	Gebruiken	SC	Minimum	Resultaat
AA	Normale tekst	1.4.3	4.5:1	Geslaagd
AA	Grote tekst	1.4.3	3:1	Geslaagd
AAA	Normale tekst	1.4.6	7:1	Niet geslaagd
AAA	Grote tekst	1.4.6	4.5:1	Geslaagd
AA	Interfaceonderdelen en afbeeldingen	1.4.11	3:1	Geslaagd

VoorbeeldtekstLettergrootte (CSS-px)Vet

Aa — fiokit.

Normale tekst: AA ✓ · AAA ✗

Grote tekst: minstens 24 CSS-px, of 18,67 CSS-px vet (14 pt).

Doel voor voorgestelde voorgrondRapport

WCAG 2.2
#155bdf / #ffffff (#ffffff)
5.8433:1
AA Normale tekst (SC 1.4.3): PASS — 4.5:1
AA Grote tekst (SC 1.4.3): PASS — 3:1
AAA Normale tekst (SC 1.4.6): FAIL — 7:1
AAA Grote tekst (SC 1.4.6): PASS — 4.5:1
AA Interfaceonderdelen en afbeeldingen (SC 1.4.11): PASS — 3:1

Dit controleert kleurparen, niet volledige WCAG-conformiteit. Beoordeel aangrenzende kleuren, interactiestatussen en echte inhoud apart.

W3C — SC 1.4.3 · SC 1.4.6 · SC 1.4.11

Zo werkt het

Stel voorgrond, achtergrond en ondoorzichtige basis in. AA- en AAA-resultaten worden direct bijgewerkt. Probeer lettergrootte en vetheid, pas een voorgestelde kleur toe of download het rapport.

Een praktisch voorbeeld

Kleuren

#155bdf

Veelgestelde vragen

Wordt mijn tekst naar een server gestuurd?

Nee. De inhoud wordt in deze browser verwerkt. Deze wordt niet naar de server gestuurd of opgeslagen.

Wat moet ik weten over WCAG AA- en AAA-contrastcontrole?

Toont drempels voor tekst en niet-tekst afzonderlijk. Deze kleurcontrole certificeert geen volledige WCAG-conformiteit.