Kontrastkontroll för WCAG AA och AAA

Kontrollera färgkontrast för WCAG 2.2 AA och AAA, förhandsvisa textstorlekar och hitta tillgängliga färgalternativ.

Håll pekaren över ett fält eller välj det för hjälp. Tryck Escape för att stänga.

FörgrundBakgrundOgenomskinligt underlag

Använd HEX, RGB, RGBA eller HSL. Transparenta färger kombineras med det ogenomskinliga underlaget.

5.84:1

Gränsvärden använder förhållandet med full precision, aldrig det avrundade visningsvärdet.

WCAG 2.2
Nivå	Använd	SC	Minimum	Resultat
AA	Normal text	1.4.3	4.5:1	Godkänt
AA	Stor text	1.4.3	3:1	Godkänt
AAA	Normal text	1.4.6	7:1	Underkänt
AAA	Stor text	1.4.6	4.5:1	Godkänt
AA	Gränssnittskomponenter och grafik	1.4.11	3:1	Godkänt

FörhandsvisningstextTeckenstorlek (CSS px)Fet

Aa — fiokit.

Normal text: AA ✓ · AAA ✗

Stor text: minst 24 CSS px eller 18,67 CSS px i fetstil (14 pt).

Mål för föreslagen förgrundRapport

WCAG 2.2
#155bdf / #ffffff (#ffffff)
5.8433:1
AA Normal text (SC 1.4.3): PASS — 4.5:1
AA Stor text (SC 1.4.3): PASS — 3:1
AAA Normal text (SC 1.4.6): FAIL — 7:1
AAA Stor text (SC 1.4.6): PASS — 4.5:1
AA Gränssnittskomponenter och grafik (SC 1.4.11): PASS — 3:1

Detta kontrollerar färgpar, inte fullständig WCAG-överensstämmelse. Bedöm angränsande färger, interaktionstillstånd och verkligt innehåll separat.

W3C — SC 1.4.3 · SC 1.4.6 · SC 1.4.11

Så fungerar det

Ange förgrund, bakgrund och ogenomskinligt underlag. AA- och AAA-resultaten uppdateras direkt. Prova teckenstorlek och vikt, använd en föreslagen färg eller ladda ned rapporten.

Ett praktiskt exempel

Färger

#155bdf

Vanliga frågor

Skickas min text till en server?

Nej. Innehållet bearbetas i den här webbläsaren. Det skickas inte till servern och sparas inte.

Vad bör jag veta om Kontrastkontroll för WCAG AA och AAA?

Redovisar gränsvärden för text och annat innehåll separat. Denna färgkontroll certifierar inte fullständig WCAG-överensstämmelse.