Color Contrast Checker

Vad är en Färgkontrastkontroll?

Detta verktyg beräknar Contrast Ratio (kontrastförhållandet) mellan en förgrundsfärg (text) och en bakgrundsfärg, och kontrollerar sedan om kombinationen uppfyller WCAG 2.0-riktlinjerna för tillgänglighet på AA- och AAA-nivåer. Det simulerar också färgblindhet, föreslår korrigeringar för underkända par och exporterar kod i flera format.

Hur man kontrollerar färgkontrast

Att Välja Färger

• Color A (förgrund/text) och Color B (bakgrund) har vardera ett hex-inmatningsfält och en färgväljare.
• Med Shade Scale under varje färgväljare kan du finjustera ljusheten. Klicka på valfri nyans för att applicera den omedelbart.
• Color Wheel justerar nyansen av Color A visuellt. Den komplementära färgen visas under den – klicka för att applicera den som Color B.
• Swap byter plats på Color A och Color B.

Vad Resultaten Betyder

Resultat	Vad det visar
Contrast Ratio	Det beräknade förhållandet (1:1 – 21:1). Högre är bättre.
A11y Score	Ett tillgänglighetspoäng av 100 baserat på kontrastförhållandet.
WCAG AA / AAA	Godkänt eller underkänt för Normal Text och Large Text på varje nivå.
Preview	En live-förhandsvisning som visar rubrik, brödtext, knapp, badge, inmatningsfält och kort med dina färger.
Fix Suggestion	När kontrasten inte godkänns för AA, föreslår ett klickbart kort den närmaste godkända nyansen med dess förhållande. Klicka för att applicera.

WCAG-gränsvärden

Nivå	Normal Text	Large Text
AA	Minst 4.5:1	Minst 3:1
AAA	Minst 7:1	Minst 4.5:1

• Normal text: under 18pt (eller under 14pt fetstil)
• Large text: 18pt och över (eller 14pt fetstil och över)

Extra Funktioner

• Undo / Redo – stega igenom dina färgändringar.
• Share Result – kopierar en URL med de aktuella färgerna inbäddade. Alla som öppnar den ser samma par.
• Pin – spara upp till 8 färgpar för att jämföra sida vid sida. Klicka på ett sparat par för att ladda det igen.
• Brand Colors – 8 riktiga varumärkespaletter (Spotify, Slack, GitHub, etc.) med deras kontrastförhållanden. Klicka på valfri för att ladda den.
• A11y Check – simulerar 4 typer av färgblindhet (Protanopia, Deuteranopia, Tritanopia, Achromatopsia) med det effektiva kontrastförhållandet för var och en.
• Code Output – genererar kod som är redo att klistras in i CSS, Tailwind 4, Tailwind 3, Flutter och React. Hopfällbar sektion, öppen som standard.
• Randomize / Clear All – generera ett slumpmässigt tillgängligt färgpar eller återställ till standardinställningarna.

Bra Exempel

Exempel 1: Grå text på vitt – ett vanligt misstag

Ljusgrå text på en vit bakgrund ser subtilt ut, men misslyckas med tillgängligheten.

• Color A: #999999, Color B: #ffffff
• Contrast Ratio: 2.85:1 – AA Underkänt
• Fix Suggestion rekommenderar nyans 600 (#595959) för ett förhållande på 4.9:1 – AA Godkänt. Klicka för att applicera.

Exempel 2: Verifiera en varumärkespalett

Klicka på Spotify i sektionen Brand Colors.

• Color A: #191414 (svart), Color B: #1DB954 (grön)
• Contrast Ratio: 4.9:1 – AA Godkänt, AAA Underkänt
• Spara (Pin) detta par, testa sedan LinkedIn (#ffffff på #0A66C2, 4.7:1) och jämför.

Exempel 3: Designa ett Mörkt Läge (Dark Mode)

Att hitta en läsbar textfärg för en mörk marinblå bakgrund.

• Color A: #e0e0e0, Color B: #1a1a2e
• Contrast Ratio: 12.4:1 – AA och AAA Godkänt
• Öppna A11y Check för att bekräfta att alla 4 typer av färgblindhet också godkänns.

Exempel 4: Utvecklararbetsflöde – Kodexport

När du har hittat ett bra par, fäll ut Code Output och välj ditt ramverk:

• CSS: custom properties --fg och --bg
• Tailwind 4: godtyckliga färgvärden
• React: inline style-objekt

Kopiera kodavsnittet direkt till ditt projekt.

Viktiga Tips

• Börja med Brand Colors. Om du kontrollerar ett befintligt varumärke, klicka på det från den förinställda listan istället för att skriva in hex-värden manuellt.
• Använd Fix Suggestion. Gissa inte när kontrasten är för låg – klicka på förslagskortet för att automatiskt hoppa till den närmaste godkända nyansen.
• Spara par för att jämföra (Pin). När du väljer mellan flera färgalternativ, spara vart och ett. Du kan ladda om och jämföra dem sida vid sida.
• Kontrollera även för färgblindhet. Ett par som godkänns av WCAG kan ändå vara svårt att skilja på för färgblinda användare. Öppna sektionen A11y Check för att verifiera.
• Dela ditt beslut. Använd Share Result för att skicka exakt samma färgpars-URL till en designer eller granskare.

Formel

WCAG 2.0 definierar Contrast Ratio med hjälp av relativ luminans:

$CR = \frac{L_1 + 0.05}{L_2 + 0.05}$

Variabel	Betydelse
$CR$	Contrast Ratio
$L_1$	Relativ luminans för den ljusare färgen
$L_2$	Relativ luminans för den mörkare färgen

Relativ luminans beräknas från sRGB-värden efter linearisering: $L = 0.2126R + 0.7152G + 0.0722B$

Vanliga Frågor

Bör jag sikta på AA eller AAA?

AA är den minsta lagliga standarden i de flesta länder. AAA ger bättre läsbarhet, men är svårare att uppnå i alla designelement. Ett praktiskt tillvägagångssätt: AA för brödtext, AAA för kritisk information som varningar eller felmeddelanden.

Garanterar godkänd WCAG tillgänglighet för färgblinda användare?

WCAG:s kontrastförhållande kontrollerar luminans, inte nyansskillnad. Ett par kan godkännas enligt WCAG men se identiskt ut för någon med färgblindhet. Använd sektionen A11y Check för att verifiera, och komplettera alltid färg med ikoner eller textetiketter.

Vilka kodformat stödjer det här verktyget?

CSS custom properties, Tailwind CSS v3 och v4 (godtyckliga värden), Flutter Color()-objekt och React inline-stilar. Välj formatet från menyn i sektionen Code Output.

Kan jag spara och dela mina färgpar?

Ja. Pin sparar lokalt upp till 8 par för jämförelse. Share Result kopierar en URL där färgerna är inbäddade – alla som öppnar den ser exakt samma par.