WCAG-värikontrastin tarkistin

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 esikatselu suuresta otsikon tekstityylistä.

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

Säätää värejä automaattisesti asteittain HSL-koordinaatteja pitkin löytääkseen lähimmät vaihtoehdot, jotka täyttävät kontrastisuhteen 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ärimuunnin
Muunna värejä ja säädä vaaleuskoordinaatteja.
Kuvan väripoimija
Poimi väripaletteja suunnittelumalleista.
CSS-värimuunnin
Muunna CMYK-, HSV-, RGB-, HSL- ja HEX-muotojen välillä.

Värikontrastin tarkistus

Laske WCAG-kontrastisuhteet etu- ja taustaväreille ja näytä yleiset tekstikoon tulokset.

Syöte
Kaksi voimassa olevaa CSS-väriä ja valinnainen esikatseluteksti.
Tulos
Kontrastisuhde WCAG AA- ja AAA-läpäisy- tai hylkäysilmaisimilla.
Todelliset rajoitukset
Laskelma kattaa vain luminanssikontrastin; se ei sertifioi käyttöliittymää tai ota huomioon fontin renderöintiä, liikettä, kohdistusta tai ei-väriin perustuvia vihjeitä.
Yksityisyys ja tietojen käsittely
Kaksi voimassa olevaa CSS-väriä ja valinnainen esikatseluteksti käsitellään tässä selaimen välilehdessä. Convertr ei vastaanota tai tallenna sitä; sivun sulkeminen tai uudelleenlataus tyhjentää työtilan, ellei työkalu nimenomaisesti tarjoa paikallista latausta.

Kuinka käyttää tätä työkalua

  1. Tarjoa kaksi voimassa olevaa CSS-väriä ja valinnainen esikatseluteksti työkalun ohjauksissa.
  2. Valitse asetukset, jotka vaikuttavat kontrastisuhteeseen WCAG AA- ja AAA-läpäisy- tai hylkäysilmaisimilla, ja käynnistä sitten työkalu.
  3. Tarkista kontrastisuhde WCAG AA- ja AAA-läpäisy- tai hylkäysilmaisimilla ennen kopiointia tai lataamista.

Yleiset virhetilat

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

Hyödyllinen esimerkki

Vertaa #1f2937 tekstiä #ffffff taustalla tarkastellaksesi sen suhdetta normaalille ja suurelle tekstille.