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.

5.06 suhteessa 1
Kontrasti
AA
Tekstin tulos
Hyvä

Verrattu: #FFFFFF päälle #B331C3

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

    Tarvitaan 1.94 lisää

    Hylätty

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
5.06 yhteen. Teksti: läpäisee AA, ei läpäise AAA. Käyttöliittymäkomponentit: läpäisee.
Miten tämä tarkistetaan
Verratut värit (sekoittamisen jälkeen)
Teksti #FFFFFF taustalla #B331C3
Relatiivinen luminanssi
Teksti 1.0000, tausta 0.1572
Kaava
(L1 + 0.05) / (L2 + 0.05) missä L1 on vaaleamman värin luminanssi ja L2 tummemman värin luminanssi.
Tarkka suhde
5.0674 yhteen, näytetään arvona 5.06 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
#b331c3

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