Fargekontrast-sjekker

Kontroller umiddelbar kontrastforhold mellom tekstfarge og bakgrunnsfarge, og oppfyllelse av lesbarhetskriterier (WCAG AA)

OppdateringsinformasjonLagt til fargekontrast-sjekker, vurder lesbarhet for tekstfarge og bakgrunnsfargeSe oppdateringer

Funksjoner

Kontrastforhold sjekkes umiddelbar

Vis godkjent eller ikke godkjent WCAG AA bare ved å angi tekstfarge og bakgrunnsfarge

Støtter både samler og kode

Spesifiser ved å lime inn HEX, forkortet form, rgb() eller ved fargevalg

Eksempel i to størrelser

Kontroller det faktiske utseendet på vanlig tekst og overskrifter umiddelbar

Godkjent farge med ett klikk

Bruk umiddelbar foreslått farge som holder fargen, men endrer lysstyrke

Hvordan bruke

Velg tekstfarge

Velg med fargesamler eller skriv inn fargekode i ett av disse formatene: #333333, #333, rgb(51, 51, 51)

Velg bakgrunnsfarge

Velg bakgrunnsfarge på samme måte. Resultatet oppdateres mens du skriver, du trenger ikke trykke på knappen

Kontroller forholdet, godkjenning og eksempel

Kontroller kontrastforholdet, godkjenning for vanlig tekst og stor tekst, enkel vurdering, og hvordan eksempelteksten ser ut

Bruk foreslått farge og dobbeltsjekk

Hvis det ikke godkjennes, bruk foreslåtte fargeendringer for å få godkjent farge. Du kan også bytte tekstfarge og bakgrunnsfarge med bytteknappen

Brukstilfeller

Sjekk fargeskjema i presentasjoner og dokumenter

Kontroller at tekstfarge og bakgrunnsfarge i interne dokumenter og presentasjoner er lesbar før du oppretter dem

Sjekk fargeskjema på nettsteder

Sjekk at fargeskjemaer på nettstedet eller bannere oppfyller tilgjengelighetskriteria (WCAG AA)

Beslutning om bruk av merkevarefarge i brødtekst

Bestem hvor mørk merkevarfargen må være for å brukes i brødtekst

Rette ikke godkjente fargeskjemaer

Korriger påpekte fargeskjemaer til godkjente farger mens du holder fargenuansen

Grunnleggende kunnskap

Hva er kontrastforhold

Kontrastforhold er en indeks som uttrykker forskjellen i lysstyrke mellom tekstfarge og bakgrunnsfarge som et tall fra 1:1 til 21:1. Kombinasjonen av svart og hvitt har maksimalt 21:1, og samme farge har minimalt 1:1.

Hvordan beregningen fungerer：Kontrastforholdet beregnes ved å konvertere to farger til relativ luminans for sRGB, legge til 0,05 til hver av lysstyrkevärdiene (lysere og mørkere), og deretter dele.
Veiledning om tallverdier：For hvit bakgrunn (#FFFFFF), grå #777777 gir 4,47:1, #999999 gir 2,84:1, og svart (#000000) gir 21:1 kontrastforhold.

Forskjellen mellom WCAG AA og AAA

WCAG er en internasjonal retningslinje for tilgjengelighet av nettinnhold, og den definerer godkjenningsterskler for kontrastforhold i to nivåer: AA og AAA.

AA (standard nivå)：AA krever 4,5:1 eller mer for vanlig tekst og 3,0:1 eller mer for stor tekst, og er det nivået som generiske nettsteder tar sikte på.
AAA (strengere nivå)：AAA krever 7:1 eller mer for vanlig tekst og 4,5:1 eller mer for stor tekst, med sikte på å være lett lesbar selv for personer med svakere syn.

Definisjon av stor tekst

Stor tekst etter WCAG refererer til tekst som er omtrent 18 poeng (24px) eller større, eller 14 poeng (ca. 18,7px) eller større når den er fet.

Vanlig tekst：Vanlig tekst er tekst som ikke omfattes av størrelse på stor tekst, og inkluderer brødtekst og fotnoter, og krever et kontrastforhold på 4,5:1 eller mer.
Forhold til overskrifter：Selv overskrifter som er mindre enn 24px og ikke fetere, behandles som vanlig tekst, så både størrelse og vekt må bekreftes.