Värikontrastin tarkistus

Do4U tarkistaa brändi- ja verkkosivustovärien kontrastin. Syötät värisi, yhden riviä kohden, ja kerrot, mihin kutakin väriä käytetään: "text" (teksti), "background" (tausta), "accent" (korostus, esimerkiksi painike) tai "border" (reuna). Koodi laskee jokaisen parin kontrastisuhteen WCAG-kaavalla ja näyttää, mitkä tasot se saavuttaa: AA ja AAA tavalliselle ja suurelle tekstille sekä 3:1 reunoille, kuvakkeille ja painikealueille. Arvoja ei pyöristetä ylöspäin. Jokaiselle hylätylle parille saat lähimmän läpäisevän värin, kerran tummempana ja kerran vaaleampana, samassa värisävyssä. Do4U rakentaa myös mukautetun paletin ja tarkistaa sen uudelleen kokonaisuutena. Viet paletin CSS-mukautettuina ominaisuuksina, SCSS-muuttujina tai JSONina, ja vienti tehdään selaimessasi. Kaikki toimii koodilla, ilman tekoälyä, ja se on ilmaista.

Kokeile nyt Hinnat

Ilmaiseksi ja ilman tiliä: Kontrastisuhteen laskin →

Kenelle

Suunnittelijoille, kehittäjille, toimistoille ja verkkosivustojen omistajille, jotka valitsevat brändivärejä tai rakentavat tyyliopasta ja haluavat tekstiä ja painikkeita, jotka kaikki voivat lukea.

Tyypilliset käyttötavat

Tarkista uusi brändipaletti ennen suunnittelun alkua
Löydä toissijaiselle tekstille harmaa, joka läpäisee yhä AA-tason
Tarkista painike-, linkki- ja reunavärit sivun taustaa vasten
Vie mukautetut värit CSS-muuttujina tyylitiedostoosi

Esimerkki

Syöte

#1a1a1a text #777777 text Secondary #ffffff background #cccccc border

Tulos

#1a1a1a taustalla #ffffff: 17.4:1, läpäisee AA- ja AAA-tason #777777 taustalla #ffffff: 4.47:1, ei läpäise AA-tasoa tavalliselle tekstille (läpäisee suurelle tekstille). Tummempi: #767676 → 4.54:1. Vaaleampi: ei mahdollinen #cccccc taustalla #ffffff: 1.6:1, ei läpäise muun kuin tekstin 3:1-kontrastia. Tummempi: #949494 → 3.03:1 Vienti (mukautettu): :root { --color-text: #1a1a1a; --secondary: #767676; --color-background: #ffffff; --color-border: #949494; }

Kiinteä, lyhennetty esimerkki. Todelliset tulokset on tuottanut tekoäly: tarkista ne.

Hinta ja rajat

Hinta: ilmainen, enintään 30 tarkistusta päivässä
Saatavilla paketilla: Ilmainen, Paketilla
Syötteen raja: Enintään 3 000 merkkiä tiedostoa kohden

Tietosuoja

Käsitellään omilla palvelimillamme EU:ssa (Puola). Syötteet ja tulokset poistetaan 7 päivän (Ilmainen) tai 30 päivän (paketit) kuluttua tai heti tuloksen näkemisen jälkeen, jos valitset, ettei niitä tallenneta. Kuvat poistetaan heti käsittelyn jälkeen.

API:ssa

Työkalun nimi: contrast_check. Luo työ kutsulla POST /api/v1/jobs ja hae tulos kutsulla GET /api/v1/jobs/{id}. Löydät API-avaimesi tililtäsi.

curl -X POST https://do4u.eu/api/v1/jobs \
  -H "Authorization: Bearer d4u_…" -H "Content-Type: application/json" \
  -d '{"tool": "contrast_check", "colors": ["#1a1a1a text", "#ffffff background", "#0066cc accent"]}'

Täydellinen API-dokumentaatio →

Kysymykset ja vastaukset

Miten kontrastisuhde lasketaan?

WCAG 2.2:n kaavalla: ensin kunkin värin suhteellinen luminanssi, sitten (L1 + 0.05) / (L2 + 0.05), jossa L1 on vaaleampi väri. Tulos on välillä 1:1–21:1. Arvoja verrataan pyöristämättä, joten 4.49:1 ei saavuta 4.5:1:tä, eikä näyttö koskaan pyöristä ylöspäin.

Mitkä parit tarkistetaan?

Teksti tarkistetaan jokaisella taustalla ja korostusväreillä: tavallisen tekstin rajat ovat 4.5:1 ja 7:1, suuren tekstin 3:1 ja 4.5:1. Korostus- ja reunavärit tarkistetaan taustalla muun kuin tekstin kontrastin rajaa 3:1 vasten. Väriä, jolla ei ole roolia, verrataan kaikkiin muihin väreihin.

Miten ehdotetut värit löydetään?

Vain vaaleus muuttuu, OKLCH-väriavaruudessa; värisävy pysyy samana. Do4U etsii lähimmän läpäisevän värin, kerran tummempana ja kerran vaaleampana, ja tarkistaa sen uudelleen hex-koodina. Jos mikään väri ei voi läpäistä jotakin taustaa vasten, se kertoo sen.

Tallennetaanko tekstini?

Vain niin kauan kuin on tarpeen: 7 päivää Free-tasolla ja 30 päivää paketin kanssa – tai ei lainkaan, jos valitset, ettei tekstiä tallenneta. Käsittely tapahtuu omilla palvelimillamme EU:ssa (Puolassa).

Voinko käyttää tulosta heti?

Tulokset ovat tekoälyn tuottamia. Lue ne ennen kuin julkaiset tai lähetät ne.

Liittyvät työkalut

Saavutettavuustarkistus
Tarkistaa sivun yleisten esteiden varalta ja selittää, miten ne korjataan.
Suunnittelupalaute kuvakaappauksesta
Lataa kuvakaappaus sivusta tai sovelluksesta ja saat numeroidut, konkreettiset havainnot painikkeiden koosta, kontrastista, kuvissa olevasta tekstistä, hierarkiasta ja väleistä, kukin kehyksellä kuvassa. Tekoälyn arvio, ei mittaus.
Vaihtoehtoiset tekstit
Lyhyet kuvakuvaukset ruudunlukijoille ja hakukoneille.

Kaikki työkalut →