Kategorier
Se alla verktyg
🛠️ Webbläsarverktyg

Färgkontrastkontroll

Kontrollera färgkontrastförhållanden för webbtillgänglighet. Testa kombinationer av text- och bakgrundsfärger mot WCAG-riktlinjerna med förhandsgranskning i realtid, tillgänglighetsbetyg och förbättringsförslag.

Färgkontrastkontroll

Skapa tillgängliga färgkombinationer med självförtroende

#000000
#f0f4f8

Förhandsvisning

Normal text

This is an example of normal body text that would appear on your website or application.

Stor text

This is an example of large text (18pt or 14pt bold).

"Good design is accessible design. Contrast is essential for readability."

Kontrastförhållande

19.00:1

0

POÄNG

Normal text

AAA

Stor text

AAA

WCAG 2.1-riktlinjer: AA kräver 4,5:1 för normal text, 3:1 för stor text. AAA kräver 7:1 för normal text, 4,5:1 för stor text.

Tips & Förslag

  • ✦Maintain a contrast ratio of at least 4.5:1 for normal text.
  • ✦Use 3:1 or higher for large text (18pt or 14pt bold).
  • ✦Consider using darker text on lighter backgrounds or vice versa.
  • ✦For full WCAG AAA compliance, aim for a ratio of 7:1.
  • ✦Adjust brightness or saturation slightly to improve contrast.

Relaterade verktyg

FÄRG Tools

View All →

Bildfärgsväljare Online

Extrahera färger från vilken bild som helst online gratis. Ladda upp en bild, klicka för att välja färger och få HEX, RGB, HSL och CMYK-värden. Skapa och exportera färgpaletter.

Färgpalettcollage Skapare

Skapa fantastiska visuella collage genom att kombinera dina bilder med extraherade färgpaletter. Ladda upp vilken bild som helst för att automatiskt extrahera dess dominerande färger och skapa vackra kompositioner med anpassningsbara layouter, stilar och bildförhållanden.

Färgpalettvisare & Generator

Skapa, visa och hantera färgpaletter med avancerade funktioner. Generera paletter med hjälp av färgteori, importera från olika format, kontrollera tillgänglighetskontrast och exportera till CSS, SCSS, Tailwind, JSON eller PNG-format.

Gratis Färgpallattsgenerator Online – Skapa Vackra Färgscheman

Generera fantastiska färgpallatter online med vår gratis färgpallattsgenerator. Skapa harmoniska färgscheman med hjälp av färgteoriprinciper eller extrahera färger från bilder. Exportera till formaten CSS, SCSS, Tailwind, JSON, PDF och PNG.

Gratis Hex till Pantone Färgomvandlare

Konvertera hex-färger till närmaste Pantone-matchningar med vårt gratis onlineverktyg. Har noggrann Delta E färganpassning, bläddra bland över 40 populära Pantone-färger och få omedelbara färgjämförelser. Perfekt för designers, tryckare och färgproffs.

Gratis HSV till Pantone Färgomvandlare

Omvandla HSV-färger (Nyans, Mättnad, Ljusstyrka) till deras närmaste Pantone-färger direkt. Hitta den perfekta Pantone-färgen med vårt omfattande verktyg för färganpassning, med visuella jämförelser och exakt färglära.

View 5 more tools

Hur man kontrollerar färgkontrast

1

Välj textfärg

Klicka på den första färgväljaren för att välja din textfärg, eller ange en hexkod direkt.

2

Välj bakgrundsfärg

Använd den andra färgväljaren för att välja din bakgrundsfärg för kontrasttestet.

3

Granska kontrastresultat

Kontrollera det beräknade kontrastförhållandet och se AA/AAA-betyg för normal och stor text.

4

Förhandsgranska din design

Visa liveförhandsgranskningen för att se hur din färgkombination ser ut med faktiskt textinnehåll.

Nyckelfunktioner

Kontrasttestning i realtid

Beräkna kontrastförhållanden omedelbart när du väljer olika kombinationer av text- och bakgrundsfärger.

WCAG-kompatibilitetsbetyg

Få AA- och AAA-betyg för både normal och stor text enligt riktlinjerna för tillgängligt webbinnehåll (WCAG).

Panel för liveförhandsgranskning

Se exakt hur dina färgkombinationer kommer att se ut med exempeltext i både normal och stor storlek.

Visuell poängindikator

Se din kontrastprestanda med ett intuitivt cirkeldiagram som visar poäng från 0-100.

Interaktiva färgväljare

Välj enkelt färger med inbyggda färgväljningsverktyg för både text- och bakgrundsfärger.

Tillgänglighetstips

Få praktiska förslag för att förbättra kontrasten och uppfylla tillgänglighetsstandarder.

Vad är en färgkontrastkontroll?

En färgkontrastkontroll är ett verktyg som mäter skillnaden i luminans mellan text- och bakgrundsfärger. Den beräknar kontrastförhållanden enligt WCAG-standarder (Riktlinjer för tillgängligt webbinnehåll) för att säkerställa att innehållet är läsbart för användare med synnedsättningar, inklusive färgblindhet och nedsatt syn.

Varför använda vår färgkontrastkontroll?

1

WCAG-kompatibilitet

Säkerställ att dina designer uppfyller internationella tillgänglighetsstandarder med korrekta AA- och AAA-betyg.

2

Feedback i realtid

Se omedelbara resultat när du justerar färger, vilket gör det enkelt att hitta kompatibla kombinationer.

3

Visuellt poängsystem

Förstå kontrastprestanda med en blick med vårt intuitiva poängsystem från 0-100.

4

Ingen installation krävs

Testa färgkombinationer omedelbart i din webbläsare utan att ladda ner någon programvara.

Vanliga frågor och svar

Vad är ett bra kontrastförhållande?

För normal text, sikta på minst 4.5:1 för AA-kompatibilitet eller 7:1 för AAA. Stor text (18pt eller 14pt fet) kräver 3:1 för AA eller 4.5:1 för AAA-kompatibilitet.

Vad betyder AA- och AAA-betygen?

AA är standardnivån för tillgänglighetskompatibilitet som krävs av de flesta regleringar. AAA är den högsta nivån, vilket ger förbättrad tillgänglighet för användare med allvarligare synnedsättningar.

Hur beräknas kontrastförhållandet?

Kontrastförhållandet beräknas med hjälp av färgernas relativa luminans enligt WCAG-riktlinjerna. Det sträcker sig från 1:1 (ingen kontrast) till 21:1 (maximal kontrast).

Vad räknas som stor text?

Stor text definieras som 18 punkter (24px) eller större, eller 14 punkter (18.66px) eller större om den är fet. Stor text har mer överseende kontrastkrav.

Varför är färgkontrast viktigt?

God färgkontrast säkerställer att innehållet är läsbart för alla, inklusive användare med synnedsättningar, färgblindhet, eller de som visar innehåll i starkt solljus eller på dåliga skärmar.

Kan jag använda detta för vilket färgformat som helst?

Verktyget accepterar hex-färgkoder. Du kan konvertera från andra format (RGB, HSL, etc.) till hex med hjälp av onlinekonverterare eller designverktyg.