Kontrastintarkistin
Local only — nothing is uploaded unless you save or share it.
Värikontrastin tarkistin WCAG:n saavutettavuustasoja varten.
- Syötä tekstisi väri ja taustan väri
- Lue suhde ja mitkä WCAG-tasot se läpäisee
- Jos se kaatuu, ota ehdotettu väri joka läpäisee
Näyte suuresta tekstistä
Näyte tavallisesta leipätekstistä — se koko jota suurin osa sisällöstäsi oikeasti käyttää.
Tallenna tämä työkalu
Pidä Kontrastintarkistin käden ulottuvilla
Käytä selaimen Jaa-valikkoa ja valitse sitten ”Lisää aloitusnäyttöön”.
Tietoa työkalusta
Käytä sitä kahden värin yksinkertaisena väritarkistimena tai kontrastintarkistimena läpinäkyvyyden kanssa: puoliksi läpinäkyvä etuala lasketaan taustan päälle ennen suhteen selvittämistä sen sijaan että sen alfa ohitettaisiin äänettömästi. Värikontrastisuhde mittaa kuinka erottuvaa teksti on takanaan olevasta taustasta, asteikolla 1:stä 21:een. Verkkosisällön saavutettavuusohjeet asettavat riman tavalliselle leipätekstille 4,5:een yhteen tasolla AA, laskevat sen suurelle tekstille 3:een yhteen ja nostavat sen tiukemmalla AAA-tasolla 7:ään yhteen. Nuo luvut eivät ole mielivaltaisia mieltymyksiä: heikko kontrasti on yksi verkon yleisimmistä saavutettavuusvirheistä, ja se koskettaa paljon useampaa kuin miltä näyttää — ketä tahansa jonka näkö on heikentynyt, ketä tahansa yli nelikymppistä ja ketä tahansa joka lukee näyttöä kirkkaassa auringonpaisteessa. Tämä tarkistin laskee suhteen kunnolla ja linearisoi sRGB-arvot ensin, mikä on se askel jonka naiivit laskurit ohittavat ja syy siihen että niiden tulokset ovat eri mieltä oikeiden saavutettavuusauditointien kanssa. Läpikuultavan tekstin se laskee ensin taustan päälle, koska värillä jolla on alfa ei yksinään ole yhtä todellista kontrastiarvoa. Kun pari jää vajaaksi, se ehdottaa lähintä tekstivärisi sävyä joka läpäisee.
Usein kysyttyä
Mikä on hyvä kontrastisuhde?
4,5:1 tai parempi tavalliselle leipätekstille, mikä on WCAG:n taso AA. Suuri teksti saa laskea 3:1:een, ja tiukempi AAA-taso pyytää 7:1:tä. Kaikki alle 3:1 on useimmille työlästä ja joillekin lukukelvotonta.
Mikä on hyvä kontrastisuhde?
4,5:1 tai parempi tavalliselle leipätekstille, mikä on WCAG:n taso AA. Suuri teksti saa laskea 3:1:een, ja tiukempi AAA-taso pyytää 7:1:tä. Kaikki alle 3:1 on useimmille työlästä ja joillekin lukukelvotonta.
Mikä lasketaan suureksi tekstiksi?
18 pistettä eli 24 pikseliä, tai 14 pistettä lihavoituna eli noin 18,66 pikseliä. Kaikki siitä ylöspäin tarvitsee tasolla AA vain suhteen 3 yhteen eikä 4,5 yhteen. Suuren tekstin rajan soveltaminen tavalliseen leipätekstiin on yksi yleisimmistä tavoista, joilla auditointi kaatuu sen jälkeen kun kaikki luulivat sen menneen läpi.
Pitäisikö tähdätä AA:han vai AAA:han?
AA on käytännön standardi ja se, johon useimmat säädökset viittaavat, mukaan lukien Euroopan esteettömyysdirektiivi. AAA on tiukempi ja koko suunnittelujärjestelmän läpi vaikea osua, joten sitä pidetään yleensä leipätekstin tavoitteena eikä kattavana vaatimuksena.
Miksi suhteenne poikkeaa laskurista jota käytin muualla?
Lähes aina siksi, että toinen laskee raakojen RGB-arvojen keskiarvon sen sijaan että linearisoisi ne ensin. sRGB on gammakoodattu, joten WCAG-kaava soveltaa kanavakohtaisen muunnoksen ennen painottamista. Sen ohittaminen tuottaa lukuja jotka näyttävät uskottavilta ja kaatuvat oikeissa auditoinneissa.
Miten läpinäkyvä teksti käsitellään?
Se lasketaan ensin taustavärin päälle ja mitataan sitten. Värillä jolla on alfakanava ei ole itsessään mielekästä kontrastisuhdetta, koska se mitä oikeasti näet on sekoitus. Työkalut jotka ohittavat alfan raportoivat läpimenon tekstille joka on käytännössä näkymätöntä.
Onko kontrastilla väliä myös kuvakkeille ja reunoille?
On. WCAG 2.1 vaatii 3 yhteen käyttöliittymän osille ja merkitystä kantaville grafiikoille, mikä kattaa lomakekenttien reunat, kohdistuksen osoittimet ja kuvakepainikkeet. Ne tarkistetaan täällä tekstitasojen rinnalla.
Auta parantamaan tätä työkalua
Löysitkö virheen, kaipaatko muutosta vai puuttuuko jokin työkalu?
Sinulla on lähettämätön viesti.
Kiitos — viesti tuli perille. Vastaus löytyy postilaatikostasi.Go to my messages