Kontroll av färgkontrast
Ange förgrunds- och bakgrundsfärger så returnerar kontrollen WCAG-kontrastförhållandet (1:1 till 21:1) plus godkänd/underkänd-bedömningar mot WCAG 2.1 AA- och AAA-trösklarna för normal text, stor text och icke-textelement. Under huven används WCAG:s luminansformel, enkel matematik, men avgörande för tillgängligheten. Åtgärda underkända par genom att justera ljusheten tills förhållandet passerar den tröskel du behöver.
Så beräknas kontrastförhållandet
-
1
Ange två färger
Hex, 3 eller 6 siffror, för båda färgerna. En färgväljare finns för varje färg.
-
2
Relativ luminans beräknas för varje färg
L = 0,2126·R + 0,7152·G + 0,0722·B där varje kanal linjäriseras från sRGB.
-
3
Kontrastförhållande
(L_ljusare + 0,05) / (L_mörkare + 0,05). Förhållanden mellan 1:1 och 21:1.
-
4
Märken för godkänd/underkänd
AA (4,5:1 för normal, 3:1 för stor/UI), AAA (7:1 för normal, 4,5:1 för stor). Stor text = ≥18pt normal eller ≥14pt fet.
WCAG:s kontrasttrösklar
| Innehållstyp | AA-tröskel | AAA-tröskel |
|---|---|---|
| Normal text | 4,5:1 | 7:1 |
| Stor text (≥18pt normal eller ≥14pt fet) | 3:1 | 4,5:1 |
| Icke-text (UI-komponenter, fokusringar) | 3:1 | - |
| Tillfällig text (dekorativ, inaktiverad, logotyper) | undantagen | undantagen |
“Stor text” innebär 18pt+ normal vikt (~24px i CSS) eller 14pt+ fet (~19px fet).
Exempel på kontrast
| Par | Förhållande | AA normal | AA stor | AAA normal |
|---|---|---|---|---|
| Svart på vitt | 21:1 | Godkänd | Godkänd | Godkänd |
| #333 på vitt | 12,6:1 | Godkänd | Godkänd | Godkänd |
| #666 på vitt | 5,7:1 | Godkänd | Godkänd | Underkänd |
| #888 på vitt | 3,5:1 | Underkänd | Godkänd | Underkänd |
| #AAA på vitt | 2,3:1 | Underkänd | Underkänd | Underkänd |
| Vitt på #1976D2 (Material blå 700) | 4,6:1 | Underkänd | Godkänd | Underkänd |
| Vitt på #2196F3 (Material blå 500) | 3,1:1 | Underkänd (normal) | Godkänd | Underkänd |
Vanliga tillgänglighetsfällor
- Grå brödtext på vitt vid #999 eller ljusare underkänns enligt AA. Använd #767676 eller mörkare för brödtext på vitt.
- Blå länk på grått: underkänns ofta eftersom båda färgerna har mellanljus luminans.
- Vit text på varumärkesfärg: godkänns på mörkare nyanser (≥ 4,5:1), underkänns på mellanljusa varumärkesfärger. Använd större text eller mörkare varumärkesfärg.
- Platshållartext har ofta låg kontrast för att “viska”, men WCAG gäller ändå om användarna måste kunna läsa den.
- Inaktiverat tillstånd: WCAG 2.2 kräver 3:1 för inaktiverad text mot kontrollens bakgrund, om inte tillståndet i sig förmedlas på annat sätt.
Vad WCAG inte berättar
- WCAG 2.x använder en formel från 1988. Modern APCA (avancerad perceptuell kontrastalgoritm) återspeglar upplevd läsbarhet bättre, men är ännu inte den juridiska grunden. Höj värdena något över WCAG:s miniminivåer för att täcka APCA och gränsfall.
- Kontrast är inte den enda tillgänglighetsdimensionen. Ett förhållande på 21:1 betyder ingenting om teckensnittet är 9px, radavståndet är trångt eller om innebörden förmedlas i rött och grönt.
Förbättra ett underkänt par
- Ljusare förgrund på mörk bakgrund, eller mörkare förgrund på ljus.
- Öka teckenstorlek eller vikt, tröskeln för stor text är lägre.
- Lägg till en bakgrund bakom text över bilder (överlägg, övertoning).
- Rätta aldrig kontrasten genom att blekna till en grå som fortfarande underkänns, pressa tills du når AA.
Kontrollera om efter varje justering, verktyget räknar om förhållandet live, och en liten ljushetsändring kan snabbt vända en bedömning.
Vanliga frågor
AA är den juridiska grunden i de flesta jurisdiktioner (Section 508 i USA, EN 301 549 i EU) och vad de flesta granskningsverktyg flaggar. AAA är eftersträvansvärt och krävs bara i specifika tillgänglighetssammanhang (utbildningsinnehåll för användare med nedsatt syn). Sikta på AA och behandla AAA som en bonus.
Nej, den accepterar bara opaka hex-färger med 3 eller 6 siffror. Konvertera RGB eller HSL till hex först, eller använd färgväljaren som alltid ger hex.
WCAG 2.1 SC 1.4.11 kräver 3:1 i kontrast för icke-textuella UI-komponenter och grafiska objekt. Det gäller fokusindikatorer, inmatningskanter, knappar med bara ikon och tillstånd (hover, aktiv). Kontrollera både standard- och fokustillstånden.
Testa varje läge för sig, kontrastförhållandena i ljusa och mörka teman är oberoende. Många paletter som klarar ljust läge underkänns i mörkt läge vid samma relativa ljushet.
Relaterade verktyg
ASCII-tabellreferens
Full ASCII-tabell från 0 till 127 med decimal-, hex-, oktal- och binärvärden samt notation för numeriska HTML-referenser, inklusive NUL, LF och DEL.
HTML-teckenreferens
En sökbar lista över HTML-entiteter med deras namngivna och numeriska koder samt kopiering med ett klick för specialtecken och symboler.
Färgpalettgenerator
Skapa monokromatiska, analoga, komplementära, triadiska eller tetradiska färgpaletter från en HEX-basfärg och exportera kopieringsklara CSS-variabler.
Slumpmässig färggenerator
Generera 1 till 50 slumpmässiga HEX-färger med färgrutor som du kan förhandsvisa, kopiera och använda i CSS, tester eller palettskissning.
Förenklare för boolesk algebra
Utvärdera ett booleskt uttryck för varje kombination av indata och visa den fullständiga sanningstabellen. Stöder upp till fem variabler och operatorerna &, |, ! och ^.
Slumpgenerator för bokstäver
Generera slumpade A-Z-bokstäver. Välj antal, versaler, gemener eller blandat läge och använd resultatet för spel, uppgifter eller klassrumsaktiviteter.