Toiminnallinen

Värikontrastitarkistus

Mainos

Preview

Normal Text (16px)

Large Text (24px)

Contrast Ratio

21.00:1

WCAG Compliance

Normal Text

AA Pass
AAA Pass

Large Text (18pt+ or 14pt+ bold)

AA Pass
AAA Pass

UI Components & Graphics

AA Pass

WCAG Standards

Normal Text

  • AA: 4.5:1 minimum
  • AAA: 7:1 minimum

Large Text

  • AA: 3:1 minimum
  • AAA: 4.5:1 minimum

UI Components

  • AA: 3:1 minimum

Common Combinations

Black on White
White on Blue
White on Dark Gray
Anna väriyhdistelmäsi alle testataksesi niitä värikontrastitarkistuksellamme ja nähdäksesi heti, täyttävätkö ne esteettömyysstandardit.

Näin värikontrastitarkistus toimii

Anna etualan ja taustan värit RGB-heksa-arvojen avulla tai valitse ne suoraan värinvalitsimella.

 

  • Säädä Alfaa muuttaaksesi etualan värin läpinäkyvyyttä.
  • Käytä Vaaleus-liukusäädintä saadaksesi värin näyttämään vaaleammalta tai tummemmalta.

Tämän jälkeen työkalumme laskee kontrastisuhteen ja tarkistaa sen WCAG-ohjeiden mukaisesti:

  • WCAG 2.0 Taso AA
  • Vähintään 4,5:1 normaalille leipätekstille
  • Vähintään 3:1 suurelle tekstille
  • WCAG 2.1 (käyttöliittymä ja grafiikka)
  • Vähintään 3:1 kuvakkeille, reunuksille ja muille käyttöliittymäkomponenteille
  • WCAG-taso AAA
  • Vähintään 7:1 normaalille tekstille
  • Vähintään 4,5:1 suurelle tekstille

Suuri teksti tarkoittaa jompaakumpaa:

  • 14 pt (noin 18,66 px) ja lihavoitu tai
  • 18 pt (noin px) tai suurempi

Voit käyttää värinvalitsimen pipettiä saadaksesi tarkat värit mistä tahansa näytölläsi.

Pelkästään väriin perustuvat linkit erottuvat joukosta käyttämällä värikontrastitarkistustamme varmistaaksesi, että ne täyttävät esteettömyysstandardit ja pysyvät helposti luettavissa.