Kehittäjä🔒 Toimii selaimessasi

Värikontrastin tarkistaja

Tarkista WCAG AA/AAA värikontrastin vaatimustenmukaisuus

Tekstin väri

Taustaväri

Esikatselun Otsikkoteksti

Tältä leipäteksti näyttää näillä väreillä.

Ja tämä on pientä tekstiä viitteeksi.

Kontrastisuhde

21.00:1

WCAG AA

Normaali teksti✓ Hyväksytty

Suuri teksti (18px+)✓ Hyväksytty

UI-komponentit✓ Hyväksytty

WCAG AAA

Normaali teksti✓ Hyväksytty

Suuri teksti (18px+)✓ Hyväksytty

Tietoa: Värikontrastin tarkistaja

Värikontrastin tarkistaja arvioi kahden värin välisen kontrastisuhteen WCAG 2.1 -ohjeiden mukaisesti. Se kertoo, täyttävätkö väriyhdistelmäsi AA- tai AAA-saavutettavuusstandardit normaalille tekstille, suurelle tekstille ja UI-komponenteille. Kaikki toimii selaimessasi.

Usein kysytyt kysymykset

Mikä on hyvä kontrastisuhde?

WCAG AA vaatii vähintään 4,5:1 normaalille tekstille ja 3:1 suurelle tekstille (18px+ tai 14px+ lihavoitu). WCAG AAA vaatii 7:1 normaalille tekstille ja 4,5:1 suurelle tekstille. Suurempi suhde tarkoittaa parempaa luettavuutta.

Mitä eroa on AA:lla ja AAA:lla?

AA on useimmille verkkosisällöille suositeltu vähimmäisstandardi. AAA on tiukempi standardi, joka tarjoaa paremman luettavuuden näkövammaisille käyttäjille. AAA:n täyttäminen on ihanteellista, mutta ei aina vaadittua.

Miten kontrastisuhde lasketaan?

Kontrastisuhde lasketaan käyttämällä kunkin värin suhteellista luminanssia WCAG 2.1:n määrittelemällä tavalla. Kaava vertaa vaaleampia ja tummempia värejä asteikolla 1:1 (ei kontrastia) - 21:1 (maksimaalinen kontrasti, musta valkoisella).

Usein kysytyt kysymykset

Mikä on hyvä kontrastisuhde?

Mitä eroa on AA:lla ja AAA:lla?

Miten kontrastisuhde lasketaan?