ImageColorPicker.com

Fargekontrastkontroll

Test kontrastforholdet mellom forgrunns- og bakgrunnsfarger for å sikre tilgjengelighet.

Sjekk fargene dine

Test fargekombinasjoner for å sikre at de oppfyller WCAG-tilgjengelighetsstandarder for tekstlesbarhet.

9.14 til 1
Kontrast
AAA
Tekstresultat
Veldig bra

Sammenlignet: #000000 på #31C36B

Tekst

16px, Vanlig (400)

Regnes som vanlig tekst.

  • AA (WCAG 1.4.3): minst 4.5:1

    Godkjent

  • AAA (WCAG 1.4.6): minst 7:1

    Godkjent

UI-komponenter og grafikk

Ikoner, rammer rundt inndatafelt, fokusindikatorer og andre deler du må se for å bruke grensesnittet.

  • AA (WCAG 1.4.11): minst 3:1

    Godkjent
9.14 til 1. Tekst: oppfyller AA, oppfyller AAA. UI-komponenter: oppfyller.
Hvordan dette blir sjekket
Fargene som sammenlignes (etter blanding)
Tekst #000000 på bakgrunn #31C36B
Relativ luminans
Tekst 0.0000, bakgrunn 0.4074
Formel
(L1 + 0.05) / (L2 + 0.05) hvor L1 er luminansen til den lysere fargen og L2 til den mørkere.
Eksakt ratio
9.1489 to 1, vist som 9.14 to 1. Den viste verdien blir kuttet av, ikke avrundet, så den ser aldri bedre ut enn den er. Den eksakte verdien er det som sammenlignes med kravet.

Tekststørrelse: 16px, Vanlig (400)

Regnes som vanlig tekst. Stor tekst er minst 24px (18pt), eller minst 18.67px (14pt) når den er fet (vekt 700 eller mer). Størrelser vises avkuttet, ikke avrundet.

Regnes som vanlig tekst. Stor tekst er minst 24px (18pt), eller minst 18.67px (14pt) når den er fet (vekt 700 eller mer). Størrelser vises avkuttet, ikke avrundet.

Aa
Forhåndsvisningstittel

Den raske brune reven hopper over den late hunden

Eksempel på liten tekst (12px)

Tekst
#000000
Bakgrunn
#31c36b

WCAG-standarder

Nivå AA

Minimum kontrastforhold på 4.5:1 for normal tekst og 3:1 for stor tekst. Kreves for de fleste nettsteder.

Nivå AAA

Forbedret kontrastforhold på 7:1 for normal tekst og 4.5:1 for stor tekst. Anbefalt for optimal tilgjengelighet.

Fargekontrastkontroll

Beregn kontrastforholdet mellom tekst- og bakgrunnsfarger.

Velg en farge ved å bruke fargevelgeren for tekst- og bakgrunnsfarge eller skriv inn en RGB-hexadecimal farge (f.eks. #259 eller #2596BE). Du kan justere skyveknappen for å velge farge. Web Content Accessibility Guidelines (WCAG) har en spesifikk retningslinje for å sikre at tekst er leselig for seende brukere. Dette kriteriet bruker en spesiell algoritme for å kartlegge fargekombinasjoner til sammenlignbare forhold. Ved å bruke denne formelen sier WCAG at et 4.5:1 fargekontrastforhold med tekst og bakgrunn er tilstrekkelig for vanlig (brød)tekst, og stor tekst (18+ pt vanlig, eller 14+ pt fet) bør ha minst et 3:1 fargekontrastforhold.

Nøkkelfunksjoner

  • Sanntidsberegning av kontrastforhold
  • WCAG AA & AAA samsvarssjekk
  • HSL-glidere for finjustering
  • Flere forhåndsvisningsformater

Avanserte verktøy

  • Automatisk fargekorrigering
  • Tekst- og bakgrunnsprøver
  • Fargenavngjenkjenning
  • Eksporter resultater

Ofte stilte spørsmål

For WCAG AA-samsvar må vanlig tekst ha et kontrastforhold på minst 4,5:1, mens stor tekst (18pt eller 14pt fet) må ha 3:1.

WCAG AAA krever høyere kontrastforhold: 7:1 for vanlig tekst og 4,5:1 for stor tekst, mot 4,5:1 og 3:1 for AA.

Bruk den automatiske rettingen for å justere tekst- eller bakgrunnsfarger uten å endre designet, eller juster fargene manuelt med HSL-glidere som viser optimale områder for AA- og AAA-samsvar.

De grønne sonene og AA- og AAA-markørene viser optimale områder for WCAG-samsvar. Retningshintene (Lysere/Mørkere) viser deg hvilken vei du bør gå for bedre kontrast, basert på fargekombinasjonen din.

Ja, du kan skrive inn hex-koder for alle farger eller bruke fargevelgeren til å velge egne farger. Nettadressen oppdateres automatisk, så du kan dele bestemte fargekombinasjoner.