Hoppa till innehållet

Färgkontrastkontroll

Webb och utveckling

Hur läsbar är texten mot den här bakgrunden?

Kontrollera textens WCAG-kontrast mot bakgrunden, se vilka nivåer den klarar och få en liknande färg som klarar kraven.

Kontrastförhållande

4,54:1

4 av 5 kontroller godkända.

Exempel på stor text

Den snabba bruna räven hoppar över den lata hunden.

WCAG 2.2-kontroller

  • Vanlig text, nivå AA OK

    Framgångskriterium 1.4.3: kräver minst 4,5:1.

  • Stor text, nivå AA OK

    Framgångskriterium 1.4.3: kräver minst 3:1.

  • Vanlig text, nivå AAA Problem

    Framgångskriterium 1.4.6: kräver minst 7:1.

  • Stor text, nivå AAA OK

    Framgångskriterium 1.4.6: kräver minst 4,5:1.

  • Ikoner och kontroller, nivå AA OK

    Framgångskriterium 1.4.11: kräver minst 3:1.

Närmaste textfärg som klarar kraven

Nivå AAA, vanlig text (7:1)
#595959

Sponsrade länkar

Kontrollera textens WCAG-kontrast mot bakgrunden, se vilka nivåer den klarar och få en liknande färg som klarar kraven.

Så använder du verktyget

  1. Ange text- och bakgrundsfärg i valfritt CSS-format eller tryck på en färgruta för att välja. Bytesknappen byter plats på färgerna.
  2. Läs förhållandet och kontrollerna: vanlig text, stor text och ikoner eller kontroller på nivå AA och AAA.
  3. Om en kontroll misslyckas, kopiera närmaste textfärg som klarar kraven. Den behåller kulören och ändrar bara ljusheten.

Grå text på vit bakgrund

Textfärg (HEX)Kontrastförhållande
#00000021:1
#5959597:1
#7676764,54:1
#7777774,47:1
#9999992,84:1

Sponsrade länkar

Så fungerar det

Web Content Accessibility Guidelines (WCAG 2.2) mäter hur väl text skiljer sig från bakgrunden med ett kontrastförhållande från 1:1 (ingen skillnad) till 21:1 (svart på vitt). Nivå AA kräver minst 4,5:1 för vanlig text och 3:1 för stor text, alltså minst 18 punkter eller 14 punkter i fetstil (framgångskriterium 1.4.3). Nivå AAA kräver 7:1 respektive 4,5:1 (1.4.6). Ikoner, fältkanter och andra delar som behöver synas måste nå 3:1 (1.4.11).

Förhållandet är (L1 + 0,05) ÷ (L2 + 0,05), där L1 är den ljusare färgens relativa luminans och L2 den mörkares. Relativ luminans är 0,2126 R + 0,7152 G + 0,0722 B av de linjäriserade röda, gröna och blå värdena. Exempelvis har #767676 på vitt L = 0,181 mot 1, så (1 + 0,05) ÷ (0,181 + 0,05) blir 4,54:1. Förhållandet trunkeras, aldrig avrundas uppåt: 4,499 når inte 4,5.

Genomskinlig textfärg läggs först över bakgrunden, och genomskinlig bakgrund över vitt. Den föreslagna färgen behåller textfärgens kulör och färgstyrka och flyttar bara ljusheten (i OKLCH) till närmaste godkända värde, så den fortfarande liknar din färg. Kontrast är bara en del av läsbarheten: typsnitt, storlek och vikt spelar också roll, och förhållandet säger inget om färgblinda läsares upplevelse utöver ljushet.

Vanliga frågor

Vad är stor text enligt WCAG?

Text på minst 18 punkter (24 px), eller minst 14 punkter (cirka 18,7 px) i fetstil. Den behöver mindre kontrast eftersom större bokstäver är lättare att läsa.

Vilken nivå ska jag sikta på?

Nivå AA är det vanliga målet i lagkrav och design. Nivå AAA är strängare och inte alltid möjlig för en hel webbplats, men är värd att använda för längre lästext.

Beror förhållandet på vilken färg som är text?

Nej. Förhållandet är samma om du byter plats på färgerna. Bara exemplet och den föreslagna ersättningen ändras, eftersom förslaget justerar textfärgen.

Blir min sida tillgänglig om den klarar kontrasttestet?

Nej. Det kontrollerar bara färgkontrast. Tangentbordsåtkomst, textalternativ och andra tillgänglighetskrav är fortfarande viktiga.

Varför klarar ett värde strax under 4,5 inte AA för normal text?

Gränsen är 4,5:1 utan avrundning uppåt. Värdet kapas till två decimaler så att ett underkänt värde inte ser godkänt ut.

Det här kan du behöva härnäst

Mer i Webb och utveckling

Alla 18 verktyg i Webb och utveckling

Populärt just nu

Sponsrade länkar

Sponsrade länkar