1. Ange textfärg
Ange en färgkod i HEX-, RGB- eller HSL-format – eller välj en färg från färgväljaren.
Kontroll av färgkontrast och läsbarhet
Ange text- och bakgrundsfärg och verktyget visar om kontrasten är tillräcklig. Beräkningarna baseras på den internationella tillgänglighetsstandarden WCAG 2.1.
Kontrastförhållande
21.00 : 1
Normal text
AA (min. 4,5:1)AAA (min. 7:1)
Exempeltext för WCAG 2.1-kontrast
Stor / fet text
AA (min. 3:1)AAA (min. 4,5:1)
Exempeltext för WCAG 2.1-kontrast
Ikon
AA (min. 3:1)
Varför är färgläsbarhet viktig?
Läsbarhet är skillnaden i ljusstyrka mellan textfärgen och bakgrundsfärgen. Ju större skillnad, desto lättare är det att läsa texten. För låg kontrast gör innehållet svårt att läsa – särskilt för personer med synnedsättning, äldre eller under svåra ljusförhållanden.
Enligt Världshälsoorganisationen (WHO) har cirka 2,2 miljarder människor i världen någon form av synnedsättning.
Verktyget beräknar kontrastförhållandet med formeln definierad i WCAG 2.1 – internationella riktlinjer för digital tillgänglighet.
Hur man använder färgkontrastkontrollen
Att kontrollera läsbarheten tar bara några sekunder:
2. Ange bakgrundsfärg
Ange bakgrundsfärgen där texten kommer att visas.3. Läs resultaten
Verktyget beräknar kontrastförhållandet och visar om färgerna uppfyller WCAG-kraven för vanlig text, stor text och ikoner.4. Justera färgerna
Om kontrasten är för låg, föreslår Match-funktionen automatiskt en färgvariant som uppfyller den valda tröskeln.
Kontrastförhållande
8.59:1
Vanlig text
AA (min. 4.5:1)AAA (min. 7:1)
Hur man tolkar läsbarhetstestresultaten
Efter att färger angetts visar verktyget resultat i tre sektioner:
- Vanlig text – kräver kontrast 4.5:1 (AA) eller 7:1 (AAA). Gäller text under 18pt (24px) eller under 14pt bold.
- Stor text / bold – kräver kontrast 3:1 (AA) eller 4.5:1 (AAA). Gäller rubriker, knappar och markerad text.
- Ikoner – kräver kontrast 3:1 (AA). Gäller ikoner och grafiska UI-element som förmedlar information.
Grön indikator innebär att kravet är uppfyllt. Röd indikator innebär att kontrasten är för låg och behöver korrigeras.
Vad betyder nivåerna AA och AAA i WCAG-standarden?
| Funkcja | Nivå AA (minimum) | Nivå AAA (förbättrad) |
|---|---|---|
| Vanlig text – min. 4.5:1 | ||
| Vanlig text – min. 7:1 | ||
| Stor text / bold – min. 3:1 | ||
| Stor text / bold – min. 4.5:1 | ||
| Ikoner och UI-element – min. 3:1 | ||
| Lagstadgat krav (EU-direktiv) | ||
| Rekommenderas för huvudinnehåll |
Nivå AA (minimum)
- Vanlig text – min. 4.5:1
- Vanlig text – min. 7:1
- Stor text / bold – min. 3:1
- Stor text / bold – min. 4.5:1
- Ikoner och UI-element – min. 3:1
- Lagstadgat krav (EU-direktiv)
- Rekommenderas för huvudinnehåll
Nivå AAA (förbättrad)
- Vanlig text – min. 4.5:1
- Vanlig text – min. 7:1
- Stor text / bold – min. 3:1
- Stor text / bold – min. 4.5:1
- Ikoner och UI-element – min. 3:1
- Lagstadgat krav (EU-direktiv)
- Rekommenderas för huvudinnehåll
Vanliga frågor om färgkontrastkontrollen
Utforska fler gratisverktyg
JPG/PNG till WebP-konverterare
Minska bildstorleken utan kvalitetsförlust. Konvertera JPG och PNG till WebP och snabba upp din webbplats.
Bildredigerare
Förbered den perfekta beskärningen för sociala medier eller din webbplats. Välj ett färdigt format eller ange egna mått.
Favicon-generator
Generera favicon.ico och PNG-ikoner från en enda bild, i enlighet med webbläsar- och Lighthouse-krav.
Meta-titel & beskrivningskontroll
Kontrollera antal tecken och förhandsgranska hur din sida visas i Google. Undvik avkortade titlar och beskrivningar i sökresultaten.
Ord- & teckenräknare
Kontrollera textlängden och bedöm om den passar för en startsida, tjänstesida, blogginlägg eller produktbeskrivning.
E-postsignatur-generator
Skapa en professionell e-postsignatur på några minuter. Kopiera den färdiga HTML-koden till Gmail eller Outlook.
Färgkontrastkontroll
Kontrollera om dina text- och bakgrundsfärger är läsbara. Verktyget beräknar kontrasten enligt WCAG och hjälper dig välja rätt färg.
Färgextraktor från bild
Ladda upp ett foto eller logotyp och verktyget extraherar de dominerande färgerna. Kopiera genererade färgkoder med ett klick.
Färgpalettgenerator
Välj en färg och generera 9 paletter: monokromatisk, komplementär, triadisk och fler.
Gratis QR-kodgenerator
Skapa en QR-kod för en webbplats, vCard, meny eller flygblad. Exportera till PNG och SVG, utan inloggning, utan begränsningar.