Ange HEX-färger eller välj Pantone-färger för förgrund och bakgrund.
Granska kontrastförhållandet och WCAG AA- eller AAA-resultat för normal text, stor text och UI-komponenter.
Använd direktförhandsvisningen, byt färger, kopiera CSS eller prova tillgängliga Pantone-förslag.

Användningsområden för kontrastkontrollen

Validera varumärkets färgpar innan de används i digitala layouter.
Kontrollera knappar, formulär, navigering och andra UI-komponenter för läsbar kontrast.
Jämför Pantone-inspirerade paletter innan tryckfärger anpassas för skärm.
Dokumentera WCAG-resultat för tillgänglighetsgranskning och designöverlämning.

Färgkontrastkontroll för WCAG-, UI- och Pantone-flöden

Använd denna kontrastkontroll när du behöver bekräfta att textfärg, bakgrund, knappstatus eller varumärkespalett är läsbar innan den hamnar i en webbplats, app, presentation eller designsystem.

Läs WCAG-resultatet på rätt sätt

Verktyget beräknar relativ luminans för båda färgerna och visar kontrastförhållandet som används av WCAG. Normal brödtext behöver oftast 4.5:1 för AA och 7:1 för AAA, medan stor text och viktiga UI-komponenter har lägre trösklar.

Koppla Pantone-färger till digital tillgänglighet

Pantone-färger väljs ofta för varumärke och tryck, men deras skärmversioner behöver ändå tillgänglighetskontroller. Sök Pantone-namn eller HEX-värden, förhandsgranska paret och jämför tillgängliga alternativ innan färger lämnas till design eller utveckling.

Ett praktiskt flöde för designers och utvecklare

Börja med exakta HEX-värden från designfilen, testa både förgrund och bakgrund åt båda håll, kopiera CSS eller rapport och spara det godkända färgparet med resten av Pantone-palettens dokumentation.

Frågor och svar om kontrastkontroll

Vad mäter den här kontrastkontrollen?

Den mäter luminanskontrasten mellan en förgrundsfärg och en bakgrundsfärg och jämför sedan resultatet med WCAG:s trösklar.

Vilka kontrastkrav gäller för WCAG AA och AAA?

WCAG AA kräver minst 4.5:1 för normal text och 3:1 för stor text eller UI-komponenter. WCAG AAA kräver 7:1 för normal text och 4.5:1 för stor text.

Kan Pantone-färger kontrolleras för webbtillgänglighet?

Ja. Pantone-referenser kan omvandlas till skärmfärgvärden och kontrolleras för digital kontrast. Verifiera alltid slutliga färger i det medium där de ska visas.

Kontrastmeddelande

Resultaten beräknas från digitala färgvärden och är avsedda för tillgänglighetsplanering. Fysiskt tryck, material, belysning och skärmkalibrering kan ändra upplevd kontrast.