Contrastcontrole

WCAG-kleurcontrastcontrole voor het berekenen van de contrastverhouding van tekst.

Contrastverhouding 21:1

Normale tekst

WCAG AA: Pass

WCAG AAA: Pass

Voorbeeld van normale tekst - 16 px

Grote tekst

WCAG AA: Pass

WCAG AAA: Pass

Voorbeeld grote tekst 18pt/24px

Grafische objecten en componenten van de gebruikersinterface

WCAG AA: Pass

Bereken de contrastverhouding voor normale tekstgrootte.
Bereken de contrastverhouding voor grote tekstgrootte.
Bereken de contrastverhouding voor componenten van de gebruikersinterface.
Selecteer een kleur uit de kleurkiezer
Stel de kleurlichtheid in

Hoe gebruik je Contrast Checker

Achtergrondkleur kiezen
Voorgrondkleur kiezen
Pas de lichtheid aan indien nodig
Controleer de controle voor normale en grote tekst

FAQ

Hoe werkt de contrastcontrole?

U moet de kleur van de tekst en achtergrond evalueren. Volgens de WCAG 2.1-richtlijnen zijn dit: Grote tekst - Tekst met een minimale grootte van 18 px vereist een contrastverhouding van 3:1; Kleine tekst - Tekst met een grootte van minder dan 18 px vereist een contrastverhouding van 4, 5:1.

Waarom moet mijn website voldoende kleurcontrast hebben?

Tekst op een achtergrond met een lage contrastverhouding is vaak moeilijk te lezen. Dit heeft niet alleen negatieve gevolgen voor mensen met een visuele beperking, het stoort zelfs alle gebruikers. Een voorbeeld is het buiten lezen van tekst op een mobiele telefoon op een zonnige dag.

Wat betekent toegankelijkheid van websites?

Een toegankelijke website is een website die zo is ontworpen dat mensen met een visuele of auditieve beperking deze zonder beperkingen kunnen gebruiken. Dit zorgt er bijvoorbeeld voor dat alle elementen van de site voldoende kleurcontrast hebben, dat wil zeggen dat de tekstkleur behoorlijk afwijkt van de achtergrondkleur.

Moeten afbeeldingen en video's voldoen aan de WCAG-vereisten voor kleurcontrast?

Voor bepaalde grafische elementen en interfacecomponenten is een contrastverhouding van ten minste 3:1 vereist. Dit geldt echter niet voor logo's, decoratieve afbeeldingen of algemene mediabestanden.

Producten

Websites

Over

Language

User Name

Contrastcontrole

WCAG-kleurcontrastcontrole voor het berekenen van de contrastverhouding van tekst.

Normale tekst

Grote tekst

Grafische objecten en componenten van de gebruikersinterface

Hoe gebruik je Contrast Checker

FAQ

Hoe werkt de contrastcontrole?

Waarom moet mijn website voldoende kleurcontrast hebben?

Wat betekent toegankelijkheid van websites?

Moeten afbeeldingen en video's voldoen aan de WCAG-vereisten voor kleurcontrast?