Värikontrastin tarkistin

Tarkista värisi

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

1.00:1

Kontrasti

Hylätty

Erittäin huono

Normaali teksti

AA (4.5:1)

AAA (7:1)

Suuri teksti

AA (3:1)

AAA (4.5:1)

Tekstin väri

Taustaväri

Nopeat korjaukset

Esikatselun otsikko

Nopea ruskea kettu hyppää laiskan koiran yli

Pienen tekstin esimerkki (12px)

Teksti

#ffffff

Tausta

#e57000

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.

Riittämätön kontrasti kaikille tekstikokoille - ei täytä WCAG-standardeja.

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