WCAG AA- ja AAA-kontrastitarkistus

Tarkista värikontrasti WCAG 2.2 AA- ja AAA-tasoille, esikatsele tekstikokoja ja löydä saavutettavia värivaihtoehtoja.

Vie osoitin kentän päälle tai valitse kenttä nähdäksesi ohjeen. Sulje painamalla Escape.

EdustaTaustaPeittävä pohja

Käytä HEX-, RGB-, RGBA- tai HSL-muotoa. Läpinäkyvät värit yhdistetään peittävän pohjan päälle.

5.84:1

Rajat käyttävät täyden tarkkuuden suhdetta, eivät koskaan pyöristettyä näyttöarvoa.

WCAG 2.2
Taso	Käytä	SC	Vähimmäisarvo	Tulos
AA	Normaali teksti	1.4.3	4.5:1	Hyväksytty
AA	Suuri teksti	1.4.3	3:1	Hyväksytty
AAA	Normaali teksti	1.4.6	7:1	Hylätty
AAA	Suuri teksti	1.4.6	4.5:1	Hyväksytty
AA	Käyttöliittymäkomponentit ja grafiikka	1.4.11	3:1	Hyväksytty

EsikatselutekstiFonttikoko (CSS px)Lihavoitu

Aa — fiokit.

Normaali teksti: AA ✓ · AAA ✗

Suuri teksti: vähintään 24 CSS px tai lihavoituna 18,67 CSS px (14 pt).

Ehdotetun edustavärin tavoiteRaportti

WCAG 2.2
#155bdf / #ffffff (#ffffff)
5.8433:1
AA Normaali teksti (SC 1.4.3): PASS — 4.5:1
AA Suuri teksti (SC 1.4.3): PASS — 3:1
AAA Normaali teksti (SC 1.4.6): FAIL — 7:1
AAA Suuri teksti (SC 1.4.6): PASS — 4.5:1
AA Käyttöliittymäkomponentit ja grafiikka (SC 1.4.11): PASS — 3:1

Tämä tarkistaa väriparit, ei täydellistä WCAG-vaatimustenmukaisuutta. Arvioi vierekkäiset värit, vuorovaikutustilat ja todellinen sisältö erikseen.

W3C — SC 1.4.3 · SC 1.4.6 · SC 1.4.11

Näin se toimii

Aseta edusta, tausta ja peittävä pohja. AA- ja AAA-tulokset päivittyvät heti. Kokeile fonttikokoa ja -paksuutta, käytä ehdotettua väriä tai lataa raportti.

Käytännön esimerkki

Värit

#155bdf

Usein kysytyt kysymykset

Lähetetäänkö tekstini palvelimelle?

Ei. Sisältö käsitellään tässä selaimessa. Sitä ei lähetetä palvelimelle eikä tallenneta.

Mitä minun tulisi tietää työkalusta WCAG AA- ja AAA-kontrastitarkistus?

Raportoi tekstin ja muun sisällön rajat erikseen. Tämä väritarkistus ei sertifioi täydellistä WCAG-vaatimustenmukaisuutta.