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.

7.25 suhteessa 1
Kontrasti
AAA
Tekstin tulos
Erittäin hyvä

Verrattu: #FFFFFF päälle #7C4A38

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
7.25 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 #FFFFFF taustalla #7C4A38
Relatiivinen luminanssi
Teksti 1.0000, tausta 0.0946
Kaava
(L1 + 0.05) / (L2 + 0.05) missä L1 on vaaleamman värin luminanssi ja L2 tummemman värin luminanssi.
Tarkka suhde
7.2573 yhteen, näytetään arvona 7.25 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
#ffffff
Tausta
#7c4a38

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ä.