Ingen uppladdning, 100% lokalt, inget konto

WCAG-kontrastkontroll

Skriv eller välj två färger och se WCAG-kontrastförhållandet direkt, med AA/AAA-godkäntmärken för normal och stor text.

Så fungerar Kontrastkontroll

Det här verktyget beräknar WCAG-kontrastförhållandet mellan två färger och visar om paret uppfyller nivå AA eller AAA för normal text, stor text och icke-textuella gränssnittskomponenter. Allt beräknas lokalt i din webbläsare; de färger du anger laddas aldrig upp.

Skrivet av Bastien Sulyan

Så här använder du Kontrastkontroll, steg för steg

  1. Ange eller välj förgrundsfärgen (textfärgen).
  2. Ange eller välj bakgrundsfärgen.
  3. Läs av kontrastförhållandet och AA-/AAA-märkena för normal text, stor text och icke-textuella gränssnittskomponenter.
  4. Använd Byt färger för att kontrollera paret åt andra hållet.

Vanliga användningsområden

  • Kontrollera ett varumärkes primärfärg mot vitt eller svart innan en knappkomponent lanseras.
  • Verifiera att dämpad grå brödtext fortfarande klarar AA på en ljus kortbakgrund.
  • Bekräfta att en länkfärg inuti ett stycke når tröskelvärdet 4,5:1 för normal text.
  • Testa om en stor rubrik med lättare vikt fortfarande klarar det lättare tröskelvärdet 3:1 för stor text.

Vanliga frågor

Skickar det här verktyget mina färger till en server?

Nej, beräkningen sker helt i din webbläsare med JavaScript; inget du anger laddas upp.

Vilket kontrastförhållande behöver jag för AA eller AAA?

WCAG 2.x kräver 4,5:1 för AA vid normal text, 7:1 för AAA vid normal text, 3:1 för AA vid stor text och 4,5:1 för AAA vid stor text.

Vad räknas som stor text?

Minst 24px (18pt) normal vikt, eller cirka 18,7px (14pt) fetstil; allt mindre använder tröskelvärdena för normal text.

Varför ändras inte förhållandet när jag byter förgrund och bakgrund?

Formeln för förhållandet är symmetrisk: den jämför bara den ljusare och den mörkare luminansen, inte vilken färg som används för texten. Att byta är ändå användbart, eftersom det visar om paret även fungerar med rollerna omvända, till exempel mörk text på en ljus platta jämfört med ljus text på en mörk platta.

Garanterar en godkänd AA-nivå att min design är tillgänglig?

Nej. Kontrast är ett WCAG-framgångskriterium bland många. Färgval för personer med nedsatt färgseende, synlighet vid fokus, textstorlek och tangentbordsnavigering är separata kontroller. Simulatorn för färgblindhet på den här webbplatsen täcker en av dem.

Är det här ett officiellt verktyg från W3C eller WebAIM?

Nej. Det implementerar den offentliga WCAG 2.x-kontrastformeln oberoende och är inte kopplat till W3C eller någon annan tillgänglighetsorganisation.

Relaterade verktyg

Håll allt lokalt, utforska kompletterande verktyg.

Alla utvecklarverktyg