Värikontrastin Tarkistus
Tarkista värikontrastisuhteet WCAG 2.1 -vaatimustenmukaisuutta varten. Vahvista AA- ja AAA-standardit heti.
Mikä on WCAG-kontrastisuhde?
WCAG-kontrastisuhde mittaa edusta- ja taustavärien välisen kirkkauseron. Väliltä 1:1 – 21:1.
Mitkä ovat WCAG AA- ja AAA-vaatimukset?
WCAG AA vaatii vähintään 4.5:1 normaalille tekstille ja 3:1 suurelle tekstille. AAA vaatii 7:1 ja 4.5:1.
Mikä lasketaan suureksi tekstiksi?
Suuri teksti on 18pt (24px) tai suurempi, tai 14pt (18.66px) lihavoitu tai suurempi.
Miksi värikontrasti on tärkeä?
Oikea kontrasti varmistaa tekstin luettavuuden näkövammaisille ja parantaa luettavuutta kaikille.
Miten lasken kontrastisuhteen?
Lasketaan käyttämällä suhteellisia kirkkausarvoja. Kaava on (L1 + 0.05) / (L2 + 0.05).
Mikä on minimikontrasti UI-elementeille?
WCAG vaatii vähintään 3:1 UI-komponenteille ja graafisille objekteille.
Voinko käyttää mitä tahansa väriyhdistelmiä?
Kaikki yhdistelmät eivät täytä saavutettavuusstandardeja. Käytä tätä tarkistusta validointiin.
Mikä on suhteellinen kirkkaus?
Se on värin havaittu kirkkaus, välillä 0 (musta) – 1 (valkoinen). Lasketaan sRGB-väriavaruudella.
Pitääkö minun tarkistaa kuvien kontrasti?
Kuvissa olevan tekstin on täytettävä samat vaatimukset. Koristeellisiin kuviin ei sovelleta.
Mitkä työkalut auttavat kontrastissa?
Käytä selaimen kehittäjätyökaluja, suunnittelulaajennuksia tai verkkotarkistimia kuten tätä.
Näin käytät työkalua Värikontrastin Tarkistus
Tarkista hetkessä, täyttääkö tekstisi ja käyttöliittymäsi kontrasti WCAG 2.1:n AA- ja AAA-kriteerit — kokonaan selaimessa. Syötä kaksi väriä, ja suhde lasketaan paikallisesti; mitään ei lähde laitteeltasi.
- Kirjoita tai liitä tekstin väri Foreground Color -kenttään missä tahansa tuetussa muodossa, kuten HEX tai RGB.
- Täytä Background Color -kenttä tekstin taustavärillä laskeaksesi kontrastisuhteen.
- Lue laskettu suhde sekä AA- ja AAA-läpimerkinnät normaalille ja suurelle tekstille.
- Säädä jompaa kumpaa väriä, kunnes suhde ylittää 4,5:1 leipätekstillä tai 3:1 suurella tekstillä ja käyttöliittymäkomponenteilla.
- Vaihda Foreground Color- ja Background Color-arvot keskenään testataksesi käänteisen yhdistelmän, kuten vaalean tekstin tummassa teemassa.
AAA (7:1) on ansiokas tavoite pitkille teksteille, mutta 4,5:1 (AA) on vähimmäisvaatimus, jonka useimmat saavutettavuusohjeet asettavat.
Aiheeseen liittyvät työkalut
- Värinvalitsin Valitse mikä tahansa väri näytöltä pipetillä. Kopioi HEX-, RGB- ja HSL-koodit heti. Ilmainen online-värinvalitsin.
- Väripaletingeneraattori Luo kauniita, harmonisia väripaletteja hetkessä ilmaisella online-työkalullamme. Tukee monokromaattisia, analogisia, komplementäärisiä, triadisia, jaetusti komplementäärisiä ja tetradisia tiloja. Säädä värejä HSL-liukusäätimillä, lukitse suosikit ja vie CSS-, Tailwind-, JSON- tai SVG-muodossa. 100% selainpohjainen, tietosi eivät koskaan poistu laitteeltasi.
- Värisokeussimulaattori Ilmainen online-värisokeussimulaattori. Testaa suunnittelut Protanopia, Deuteranopia, Tritanopia ja muut tyypit. 100% yksityinen, toimii selaimessa.
- GIF Jaa Kehykset Pura ja lataa yksittäisiä kehyksiä GIF-animaatioista PNG:nä tai sprite-sheetinä. Ilmainen online-työkalu esikatselulla ja ZIP-viennillä.
- GIF Käänteinen Käännä GIF-animaatioiden toistojärjestys ilmaiseksi verkossa. Lataa, esikatsele ja lataa heti.
- GIF Nopeuden Vaihtaja Vaihda GIF-animaation nopeutta verkossa. Kiihdytä tai hidasta GIF-tiedostoja välittömästi.
- Video GIF:ksi Muunna video animoiduksi GIF:ksi verkossa. Säädä laatua, kehysnopeutta ja resoluutiota suoraan selaimessasi ilman latausta.
- Meemigeneraattori Ilmainen meemigeneraattori verkossa. Lisää klassiset ylä- ja alatekstit mihin tahansa kuvaan, raahaa niitä vapaasti ja lataa meemisi PNG:nä tai JPEG:nä heti.