Farvekontrast-tjekker

Tjek kontrast for normal og stor tekst ud fra forgrunds- og baggrundsfarver.

Farvekontrast-tjekker

Et browserbaseret resultat til planlægning og reference.

ForgrundBaggrund

CSS / HEX

GUIDE

Hvad du skal tjekke før brug

Når dette værktøj er nyttigt

Brug dette før du frigiver forgrunds- og baggrundsfarver til brødtekst, etiketter eller knapper. Indtast to HEX-farver for at se deres kontrastforhold og resultaterne for normaltekst- og storteksttærskler.

Sådan bliver resultatet lavet

Beregningen lineariserer sRGB-kanalerne, udleder relativ luminans og dividerer den lysere luminans plus 0.05 med den mørkere luminans plus 0.05. Den sammenligner forholdet med teksttærsklerne 3:1, 4.5:1 og 7:1.

Eksempel og fortolkning

Når du indtaster forgrund #111111 på baggrund #FFFFFF, får du en høj ratio. Tjek først AA normal for små bodytekster; for en kombination beregnet til store overskrifter, læs også AA large-resultatet.

Anvendelsesområde og begrænsninger

At opnå en ratio betyder ikke, at en tilgængelighedsgennemgang er fuldført. Test den faktiske skriftstørrelse og -vægt, interaktive tilstande, tekst placeret over billeder og al information, der kun formidles med farve.

Ofte stillede sporgsmal

Hvordan flytter jeg en farve fra farvekontrastkontrollen til en anden app?

Brug kopi-knappen under resultatet til at kopiere CSS-, HEX- eller HSL-tekst. Bekræft, at målappen tolker det samme farveformat.

Matcher en skærmfarve fra farvekontrastkontrollen udskrift?

Ikke automatisk. Emissive RGB-skærme og reflektive papir og blæk bruger forskellige gamuts og blandingsmodeller, så udskriftsprofiler og proofs er stadig nødvendige.

Kan jeg godkende et design token alene med farvekontrastkontrollen?

Brug den som kandidat, test derefter den faktiske baggrund, mørk tilstand, interaktions-tilstande og tekstkontrast før du navngiver og godkender et token.