ImageColorPicker.com

Provjera kontrasta boja

Testiraj omjer kontrasta između boje prednjeg plana i pozadine kako bi osigurao pristupačnost.

Provjeri svoje boje

Testiraj kombinacije boja kako bi osigurao da zadovoljavaju WCAG standarde pristupačnosti za čitljivost teksta.

19.81 prema 1
Kontrast
AAA
Rezultat za tekst
Super

Uspoređeno: #000000 na #E7FDF9

Tekst

16px, Regular (400)

Računa se kao normalan tekst.

  • AA (WCAG 1.4.3): barem 4.5:1

    Prolazi

  • AAA (WCAG 1.4.6): barem 7:1

    Prolazi

UI komponente i grafika

Ikone, obrubi polja za unos, indikatori fokusa i drugi dijelovi koje treba vidjeti za korištenje sučelja.

  • AA (WCAG 1.4.11): barem 3:1

    Prolazi
19.81 prema 1. Tekst: zadovoljava AA, zadovoljava AAA. UI komponente: zadovoljava.
Kako se ovo provjerava
Boje koje se uspoređuju (nakon miješanja)
Tekst #000000 na pozadini #E7FDF9
Relativna luminancija
Tekst 0.0000, pozadina 0.9407
Formula
(L1 + 0.05) / (L2 + 0.05) gdje je L1 luminancija svjetlije boje, a L2 tamnije.
Točan omjer
19.8158 prema 1, prikazano kao 19.81 prema 1. Prikazana vrijednost je odsječena, a ne zaokružena, pa nikad ne izgleda bolje nego što jest. Točna vrijednost je ona koja se uspoređuje s zahtjevom.

Veličina teksta: 16px, Regular (400)

Računa se kao normalan tekst. Veliki tekst je najmanje 24px (18pt), ili najmanje 18.67px (14pt) kada je podebljan (težina 700 ili više). Veličine su prikazane skraćeno, ne zaokruženo.

Računa se kao normalan tekst. Veliki tekst je najmanje 24px (18pt), ili najmanje 18.67px (14pt) kada je podebljan (težina 700 ili više). Veličine su prikazane skraćeno, ne zaokruženo.

Aa
Naslov pregleda

Brza smeđa lisica skače preko lijenog psa

Primjer malog teksta (12px)

Tekst
#000000
Pozadina
#e7fdf9

WCAG standardi

Razina AA

Minimalni omjer kontrasta od 4.5:1 za obični tekst i 3:1 za veliki tekst. Potrebno za većinu web-mjesta.

Razina AAA

Poboljšani omjer kontrasta od 7:1 za obični tekst i 4.5:1 za veliki tekst. Preporučuje se za optimalnu pristupačnost.

Provjera kontrasta boja

Izračunaj omjer kontrasta između boje teksta i pozadine.

Odaberite boju pomoću odabirača boja za boju teksta i pozadine ili unesite boju u RGB heksadecimalnom formatu (npr. #259 ili #2596BE). Možete prilagoditi klizač za odabir boje. Smjernice za web sadržaj (WCAG) imaju specifične smjernice kako bi pomogle u određivanju je li tekst čitljiv za korisnike s vidom. Ovi kriteriji koriste određen algoritam za mapiranje kombinacija boja u usporedive omjere. Korištenjem ove formule, WCAG navodi da 4.5:1 omjer kontrasta boja između teksta i njegove pozadine zadovoljava za obični (tijelo) tekst, a veliki tekst (18+ pt obični ili 14+ pt podebljani) trebao bi imati barem 3:1 omjer kontrasta.

Ključne značajke

  • Izračun omjera kontrasta u stvarnom vremenu
  • Provjera usklađenosti s WCAG AA i AAA
  • HSL klizači za fino podešavanje
  • Višestruki formati pregleda

Napredni alati

  • Automatsko popravljanje boja
  • Uzorkovanje teksta i pozadine
  • Detekcija naziva boja
  • Izvoz rezultata

Često postavljana pitanja

Za WCAG AA usklađenost, običan tekst zahtijeva minimalni omjer kontrasta 4,5:1, dok veliki tekst (18pt ili 14pt podebljano) zahtijeva 3:1.

WCAG AAA zahtijeva veće omjere kontrasta: 7:1 za običan tekst i 4,5:1 za veliki tekst, u usporedbi s 4,5:1 i 3:1 za AA.

Koristi našu funkciju automatskog ispravljanja za prilagodbu boje teksta ili pozadine uz očuvanje tvoje namjere dizajna, ili ručno prilagodi boje HSL klizačima s vizualnim indikatorima koji pokazuju optimalna područja za AA/AAA usklađenost.

Zelena područja i oznake AA/AAA pokazuju optimalne raspone za postizanje WCAG usklađenosti. Smjerne oznake (Svjetlije/Tamnije) vode te prema boljem kontrastu na temelju tvoje trenutne kombinacije boja.

Da, možeš unijeti bilo koji HEX kod boje ili odabrati vlastite boje pomoću birača boja. URL se automatski ažurira pa možeš podijeliti određene kombinacije boja.