Kontrastkontroll

Klistra in en förgrunds- och bakgrundsfärg (eller välj från en skärmdump); få kontrastförhållandet och vilka WCAG-nivåer den klarar. WCAG 2.1 AA är den lagliga tillgänglighetsbaslinjen i de flesta jurisdiktioner; AAA är den högre standarden som rekommenderas för kritisk innehåll.

Tröskelvärdena

• WCAG AA, normal text: minst 4,5:1.
• WCAG AA, stor text (18pt+ eller 14pt+ fet): minst 3:1.
• WCAG AAA, normal text: minst 7:1.
• WCAG AAA, stor text: minst 4,5:1.
• Icke-text UI-komponenter (knappar, formulärkanter): minst 3:1 (WCAG 2.1+).

Varför kontrast är viktigt

Text med låg kontrast är oläslig för användare med nedsatt syn (cirka 4% av befolkningen), användare i starkt solljus, användare på billiga skärmar och åldrande ögon (alla, så småningom). Många designsystem använder som standard grått på grått eftersom det ser elegant ut på en designers kalibrerade 5K-skärm — och är oläsligt på andra ställen.

Att inte klara WCAG AA är också juridiskt åtalbart i USA (ADA Title III), EU (EAA) och många andra jurisdiktioner. Billig försäkring: kör varje text-/bakgrundspar genom en kontroll innan lansering.

Vad vi rapporterar

1. Kontrastförhållande som ett tal (t.ex. 4,71:1).
2. Godkänt/underkänt för varje WCAG-nivå och textstorlek.
3. Föreslagna korrigeringar: den närmaste mörkare förgrunden eller ljusare bakgrunden som skulle godkännas.
4. Live-förhandsvisning med exempeltext i färgparet.

Kombinera med färgblindhetssimulatorn

Kontrast och färgblindhet är olika tillgänglighetsaxlar. Kör Färgblindhetssimulatorn på samma gränssnitt för att verifiera att det fungerar även för användare med färgseendedefekt (CVD).