Fargekontrastkontroll

Sjekk kontrast for vanlig og stor tekst mellom forgrunns- og bakgrunnsfarger.

Fargekontrastkontroll

Et nettleserbasert resultat for planlegging og referanse.

ForgrunnBakgrunn

CSS / HEX

GUIDE

Hva du bør sjekke før du bruker det

Når dette verktøyet er nyttig

Bruk dette før du offentliggjør forgrunns- og bakgrunnsfarger for brødtekst, etiketter eller knapper. Skriv inn to HEX-farger for å se deres kontrastforhold og resultatene for normaltekst- og stortekstterskler.

Hvordan resultatet er laget

Beregningen lineariserer sRGB-kanalene, finner relativ luminans og dividerer den lysere luminansen pluss 0.05 med den mørkere luminansen pluss 0.05. Den sammenligner forholdet med teksttersklene 3:1, 4.5:1 og 7:1.

Eksempel og fortolkning

Å skrive inn forgrunn #111111 på bakgrunn #FFFFFF gir et høyt forhold. Sjekk først AA normal for liten brødtekst; for en kombinasjon beregnet for store overskrifter, les også AA large-resultatet.

Omfang og begrensninger

Å oppnå en ratio betyr ikke at en tilgjengelighetskontroll er fullført. Test faktisk fontstørrelse og -vekt, interaktive tilstander, tekst over bilder og all informasjon som kun formidles av farge.

Vanlige sporsmal

Hvordan flytter jeg en farge fra fargekontrastkontrollen til en annen app?

Bruk kopieringsknappen under resultatet for å kopiere CSS-, HEX- eller HSL-tekst. Bekreft at målapplikasjonen tolker samme fargeformat.

Vil en skjermfarge fra fargekontrastkontrollen samsvare med utskrift?

Ikke automatisk. Emissive RGB-skjermer og reflektive papir/blekk bruker ulike gamutter og blandingsmodeller, så trykkprofiler og proof-er er fortsatt nødvendige.

Kan jeg godkjenne et design token bare fra fargekontrastkontrollen?

Bruk det som kandidat, test deretter reell bakgrunn, mørk modus, interaksjonstilstander og tekstkontrast før du navngir og godkjenner et token.