Kontrastilaskuri

Syötä tekstin ja taustan väri nähdäksesi WCAG-kontrastisuhteen ja sen, mitkä AA- ja AAA-tasot hyväksytään.

—Kontrastisuhde
Normaali tekstiAA4.5:1—
Normaali tekstiAAA7:1—
Suuri tekstiAA3:1—
Suuri tekstiAAA4.5:1—
Käyttöliittymä & grafiikka3:1—
Syötä tekstin ja taustan väri tarkistusta varten.

Jokainen tarkistus tapahtuu selaimessasi. Mitään syöttämiäsi tietoja ei lähetetä BroBroGo-palveluun.

UKK

Mitä AA- ja AAA-tulokset tarkoittavat?

AA on taso, johon useimmat sivustot pyrkivät: se vaatii vähintään 4.5:1-suhteen normaalille tekstille ja 3:1-suhteen suurelle tekstille. AAA on tiukempi – 7:1 normaalille tekstille ja 4.5:1 suurelle tekstille. Kontrastisuhde vaihtelee välillä 1:1 (ei kontrastia) ja 21:1 (musta valkoisella).

Mikä lasketaan suureksi tekstiksi?

Tekstiä, joka on vähintään 18pt (noin 24px) tai lihavoituna vähintään 14pt (noin 18.5px). Suurempi teksti pysyy luettavana pienemmällä kontrastilla, joten se läpäisee AA-tason suhteella 3:1 ja AAA-tason suhteella 4.5:1 normaalin tekstin tiukempien rajojen sijaan.

Mitä värimuotoja voin syöttää?

Voit kirjoittaa hex-arvon kuten #1a1a1a, rgb()-arvon kuten rgb(26, 26, 26) tai hsl()-arvon – tai klikata väripaletteja valitaksesi värin. Vaihtopainikkeella voit vaihtaa tekstin ja taustan värit päikseen.

Käyttääkö tämä WCAG 2 - vai uudempaa APCA-menetelmää?

Tämä työkalu käyttää WCAG 2.1 / 2.2 -kaavaa, johon saavutettavuusvaatimukset ja -auditoinnit nykyään perustuvat. APCA on uudempi, enemmän näköhavaintoon perustuva menetelmä, jota luonnostellaan WCAG 3 -standardiin – se on lupaava, mutta ei vielä virallinen vaatimus, joten tämän työkalun tulokset eivät käytä sitä.

Kirjoittanut ja tarkistanut BroBroGo-toimitustiimi.Päivitetty viimeksi:

WCAG 2.1 / 2.2 -kontrastisuositukset ja työkalun toiminta

Kontrastilaskuri on työkalu, jonka avulla voit syöttää tekstin värin ja taustavärin määrittääksesi niiden välisen kontrastisuhteen WCAG 2.1 / 2.2 -standardien mukaisesti. Työkalu näyttää, mitkä saavutettavuustasot (AA ja AAA) väriyhdistelmä läpäisee normaalin tekstin, suuren tekstin sekä käyttöliittymäkomponenttien osalta.

Työkalun aloituksessa käytettävät oletusvärit ovat #4f46e5 tekstille ja #ffffff taustalle, jolloin niiden välinen kontrastisuhde on 6.29. Työkalussa on myös vaihtopainike, jolla voit vaihtaa tekstin ja taustan värit päikseen.

Työkalun syötteet ja hyväksytyt värimuodot

Työkalu vaatii kaksi syötettä kontrastisuhteen laskemiseksi:

  • Tekstin väri (Tekstin väri): Väriarvo, jonka muoto voi olla hex-arvo (esim. #1a1a1a), rgb()-arvo (esim. rgb(26, 26, 26)) tai hsl()-arvo.
  • Taustaväri (Taustaväri): Väriarvo, jonka muoto voi olla hex-arvo (esim. #1a1a1a), rgb()-arvo (esim. rgb(26, 26, 26)) tai hsl()-arvo.

Jos syötät virheellisen tekstin värin, työkalu näyttää virheilmoituksen: "Syötä kelvollinen tekstin väri, kuten #1a1a1a or rgb(26, 26, 26).". Jos taas syötät virheellisen taustavärin, näytetään virheilmoitus: "Syötä kelvollinen taustaväri, kuten #ffffff tai rgb(255, 255, 255).".

Työkalun antamat tulokset ja niiden tulkinta

Laskuri analysoi syötetyt värit ja tuottaa seuraavat tulokset:

  • Kontrastisuhde (Kontrastisuhde): Värien välinen laskettu suhde, joka esitetään muodossa "X:1". Kontrastisuhde vaihtelee välillä 1:1 (ei kontrastia) ja 21:1 (musta valkoisella).
  • Normaali teksti (Normaali teksti): Ilmoittaa joko "Hyväksytty" tai "Hylätty" AA- ja AAA-tasoille.
  • Suuri teksti (Suuri teksti): Ilmoittaa joko "Hyväksytty" tai "Hylätty" AA- ja AAA-tasoille.
  • Käyttöliittymä & grafiikka (Käyttöliittymä & grafiikka): Ilmoittaa joko "Hyväksytty" tai "Hylätty" yhtä 3:1-kynnysarvoa vasten. Tällä rivillä ei ole erillistä AA- tai AAA-tason erottelua, vaan työkalu näyttää sille vain yhden tuloksen.
  • Yhteenveto (Verdict): Tiivistetty viesti, joka kertoo korkeimman läpäistyn tason. Viesti voi olla jokin seuraavista:
    • "Läpäisee AA- ja AAA-tasot normaalille tekstille."
    • "Läpäisee AA-tason normaalille tekstille."
    • "Läpäisee AA-tason vain suurelle tekstille."
    • "Alle AA-tason minimivaatimuksen – paranna kontrastia."

Saavutettavuustasojen AA ja AAA säännöt sekä rajat

Kontrastisuhteen arvioinnissa käytetään WCAG 2.1 / 2.2 -kaavaa, ja eri tasoille on määritetty seuraavat vaatimukset:

  • Normaali teksti: AA-taso vaatii vähintään suhteen 4.5:1. AAA-taso vaatii vähintään suhteen 7:1.
  • Suuri teksti: AA-taso vaatii vähintään suhteen 3:1. AAA-taso vaatii vähintään suhteen 4.5:1.
  • Käyttöliittymä & grafiikka: Vaatii vähintään suhteen 3:1. Tämä on ainoa rivi, jossa käytetään yhtä kynnysarvoa erillisten AA- ja AAA-tasojen sijaan.

Suureksi tekstiksi määritellään teksti, joka on vähintään 18pt (noin 24px), tai lihavoituna vähintään 14pt (noin 18.5px).

Kenelle kontrastilaskuri on tarkoitettu?

Työkalu on suunniteltu useille eri ammattiryhmille saavutettavuuden varmistamiseen:

  • Suunnittelijat: Tekstin ja komponenttien luettavuuden tarkistamiseen.
  • Kehittäjät: Varmistamaan, että saavutettavuusstandardien vaatimukset täyttyvät.
  • Sisältötiimit: Varmistamaan materiaaliensa värikontrastien asianmukaisuus.

Tietosuoja ja tietojen käsittely

Käyttäjän yksityisyys on huomioitu työkalun toiminnassa. Jokainen tarkistus tapahtuu selaimessasi, eikä mitään syöttämiäsi tietoja lähetetä BroBroGo-palveluun.

Usein kysytyt kysymykset (FAQ)

Mitä AA- ja AAA-tulokset tarkoittavat?

AA on taso, johon useimmat sivustot pyrkivät: se vaatii vähintään 4.5:1-suhteen normaalille tekstille ja 3:1-suhteen suurelle tekstille. AAA on tiukempi – 7:1 normaalille tekstille ja 4.5:1 suurelle tekstille. Kontrastisuhde vaihtelee välillä 1:1 (ei kontrastia) ja 21:1 (musta valkoisella).

Mikä lasketaan suureksi tekstiksi?

Tekstiä, joka on vähintään 18pt (noin 24px) tai lihavoituna vähintään 14pt (noin 18.5px). Suurempi teksti pysyy luettavana pienemmällä kontrastilla, joten se läpäisee AA-tason suhteella 3:1 ja AAA-tason suhteella 4.5:1 normaalin tekstin tiukempien rajojen sijaan.

Mitä värimuotoja voin syöttää?

Voit kirjoittaa hex-arvon kuten #1a1a1a, rgb()-arvon kuten rgb(26, 26, 26) tai hsl()-arvon – tai klikata väripaletteja valitaksesi värin. Vaihtopainikkeella voit vaihtaa tekstin ja taustan värit päikseen.

Käyttääkö tämä WCAG 2 - vai uudempaa APCA-menetelmää?

Tämä työkalu käyttää WCAG 2.1 / 2.2 -kaavaa, johon saavutettavuusvaatimukset ja -auditoinnit nykyään perustuvat. APCA on uudempi, enemmän näköhavaintoon perustuva menetelmä, jota luonnostellaan WCAG 3 -standardiin – se on lupaava, mutta ei vielä virallinen vaatimus, joten tämän työkalun tulokset eivät käytä sitä.

VärimuunninMuunna värejä muotojen HEX, RGB, HSL, HSV, CMYK ja LAB välillä – muokkaa mitä tahansa kenttää ja muut päivittyvät reaaliajassa.Kuvan värivalitsinPoimi mikä tahansa pikseli kuvasta ja lue sen HEX-, RGB- ja HSL-arvot tarkan suurennuslasin avulla.Kuvamuodon muunninMuunna JPG-, PNG-, WebP-, HEIC- ja AVIF-kuvia suoraan selaimessasi.KuvasuhdelaskinMuunna mikä tahansa leveys × korkeus selkeäksi kuvasuhteeksi (kuten 16:9) tai valitse suhde ja laske puuttuva sivu – videoille, kuville ja näytöille.Box Shadow -generaattoriSäädä laatikon varjoa liukusäätimillä, pinoa tasoja syvyyden luomiseksi ja kopioi valmis CSS-koodi heti.Liukuväri-generaattoriLuo lineaarinen, säteittäinen tai kartiomainen liukuväri, lisää väripisteitä ja aseta suunta, ja kopioi sitten CSS yhdellä klikkauksella.Näytön testiohjelmaTarkista mikä tahansa näyttö koko näytön testikuvioilla – kuolleet pikselit, taustavalon vuoto, raidoitus, gamma, haamukuvat, virkistystaajuus ja paljon muuta.