WCAG-värikontrastintarkistus

Arvioi tekstin ja taustavärien kontrastisuhde WCAG 2.1 -ohjeiden mukaisesti. Luo saavutettavia värisäätöjä välittömästi.

HEX/RGB/HSL
HEX/RGB/HSL
Kaikki toimii paikallisesti selaimessasi.

Live-tekstiesikatselu

Suuri otsikko (18pt lihavoitu / 24pt normaali)

Tämä on ennakkoarvio suuresta otsikon teksti tyylistä.

Normaali teksti (alle 18pt)

Lorem ipsum dolor sit amet, consectetur adipiscing eliitti.

Kontrastisuhde

18.6:1

WCAG 2.1 -yhteensopivuustila

WCAG AA -vaatimukset
Normaali teksti (4.5:1) PASS
Suuri teksti (3.0:1) PASS
WCAG AAA -vaatimukset
Normaali teksti (7.0:1) PASS
Suuri teksti (4.5:1) PASS

WCAG 2.1 -ohjeet

Tarkista helposti kontrastistandardit rakentaaksesi saavutettavia käyttöliittymiä, jotka ovat Section 508, ADA ja WCAG AA tai AAA -ohjeiden mukaisia.

Ehdotusmoottori

Sopeutuu automaattisesti värit jatkuvasti HSL-koordinaatteiden pitkin löytääkseen lähimpät vaihtoehdot, jotka täyttävät kontrastin suhteen kriteerit.

Täysin asiakaspuolella

Laskelmat suoritetaan paikallisesti selaimesi kontekstissa. Mitään värejä, tiedostoja tai telemetriakoordinaatteja ei lähetetä palvelimillemme.

Aiheeseen liittyvät välineet

HEX RGB HSL Väri Muunnin
Muunna värejä ja säädä vaaleuskoordinaatteja.
Kuva värikäs
Poimi väripaletteja suunnittelumalleista.
CSS Värinmuunnin
Muunna CMYK, HSV, RGB, HSL ja HEX-muodot.

Värikontrastintarkistus

Laske WCAG kontrastin suhteet etu- ja taustavärien osalta ja näytä yhteisiä teksti-pituusvaikutuksia.

Syöte
Kaksi voimassa olevaa CSS-väria ja valinnainen esikuva teksti.
Tuloste
Kontrastitaso WCAG AA ja AAA pass tai fail indikaattoreihin.
Todelliset rajoitukset
Laskelma kattaa vain valon kontrastin; se ei sertifioi käyttöliittymää tai tiliä fontin rendering, liikkeen, keskittymisen tai ei-värinen kuorma.
Yksityisyys ja tietojen käsittely
Kaksi voimassa olevaa CSS-väria ja valinnainen ennakkotekstinä käsitellään tässä selaimen taulukossa. muunnin ei saa tai tallentaa sitä; sivun sulkeminen tai uudelleen lataaminen puhdistaa työskentelytaidon, ellei työkalu nimenomaisesti tarjoa paikallista latausta.

Miten käyttää tätä työkalua

  1. Tarjoa kaksi voimassa olevaa CSS-väria ja valinnainen ennakkotekstinä työkalun ohjauksissa.
  2. Valitse asetukset, jotka vaikuttavat kontrastitasoon WCAG AA ja AAA pass tai epäonnistuneet indikaattorit, sitten käynnistä työkalu.
  3. Tarkista kontrastitaso WCAG AA ja AAA pass tai epäonnistumisen indikaattoreiden ennen kopioida tai ladata sitä.

Yleiset epäonnistumismodit

Vaikutteisia värejä ei voida mitata, ja läpinäkyvyys ilman ratkaistua taustaa voi tehdä suhteesta merkityksettömän.

Hyödyllinen esimerkki

Vertaa #1f2937 tekstiä #fffffffi tarkastellaksesi sen suhteen normaaliin ja isoin tekstiin.