Värikontrastitarkastaja

Tarkista tekstin ja taustan värin kontrastisuhde ja luettavuusstandardi (WCAG AA) heti

PäivityksetVärikontrasti-tarkistin lisätty: arvioi tekstin ja taustan värien luettavuudenNäytä päivitykset

Ominaisuudet

Kontrastisuhde tarkistetaan välittömästi

Syötä tekstin ja taustan väri, niin näet WCAG AA -vaatimuksien täyttymisen

Valitsin ja koodi tuetaan

Määritä väri värinvalitsimella tai liittämällä HEX-, lyhyt- tai rgb()-muotoisen värikoodin

Kaksi näytekokoaan

Näet heti, miten tavallinen teksti ja otsikko näyttävät todellisuudessa

Hyväksytyt värit yhdellä klikkauksella

Ehdotettu väri muuttaa kirkkaus pitäen värisävyn samana ja voidaan ottaa käyttöön välittömästi

Käyttöohje

Määritä tekstin väri

Valitse väri värinvalitsimella tai syötä värikoodi muodossa #333333, #333 tai rgb(51, 51, 51)

Määritä taustan väri

Määritä taustan väri samalla tavalla. Tulokset päivittyvät automaattisesti syötön yhteydessä ilman nappia

Tarkista suhde, vaatimuksien täyttyminen ja näyte

Tarkista kontrastisuhde, tavallisen ja suuren tekstin vaatimuksien täyttyminen, yhden lauseen arvio ja näytteeteksti

Ota ehdotettu väri käyttöön ja tarkista uudelleen

Jos vaatimuksia ei täytetä, ota käyttöön hyväksytty väri nappien kuten "Muuta tekstin väri väriin ..." avulla. Voit myös vaihtaa tekstin ja taustan värit painikkeella

Käyttötapaukset

Diaesityksen ja materiaalin värien tarkistus

Tarkista ennen luomista, ovatko sisäisen materiaalin ja diaesityksen tekstin ja taustan värit luettavia

Verkkosivuston värien tarkistus

Tarkista, täyttääkö sivuston tai bannerin värit saavutettavuusvaatimukset (WCAG AA)

Brändin värin soveltaminen tekstiin

Päätä, kuinka tumma brändin värin tulee olla, kun sitä käytetään tekstinä

Hyljäytyneiden värien korjaus

Korjaa arvostelussa epäonnistuneet värit hyväksyttyihin värihin pitäen värisävyn samana

Perustiedot

Mikä on kontrastisuhde

Kontrastisuhde on tekstin ja taustan värin kirkkauden eron mittari, joka ilmaistaan lukuina 1:1:stä 21:1:ään. Mustan ja valkoisen yhdistelmä on suurin 21:1, ja samasta väristä se on pienin 1:1.

Laskentamenetelmä：Kontrastisuhde lasketaan muuntamalla kaksi väriä sRGB-suhteelliseksi kirkkaudeksi ja jakamalla molempiin lisätään 0,05 ja jaetaan
Numerotarkoituksen ohjeistus：Valkoisen taustan (#FFFFFF) tapauksessa harmaa #777777 on 4,47:1, #999999 on 2,84:1 ja musta (#000000) on 21:1 kontrastisuhteella

WCAG AA:n ja AAA:n ero

WCAG on kansainvälinen verkkosisällön saavutettavuuden ohjeistus, joka määrittää kontrastisuhteen hyväksynnän kahdella tasolla: AA ja AAA

AA (vakiotaso)：AA edellyttää tavallisesta tekstistä 4,5:1:ää tai sitä suurempaa ja suuresta tekstistä 3,0:1:ää tai sitä suurempaa. Se on tavallisten verkkosivustojen tavoitteen mukainen taso
AAA (tiukempi taso)：AAA edellyttää tavallisesta tekstistä 7:1:ää tai sitä suurempaa ja suuresta tekstistä 4,5:1:ää tai sitä suurempaa. Se on luettavuustaso heikkonäköisille

Suuren tekstin määritelmä

WCAG:n suuri teksti viittaa karkeasti 18 pisteen (24 kuvapistettä) tai suurempaan tai lihavaan 14 pisteen (noin 18,7 kuvapistettä) tai suurempaan tekstiin

Tavallinen teksti：Tavallinen teksti on teksti, joka ei täytä suuren tekstin kriteerejä. Se koskee luettavaa sisältöä, kuten tekstiä ja huomautuksia, ja vaatii 4,5:1 tai sitä suurempaa kontrastisuhde
Otsikkojen suhde：Otsikot, jotka ovat alle 24 kuvapistettä eikä lihavia, käsitellään tavallisena tekstinä. Tämä edellyttää sekä koon että lihavuuden tarkistusta