ImageColorPicker.com

Spalvų kontrasto tikrintuvas

Patikrink kontrasto santykį tarp pirmojo plano ir fono spalvų, kad užtikrintum prieinamumą.

Patikrink savo spalvas

Išbandyk spalvų derinius, kad įsitikintum, jog jie atitinka WCAG prieinamumo standartus teksto įskaitomumui.

6.19 prie 1
Kontrastas
AA
Teksto rezultatas
Gera

Palyginta: #000000 ant #C37B31

Tekstas

16px, Regular (400)

Laikoma įprastu tekstu.

  • AA (WCAG 1.4.3): bent 4.5:1

    Atitinka

  • AAA (WCAG 1.4.6): bent 7:1

    Reikia dar 0.81

    Neatitinka

Vartotojo sąsajos elementai ir grafika

Piktogramos, įvesties kraštinės, fokuso indikatoriai ir kitos dalys, kurias reikia matyti, kad naudotis sąsaja.

  • AA (WCAG 1.4.11): bent 3:1

    Atitinka
6.19:1. Tekstas: atitinka AA, neatitinka AAA. Vartotojo sąsajos elementai: atitinka.
Kaip tai tikrinama
Palygintos spalvos (po susimaišymo)
Tekstas #000000 ant fono #C37B31
Santykinis šviesumas
Tekstas 0.0000, fonas 0.2598
Formulė
(L1 + 0.05) / (L2 + 0.05) kur L1 yra šviesesnės spalvos šviesumas, o L2 tamsesnės.
Tiksli santykis
6.1979:1, rodoma kaip 6.19:1. Rodyta reikšmė nukerpama, neapvalinama, todėl ji niekada neatrodo geresnė nei yra. Tiksli reikšmė yra ta, kuri palyginama su reikalavimu.

Teksto dydis: 16px, Regular (400)

Laikoma įprastu tekstu. Didelis tekstas yra ne trumpesnis nei 24px (18pt), arba ne trumpesnis nei 18.67px (14pt) kai šriftas bold (storumas 700 ar daugiau). Dydžiai rodomi apkarpyti, neapvalinti.

Laikoma įprastu tekstu. Didelis tekstas yra ne trumpesnis nei 24px (18pt), arba ne trumpesnis nei 18.67px (14pt) kai šriftas bold (storumas 700 ar daugiau). Dydžiai rodomi apkarpyti, neapvalinti.

Aa
Peržiūros pavadinimas

Greita ruda lapė peršoka per tingų šunį

Mažo teksto pavyzdys (12px)

Tekstas
#000000
Fonas
#c37b31

WCAG standartai

AA lygis

Minimalus kontrasto santykis 4.5:1 įprastam tekstui ir 3:1 dideliam tekstui. Reikalingas daugumai svetainių.

AAA lygis

Pagerintas kontrasto santykis 7:1 įprastam tekstui ir 4.5:1 dideliam tekstui. Rekomenduojamas optimaliam prieinamumui.

Spalvų kontrasto tikrintuvas

Apskaičiuok teksto ir fono spalvų kontrasto santykį.

Pasirink spalvą naudodamas spalvų parinkiklį tekstui ir fono spalvai arba įvesk spalvą RGB šešioliktainiu formatu (pvz., #259 arba #2596BE). Gali reguliuoti slankiklį, kad pasirinktum spalvą. Žiniatinklio turinio prieinamumo gairės (WCAG) turi konkrečią gairę, padedančią nustatyti, ar tekstas yra įskaitomas regintiems vartotojams. Šis kriterijus naudoja tam tikrą algoritmą, kad spalvų derinius paverstų palyginamais santykiais. Naudodamasis šia formule, WCAG teigia, kad 4.5:1 spalvų kontrasto santykis tarp teksto ir jo fono yra pakankamas įprastam (kūno) tekstui, o didelis tekstas (18+ pt įprastas arba 14+ pt paryškintas) turėtų turėti bent 3:1 spalvų kontrasto santykį.

Pagrindinės savybės

  • Realaus laiko kontrasto santykio skaičiavimas
  • WCAG AA ir AAA atitikties tikrinimas
  • HSL slankikliai smulkiam derinimui
  • Kelių formatų peržiūra

Pažangūs įrankiai

  • Automatinis spalvų taisymas
  • Teksto ir fono pavyzdžiai
  • Spalvų pavadinimų atpažinimas
  • Rezultatų eksportavimas

Dažniausiai užduodami klausimai

WCAG AA atitikčiai įprastam tekstui reikia mažiausiai 4,5:1 kontrasto santykio, o dideliam tekstui (18pt arba 14pt paryškintas) reikia 3:1.

WCAG AAA reikalauja didesnių kontrasto santykių: 7:1 įprastam tekstui ir 4,5:1 dideliam tekstui, o AA atitinkamai 4,5:1 ir 3:1.

Naudok mūsų automatinio taisymo funkciją, kad pakeistum teksto arba fono spalvą ir išlaikytum dizaino idėją, arba spalvas koreguok rankiniu būdu su HSL slankikliais, kurių vaizdiniai indikatoriai rodo optimalias AA/AAA atitikties zonas.

Žalios zonos ir AA/AAA žymės rodo optimalius intervalus WCAG atitikčiai pasiekti. Krypties užuominos (Šviesiau/Tamsiau) padeda pasiekti geresnį kontrastą, atsižvelgiant į tavo dabartinį spalvų derinį.

Taip, gali įvesti bet kokius HEX spalvų kodus arba pasirinkti savo spalvas spalvų parinkikliu. URL atnaujinamas automatiškai, todėl gali bendrinti konkrečius spalvų derinius.