Farebné nástroje FREE
Vyberajte, prevádzajte a generujte farby, palety, škály a prechody, s kontrastom podľa WCAG, prístupnými návrhmi a simuláciou farbosleposti. Všetko sa počíta vo vašom prehliadači.
Výber a prevody
Všetky zápisy
Technické údaje
Kontrast
APCA (návrh, doplňujúca informácia)
APCA je percepčný model kontrastu navrhnutý pre WCAG 3. Dnes nie je požiadavkou zhody a od WCAG 2 sa líši v oboch smeroch, preto sa zobrazuje ako doplňujúca informácia a nikdy ako splnené či nesplnené.
Ako to vyzerá
Palety
Ktoré dvojice sú čitateľné
Každá farba ako text na každej inej. Číslo je pomer kontrastu podľa WCAG; AA je 4,5:1 pre bežný text a 3:1 pre veľký text a prvky rozhrania.
Skopírovať paletu
Škály
Jedenásť stupňov postavených v OKLCH, aby skoky vyzerali rovnomerne, a nielen boli rovnomernými číslami. Výsledok má tvar, ktorý utilitný framework očakáva na mieste škály; je to rad tohto nástroja, nie paleta žiadneho frameworku.
Upraviť rad
Prechody
Z obrázka
Pretiahnite sem obrázok alebo nejaký vyberte
Číta sa v tejto karte a nikdy sa nenahráva. Po opustení stránky nič nezostáva.
Vnímanie farieb
Model toho, čo dvojica farieb stráca pri bežných formách farbosleposti, vypočítaný projekciou podľa Vienota, Brettela a Mollona. Je to simulácia, nie fotografia toho, čo vidí konkrétny človek.
Dvojice, ktoré prestávajú byť rozlíšiteľné
Prevzaté z palety. Vypisujú sa len dvojice, ktoré sa v normálnom videní zreteľne líšia - dve farby, ktoré si už tak sú podobné, sú návrhové rozhodnutie, nie nález.
Každý prevod, každá paleta aj každá hodnota kontrastu na tejto stránke sa počíta vo vašom prehliadači. Obrázok, ktorý sem pretiahnete, sa číta na plátne v tejto karte a nikdy sa nenahráva.
Čo tieto čísla znamenajú a čo nie
Vypočítané tu, podľa zverejnených vzorcov
Prevody sa riadia CSS Color Level 4 vrátane skutočnej prenosovej krivky sRGB, nie jej aproximácie, a kontrast sa riadi definíciou z WCAG 2.2. Dvojica farieb, ktorá splní požiadavku na kontrast, zo stránky nerobí prístupnú stránku: kontrast je jedno kritérium úspechu z mnohých a tento nástroj meria práve to jedno. Všetko beží vo vašom prehliadači a nič sa nikam neodosiela.
FAQ
Odosielajú sa moje farby alebo obrázky niekam?
Nie. Každý prevod, každá paleta, každá škála aj každá hodnota kontrastu sa počíta v tejto karte. Obrázok sa tu číta na plátne a nikdy sa nenahráva; nedávne farby a vaša paleta zostávajú v úložisku tohto prehliadača a oboje môžete vymazať.
Prečo OKLCH namiesto HSL?
Pretože svetlosť v HSL je priemer kanálov, nie to, čo meria oko. Otočte odtieň v HSL o 120 stupňov a jeden z troch výsledkov vyjde viditeľne tmavší než ostatné; urobte to isté v OKLCH a všetky tri sa čítajú ako jedna rodina. To isté platí pre rad odtieňov: rovnako veľké kroky svetlosti v HSL sa na koncoch zhlukujú. HSL sa napriek tomu zobrazuje, pretože je v ňom napísané veľké množstvo kódu.
Znamená splnenie kontrastnej skúšky, že je moja stránka prístupná?
Nie a formulácie to tu hovoria opatrne. Dvojica farieb spĺňa požiadavku na kontrast. Kontrast je jedno kritérium úspechu z mnohých - poradie fokusu, popisy, cesty klávesnicou, pohyb a štruktúra sú samostatné - a stránka s dokonalým kontrastom môže byť stále nepoužiteľná. Použite to na vyriešenie otázky farieb, nie celej otázky.
Čo je APCA a prečo je v osobitnom paneli?
Je to percepčný model kontrastu navrhnutý pre WCAG 3. Modeluje, ako sa kontrast pri danej veľkosti a hrúbke písma naozaj číta, čo WCAG 2 nerobí, ale je to návrh a dnes sa podľa neho nič nemeria. Postaviť ho vedľa verdiktov WCAG ako rovnocenný by skreslilo oboje, preto je skrytý za rozbalením a hovorí, čím je.
Aká verná je simulácia farbosleposti?
Je to projekcia podľa Vienota, Brettela a Mollona, vykonaná v lineárnom svetle, čo je obvyklý spôsob modelovania dichromázie. Ukazuje, čo stráca DVOJICA farieb, a to je otázka, na ktorej záleží: či sa dve veci dajú stále odlíšiť. Je to model jednej formy tejto poruchy, nie fotografia toho, čo vidí konkrétny človek, a panel to hovorí.
Dá sa vygenerovaná škála vložiť do konfigurácie môjho frameworku?
Áno - export obsahuje tvar, ktorý zapadne tam, kde utilitný framework očakáva farebnú škálu, popri vlastných vlastnostiach CSS, premenných SCSS a JSON. Rad patrí tomuto nástroju, je postavený v OKLCH z farby, ktorú ste zadali; nie je to paleta žiadneho frameworku a ani sa tak nevydáva.
Audit webu v roku 2026: kompletný checklist SEO, Core Web Vitals, prístupnosti a bezpečnosti
Kvalitný audit webu nie je jedno skóre z Lighthouse ani zoznam desiatok automatických upozornení. Mal by odpovedať na štyri otázky: dokáže vyhľadávač web správne nájsť a pochopiť, dokáže používateľ efektívne dokončiť svoju úlohu, je web dostatočne rýchly a nevystavuje prevádzkovateľa alebo návštevníkov zbytočným rizikám?
Chrome vs Firefox vs Edge vs Safari: čo sme sa naučili pri vydaní 9 rozšírení prehliadača
Deväť rozšírení, štyri prehliadače a oveľa viac než jeden súbor `manifest.json`. Ukazujeme, kde sa v skutočnosti končí zdieľaný kód, prečo Safari vyžaduje samostatný proces a ktoré chyby odhalí až Firefox a obchody s rozšíreniami.
Claude Code vs OpenAI Codex vs Gemini CLI: najlepší AI agent na programovanie v roku 2026
Claude Code, OpenAI Codex a Gemini CLI dokážu čítať repozitáre, upravovať súbory a spúšťať testy, ale boli navrhnuté pre odlišné spôsoby práce. Porovnávame kvalitu, benchmarky, bezpečnosť, paralelnú prácu, rozšírenia, ceny a súkromie.
Tvorte lepší web, rýchlejšie.
Vytvárame softvér na mieru a riešenia prispôsobené vašim potrebám.