ImageColorPicker.com

Farvekontrastkontrol

Test kontrastforholdet mellem forgrunds- og baggrundsfarver for at sikre tilgængelighed.

Tjek dine farver

Test farvekombinationer for at sikre, at de opfylder WCAG-tilgængelighedsstandarder for tekstlæsbarhed.

6.47 til 1
Kontrast
AA
Tekstresultat
God

Sammenlignet: #FFFFFF på #8631C3

Tekst

16px, Normal (400)

Tæller som normal tekst.

  • AA (WCAG 1.4.3): mindst 4.5:1

    Bestået

  • AAA (WCAG 1.4.6): mindst 7:1

    Mangler 0.53

    Ikke bestået

UI-komponenter og grafik

Ikoner, inputrammer, fokusindikatorer og andre dele, du skal kunne se for at bruge brugerfladen.

  • AA (WCAG 1.4.11): mindst 3:1

    Bestået
6.47 til 1. Tekst: består AA, består ikke AAA. UI-komponenter: består.
Sådan tjekkes det
Farver sammenlignet (efter blanding)
Tekst #FFFFFF på baggrund #8631C3
Relativ luminans
Tekst 1.0000, baggrund 0.1120
Formel
(L1 + 0.05) / (L2 + 0.05) hvor L1 er luminansen for den lysere farve og L2 for den mørkere.
Nøjagtigt forhold
6.4794 til 1, vist som 6.47 til 1. Den viste værdi er afkortet, ikke afrundet, så den aldrig ser bedre ud end den er. Den nøjagtige værdi er den, der sammenlignes med kravet.

Tekststørrelse: 16px, Normal (400)

Tæller som normal tekst. Stor tekst er mindst 24px (18pt), eller mindst 18.67px (14pt) når den er fed (vægt 700 eller mere). Størrelser vises afskåret, ikke afrundet.

Tæller som normal tekst. Stor tekst er mindst 24px (18pt), eller mindst 18.67px (14pt) når den er fed (vægt 700 eller mere). Størrelser vises afskåret, ikke afrundet.

Aa
Forhåndsvisningstitel

Den hurtige brune ræv springer over den dovne hund

Eksempel på lille tekst (12px)

Tekst
#ffffff
Baggrund
#8631c3

WCAG-standarder

Niveau AA

Mindste kontrastforhold på 4.5:1 for normal tekst og 3:1 for stor tekst. Krævet for de fleste websites.

Niveau AAA

Forbedret kontrastforhold på 7:1 for normal tekst og 4.5:1 for stor tekst. Anbefalet for optimal tilgængelighed.

Farvekontrastkontrol

Beregn kontrastforholdet mellem tekst og baggrundsfarver.

Vælg en farve med farvevælgeren til tekst og baggrundsfarve eller indtast en farve i RGB-hexadecimal format (f.eks. #259 eller #2596BE). Du kan justere slideren for at vælge farve. Web Content Accessibility Guidelines (WCAG) har en specifik retningslinje for at finde ud af, om tekst er læselig for seende brugere. Dette kriterium bruger en bestemt algoritme til at mappe farvekombinationer til sammenlignelige forhold. Ved hjælp af denne formel angiver WCAG, at et 4.5:1 farvekontrastforhold med tekst og dens baggrund er tilstrækkeligt til almindelig (brød-) tekst, og stor tekst (18+ pt almindelig, eller 14+ pt fed) skal have mindst et 3:1 farvekontrastforhold.

Nøglefunktioner

  • Realtidsberegning af kontrastforhold
  • WCAG AA & AAA overholdelseskontrol
  • HSL-skydere til finjustering
  • Flere forhåndsvisningsformater

Avancerede værktøjer

  • Automatisk farvekorrektion
  • Tekst- og baggrundsprøver
  • Farvenavnsdetektion
  • Eksportér resultater

Ofte stillede spørgsmål

For WCAG AA-overholdelse kræver normal tekst et mindste kontrastforhold på 4,5:1, mens stor tekst (18pt eller 14pt fed) kræver 3:1.

WCAG AAA kræver højere kontrastforhold: 7:1 for normal tekst og 4,5:1 for stor tekst, mod AA's 4,5:1 og 3:1.

Brug vores funktion til automatisk rettelse til at justere enten tekst- eller baggrundsfarven, mens dit designvalg bevares, eller juster farverne manuelt med HSL-skyderne, der har visuelle indikatorer for de optimale zoner for AA/AAA-overholdelse.

De grønne zoner og AA/AAA-markørerne viser de optimale områder for at opnå WCAG-overholdelse. Retningshintene (Lysere/Mørkere) viser, hvilken vej du skal gå for at forbedre kontrasten ud fra din farvekombination.

Ja, du kan indtaste en hvilken som helst HEX-farvekode eller bruge farvevælgeren til at vælge egne farver. URL'en opdateres automatisk, så du kan dele bestemte farvekombinationer.