Checker kontrastu farieb
Okamžité posúdenie pomeru kontrastu a kritérií čitateľnosti (WCAG AA) medzi farbou textu a farbou pozadia
Vlastnosti
Okamžité posúdenie pomeru kontrastu
Zadajte farbu textu a pozadia, aby sa zobrazil výsledok WCAG AA
Podpora výberu a kódu
Zadávanie prostredníctvom vkladania HEX, skráteného formátu, rgb() alebo výberu farby
Vzorka v dvoch veľkostiach
Okamžité overenie vzhľadu bežného textu a nadpisov
Jedným kliknutím na vyhovujúcu farbu
Okamžité aplikovanie navrhovanej farby so zmennou jasnosťou pri zachovaní odtieňa
Ako používať
Zadajte farbu textu
Vyberte si prostredníctvom výberu farieb alebo zadajte farebný kód v niektorom z formátov: #333333, #333, rgb(51, 51, 51)
Zadajte farbu pozadia
Zadajte farbu pozadia rovnakým spôsobom. Výsledky sa aktualizujú okamžite bez potreby stlačiť tlačidlo
Skontrolujte pomer, výsledky a vzorku
Skontrolujte pomer kontrastu, výsledky pre bežný a veľký text, jednoradové hodnotenie a vzhľad vzorového textu
Aplikujte navrhovanú farbu a znovu skontrolujte
Ak neuspeje, použite tlačidlo navrhnutej farby ako napríklad "Zmeniť farbu textu na ...". Tlačidlo výmeny umožňuje vymeniť si farbu textu a pozadia
Príklady použitia
Overenie farieb prezentácií a materiálov
Pred vytvorením si overte, či sú farby textu a pozadia v interných materiáloch a prezentáciách čitateľné
Kontrola farieb webových stránok
Overte, či farby stránky alebo banneru spĺňajú štandardy dostupnosti (WCAG AA)
Rozhodnutie o použití značkovej farby v tele textu
Rozhodnite, ako tmavá musí byť značková farba, keď sa používa ako farba textu v tele
Oprava nevyhovujúcich farieb
Opravte označené farby na vyhovujúce farby pri zachovaní odtieňa
Základné vedomosti
Čo je pomer kontrastu
Pomer kontrastu je metrika vyjadrujúca rozdiel jasu medzi farbou textu a farbou pozadia v numerickej forme od 1:1 do 21:1. Kombinácia čiernej a bielej dosahuje maximálne 21:1, zatiaľ čo rovnaké farby dosahujú minimálne 1:1.
- Ako sa vypočítava：Pomer kontrastu sa vypočítava prevodom dvoch farieb na relatívnu luminanciu sRGB a delením (luminancia svetlejšej farby + 0,05) / (luminancia tmavšej farby + 0,05).
- Referenčné hodnoty：Pri bielom pozadí (#FFFFFF) dosahuje sivá #777777 pomer 4,47:1, #999999 dosahuje 2,84:1 a čierna (#000000) dosahuje maximálne 21:1.
Rozdiel medzi WCAG AA a AAA
WCAG je medzinárodná smernica týkajúca sa dostupnosti webového obsahu, ktorá stanovuje hranice zhody pomeru kontrastu v dvoch úrovniach: AA a AAA.
- AA (štandardná úroveň)：AA vyžaduje pomer minimálne 4,5:1 pre bežný text a 3,0:1 pre veľký text. Je to štandardná úroveň, ktorú sa snažia dosiahnuť väčšina webových stránok.
- AAA (prísnejšia úroveň)：AAA vyžaduje pomer minimálne 7:1 pre bežný text a 4,5:1 pre veľký text. Cieľom je zvýšená čitateľnosť pre osoby so zníženou zrakovou ostrosťou.
Definícia veľkého textu
Podľa WCAG je veľký text text s veľkosťou približne 18 bodov (24px) alebo väčší, alebo tučný text s veľkosťou približne 14 bodov (asi 18,7px) alebo väčší.
- Bežný text：Bežný text je text, ktorý nie je zaradený do kategórie veľkého textu, vrátane textov v tele a poznámok, a vyžaduje pomer kontrastu minimálne 4,5:1.
- Vzťah k nadpisom：Aj nadpisy s veľkosťou menšou ako 24px bez tučného formátovania sa považujú za bežný text, preto je potrebné skontrolovať aj hrúbku písma, nielen veľkosť.
Bezpečnosť a súkromie
Spracovanie v prehliadači
Zadané údaje sa spracúvajú len vo vašom prehliadači a neodosielajú sa von.
Spracovanie iba v prehliadači
Výpočet pomeru kontrastu a návrhy farieb sa vykonáva výlučne vo vašom prehliadači a vstupné údaje sa neposielajú na server.
Komunikácia je šifrovaná cez HTTPS
Načítavanie stránky je tiež šifrované pomocou TLS a tretie strany nemôžu čítať obsah.
Bez odosielania tretím stranám
Vstupný obsah sa neposiela do externých služieb, ako sú sieťami reklám alebo sledovania.
Bez automatického ukladania výsledkov
Zadaná farba textu a farba pozadia ani vstupné návrhy sa neukladajú na serveri.
Sledujte RAKKOTOOLS pri vyhľadávaní v Google
194 užitočných nástrojov budú ľahšie nájditeľné pri vyhľadávaní v Google a AI vyhľadávaní!
- Nájdete pri vyhľadávaní
- Zobrazí sa aj v AI vyhľadávaní
- Objavte nové nástroje
Aktualizácie
- update #337
Pridané overovanie kontrastu farieb, zhodnotenie čitateľnosti farby textu a farby pozadia