ImageColorPicker.com

Färgkontrastkontroll

Testa kontrastförhållandet mellan förgrunds- och bakgrundsfärger för att säkerställa tillgänglighet.

Kontrollera dina färger

Testa färgkombinationer för att säkerställa att de uppfyller WCAG:s tillgänglighetsstandarder för textläsbarhet.

5.72 till 1
Kontrast
AA
Textresultat
Bra

Jämfört: #FFFFFF på #BB3344

Text

16px, Normal (400)

Räknas som vanlig text.

  • AA (WCAG 1.4.3): minst 4.5:1

    Godkänd

  • AAA (WCAG 1.4.6): minst 7:1

    1.28 till behövs

    Underkänt

UI-komponenter och grafik

Ikoner, inmatningskanter, fokusindikatorer och andra delar du behöver se för att kunna använda gränssnittet.

  • AA (WCAG 1.4.11): minst 3:1

    Godkänd
5.72 till 1. Text: klarar AA, klarar inte AAA. UI-komponenter: klarar.
Hur detta kontrolleras
Färger som jämförs (efter blandning)
Text #FFFFFF på bakgrund #BB3344
Relativ luminans
Text 1.0000, bakgrund 0.1334
Formel
(L1 + 0.05) / (L2 + 0.05) där L1 är luminansen för den ljusare färgen och L2 för den mörkare.
Exakt förhållande
5.7221 till 1, visas som 5.72 till 1. Det visade värdet trunkeras, det avrundas inte, så det ser aldrig bättre ut än det är. Det exakta värdet är det som jämförs med kravet.

Textstorlek: 16px, Normal (400)

Räknas som vanlig text. Stor text är minst 24px (18pt), eller minst 18.67px (14pt) när den är fet (vikt 700 eller mer). Storlekar visas avskurna, inte avrundade.

Räknas som vanlig text. Stor text är minst 24px (18pt), eller minst 18.67px (14pt) när den är fet (vikt 700 eller mer). Storlekar visas avskurna, inte avrundade.

Aa
Förhandsgranskningstitel

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

Exempel på liten text (12px)

Text
#ffffff
Bakgrund
#bb3344

WCAG-standarder

Nivå AA

Minsta kontrastförhållande på 4.5:1 för normal text och 3:1 för stor text. Krävs för de flesta webbplatser.

Nivå AAA

Förbättrat kontrastförhållande på 7:1 för normal text och 4.5:1 för stor text. Rekommenderas för optimal tillgänglighet.

Färgkontrastkontroll

Beräkna kontrastförhållandet mellan text och bakgrundsfärger.

Välj en färg med färgväljaren för text och bakgrundsfärg eller ange en färg i RGB-hexadecimal format (t.ex. #259 eller #2596BE). Du kan justera skjutreglaget för att välja färg. Webbinnehållstillgänglighetsriktlinjerna (WCAG) har en specifik riktlinje för att avgöra om text är läsbar för seende användare. Dessa kriterier använder en särskild algoritm för att kartlägga färgkombinationer till jämförbara förhållanden. Enligt denna formel anger WCAG att en 4.5:1 färgkontrast förhållande med text och bakgrund är tillräckligt för vanlig (brödtext), och stor text (18+ pt vanlig, eller 14+ pt fetstil) bör ha minst ett 3:1 färgkontrastförhållande.

Viktiga funktioner

  • Beräkning av kontrastförhållande i realtid
  • Kontroll av WCAG AA & AAA-efterlevnad
  • HSL-reglage för finjustering
  • Flera förhandsgranskningsformat

Avancerade verktyg

  • Automatisk färgkorrigering
  • Text- och bakgrundsexempel
  • Färgnamnsdetektion
  • Exportera resultat

Vanliga frågor

För WCAG AA-efterlevnad kräver normal text ett kontrastförhållande på minst 4,5:1, medan stor text (18 pt eller 14 pt fetstil) kräver 3:1.

WCAG AAA kräver högre kontrastförhållanden: 7:1 för normal text och 4,5:1 för stor text, jämfört med AA:s 4,5:1 respektive 3:1.

Använd vår automatiska korrigeringsfunktion för att justera text- eller bakgrundsfärgerna och behålla designens syfte, eller justera färgerna manuellt med HSL-reglagen och deras visuella indikatorer som visar optimala zoner för AA/AAA-efterlevnad.

De gröna zonerna och AA/AAA-markeringarna visar optimala områden för att uppnå WCAG-efterlevnad. Riktningstipsen (Ljusare/Mörkare) visar vilket håll som ger bättre kontrast utifrån din nuvarande färgkombination.

Ja, du kan ange vilka hexkoder som helst eller använda färgväljaren för att välja egna färger. URL:en uppdateras automatiskt så att du kan dela specifika färgkombinationer.