Färgkontrast Kontrollör

Kontrollera färgkontrastratio mot WCAG 2.1 tillgänglighetsriktlinjer. Omedelbara AA/AAA-resultat.

Förgrundsfärg

Bakgrundsfärg

Stor textförhandsvisning (18pt fet)

Normal textförhandsvisning — The quick brown fox jumps over the lazy dog.

14.05:1kontrastförhållande

AA — Normal text (≥ 4,5:1)Godkänd

AA — Stor text (≥ 3:1)Godkänd

AAA — Normal text (≥ 7:1)Godkänd

AAA — Stor text (≥ 4,5:1)Godkänd

Om det här verktyget

Färgkontrast-kontrollören beräknar kontrastförhållandet mellan en förgrundsfärg (text) och en bakgrundsfärg med WCAG 2.1 relativ luminansformel.

WCAG 2.1 definierar två nivåer: AA kräver 4,5:1 för normal text och 3:1 för stor text. AAA kräver 7:1 och 4,5:1.

Hur man använder

Välj förgrunds- och bakgrundsfärg med väljarna eller skriv hex-koder.
Förhandsvisningen visar hur text ser ut i normal och stor storlek.
Kontrastförhållandet och WCAG-resultaten uppdateras direkt.
Använd exempelparen för att utforska vanliga tillgänglighetsmönster.

Användningsfall

UI-designers verifierar att knappetiketterna och texten uppfyller WCAG-standarder. Frontend-utvecklare kontrollerar text-bakgrundskombinationer i designsystem.

Vanliga frågor

Vad räknas som "stor text"? — WCAG definierar stor text som minst 18pt (24px) normal, eller 14pt (~18.67px) fet.
Stöds transparens eller rgba? — Nej, det här verktyget fungerar bara med solid hex-färger.
Vilken WCAG-nivå bör jag sikta på? — AA är det rekommenderade minimumet för de flesta offentliga webbplatser. AAA ger bättre läsbarhet.
Är 4,5:1 alltid tillräckligt? — 4,5:1 uppfyller WCAG AA, men användare med allvarligare synnedsättningar kan ha nytta av högre förhållanden.