ImageColorPicker.com

Värikontrastin tarkistin

Testaa etu- ja taustavärien kontrastisuhde varmistaaksesi saavutettavuuden.

Tarkista värisi

Testaa värikombinaatioita varmistaaksesi, että ne täyttävät WCAG:n saavutettavuusstandardit tekstin luettavuudelle.

17.07 suhteessa 1
Kontrasti
AAA
Tekstin tulos
Super

Verrattu: #000000 päälle #ACF7DA

Teksti

16px, Normaali (400)

Lasketaan normaaliksi tekstiksi.

  • AA (WCAG 1.4.3): vähintään 4.5:1

    Hyväksytty

  • AAA (WCAG 1.4.6): vähintään 7:1

    Hyväksytty

Käyttöliittymäkomponentit ja grafiikka

Ikonit, syöterajaukset, fokuksen indikaattorit ja muut käyttöliittymän osat, jotka pitää nähdä käyttöä varten.

  • AA (WCAG 1.4.11): vähintään 3:1

    Hyväksytty
17.07 yhteen. Teksti: läpäisee AA, läpäisee AAA. Käyttöliittymäkomponentit: läpäisee.
Miten tämä tarkistetaan
Verratut värit (sekoittamisen jälkeen)
Teksti #000000 taustalla #ACF7DA
Relatiivinen luminanssi
Teksti 0.0000, tausta 0.8035
Kaava
(L1 + 0.05) / (L2 + 0.05) missä L1 on vaaleamman värin luminanssi ja L2 tummemman värin luminanssi.
Tarkka suhde
17.0708 yhteen, näytetään arvona 17.07 yhteen. Näytetty arvo katkaistaan, ei pyöristetä, joten se ei koskaan näytä paremmalta kuin on. Tarkkaa arvoa verrataan vaatimukseen.

Tekstin koko: 16px, Normaali (400)

Lasketaan normaaliksi tekstiksi. Iso teksti on vähintään 24px (18pt), tai vähintään 18.67px (14pt) kun se on lihavoitu (paino 700 tai enemmän). Koot näytetään leikattuina, ei pyöristettyinä.

Lasketaan normaaliksi tekstiksi. Iso teksti on vähintään 24px (18pt), tai vähintään 18.67px (14pt) kun se on lihavoitu (paino 700 tai enemmän). Koot näytetään leikattuina, ei pyöristettyinä.

Aa
Esikatselun otsikko

Nopea ruskea kettu hyppää laiskan koiran yli

Pienen tekstin esimerkki (12px)

Teksti
#000000
Tausta
#acf7da

WCAG-standardit

Taso AA

Vähimmäiskontrastisuhde 4.5:1 normaalille tekstille ja 3:1 suurelle tekstille. Vaaditaan useimmille verkkosivustoille.

Taso AAA

Parannettu kontrastisuhde 7:1 normaalille tekstille ja 4.5:1 suurelle tekstille. Suositellaan optimaaliseen saavutettavuuteen.

Värikontrastin tarkistin

Laske tekstin ja taustavärien kontrastisuhde.

Valitse väri käyttämällä värinvalitsinta tekstille ja taustavärille tai syötä väri RGB-hexadesimaalimuodossa (esim. #259 tai #2596BE). Voit säätää liukusäädintä valitaksesi värin. Web Content Accessibility Guidelines (WCAG) tarjoaa erityisen ohjeen, joka auttaa selvittämään, onko teksti luettavissa näkövammaisille käyttäjille. Tämä kriteeri käyttää tiettyä algoritmia värikombinaatioiden vertaamiseen suhteiksi. Tämän kaavan avulla WCAG toteaa, että 4.5:1 värikontrastisuhde tekstin ja sen taustan välillä on riittävä normaalille (leipä)tekstille, ja suurella tekstillä (18+ pt normaali tai 14+ pt lihavoitu) tulisi olla vähintään 3:1 värikontrastisuhde.

Tärkeimmät ominaisuudet

  • Reaaliaikainen kontrastisuhteen laskenta
  • WCAG AA & AAA -vaatimusten tarkistus
  • HSL-liukusäätimet hienosäätöön
  • Useita esikatseluformaatteja

Edistyneet työkalut

  • Automaattinen värikorjaus
  • Tekstin ja taustan näytteet
  • Värinimien tunnistus
  • Vie tulokset

Usein kysytyt kysymykset

WCAG AA -yhteensopivuus vaatii normaalille tekstille vähintään 4,5:1 kontrastisuhteen, kun suuri teksti (18pt tai 14pt lihavoituna) vaatii 3:1.

WCAG AAA vaatii korkeampia kontrastisuhteita: 7:1 normaalille tekstille ja 4,5:1 suurelle tekstille. AA:ssa vastaavat luvut ovat 4,5:1 ja 3:1.

Käytä automaattista korjaustoimintoa, joka säätää joko teksti- tai taustaväriä ja säilyttää suunnittelusi tarkoituksen. Voit myös säätää värejä käsin HSL-liukusäätimillä, joissa visuaaliset merkit näyttävät AA/AAA-yhteensopivuuden optimaaliset alueet.

Vihreät alueet sekä AA- ja AAA-merkit näyttävät WCAG-yhteensopivuuden optimaaliset alueet. Suuntavihjeet (vaaleammaksi/tummemmaksi) ohjaavat sinua kohti parempaa kontrastia nykyisen väriyhdistelmäsi perusteella.

Kyllä, voit syöttää mitä tahansa heksakoodeja tai valita omia värejä värinvalitsimella. Osoite päivittyy automaattisesti, joten voit jakaa tiettyjä värien yhdistelmiä.