{"id":3142,"date":"2022-11-15T10:09:22","date_gmt":"2022-11-15T10:09:22","guid":{"rendered":"http:\/\/the-codest.localhost\/blog\/4-common-web-accessibility-issues-to-know\/"},"modified":"2026-03-09T13:10:53","modified_gmt":"2026-03-09T13:10:53","slug":"kontrasto-santykio-problema","status":"publish","type":"post","link":"https:\/\/thecodest.co\/lt\/blog\/contrast-ratio-issue\/","title":{"rendered":"4 da\u017eniausiai pasitaikan\u010dios \u017einiatinklio prieinamumo problemos, kurias reikia \u017einoti"},"content":{"rendered":"<h2 class=\"wp-block-heading\">Kontrasto santykio problema<\/h2>\n\n\n\n<p>Da\u017eniausiai pasitaikanti prieinamumo problema, su kuria susid\u016briau per daugel\u012f met\u0173, yra <b>kontrasto ir spalv\u0173 prieinamumo problema<\/b>, d\u0117l blogo kontrasto santykio bus sunku \u012f\u017ei\u016br\u0117ti puslapio turin\u012f, o tai labai pakenks j\u016bs\u0173 naudotojams, \u012fskaitant regos negali\u0105 turin\u010dius asmenis. <\/p>\n\n\n\n<p>Kontrastas - tai dviej\u0173 spalv\u0173 suvokiamo \"ry\u0161kumo\" arba ry\u0161kumo skirtumo matas, pavyzd\u017eiui, tai yra skirtumas tarp j\u016bs\u0173 puslapio turinio fono spalvos ir pirmojo plano spalvos. Pa\u017evelkime \u012f \u0161i\u0105 nar\u0161ymo juost\u0105.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/app\/uploads\/2024\/05\/01-navbar.png\" alt=\"navigacijos&lt;em&gt;juosta&lt;\/em&gt;su&lt;em&gt;\u017ealiomis&lt;\/em&gt;pavadinimais\" title=\"Navbar pavyzdys \"\/><\/figure>\n\n\n\n<p>Tarkime, j\u016bs\u0173 klientui labai patinka \u0161i \u017ealsva spalva ir jis mano, kad ji nuostabi, ta\u010diau kyla kontrasto problema. Turime&nbsp;<code>#FFFFFF<\/code> fonas su&nbsp;<code>#83A94C<\/code>&nbsp;teksto spalva, tod\u0117l kontrasto santykis yra 2,71:1, t. y. gerokai ma\u017eesnis nei minimalus&nbsp;<strong>4.5:1<\/strong>&nbsp;reikia. \u0160iai problemai aptikti turime kelet\u0105 sprendim\u0173: <\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Naudokite internetin\u0119 kontrasto tikrinimo program\u0105, pvz.&nbsp;<a href=\"https:\/\/webaim.org\/resources\/contrastchecker\/)\" rel=\"nofollow\">\"Webaim\" kontrasto tikrintuvas<\/a>, kuri apskai\u010diuos kontrasto santyk\u012f ir pateiks&nbsp;<strong>Perduoti<\/strong>&nbsp;arba&nbsp;<strong>Nepavyksta<\/strong>&nbsp;klas\u0117.<\/li>\n\n\n\n<li>Naudokite vien\u0105 i\u0161 daugelio nar\u0161ykl\u0117s kontrasto tikrinimo pl\u0117tini\u0173, pvz:&nbsp;<a href=\"https:\/\/chrome.google.com\/webstore\/detail\/wcag-color-contrast-check\/plnahcmalebffmaghcpcmpaciebdhgdf?hl=en)\" rel=\"nofollow\">WCAG spalv\u0173 kontrasto tikrintuvas<\/a>.<\/li>\n\n\n\n<li>I\u0161bandykite nar\u0161ykl\u0117se integruot\u0105 kontrasto tikrintuv\u0105. Nor\u0117dami j\u012f naudoti \"Google Chrome\", atidarykite \"Dev Tools\", patikrinkite tikslin\u012f element\u0105 (pvz., m\u016bs\u0173 nar\u0161ykl\u0117s nuorod\u0105 Home), eikite \u012f CSS spalvos savyb\u0119 ir spustel\u0117kite spalvos sta\u010diakamp\u012f, kad atsidaryt\u0173 spalv\u0173 rinkiklis, apa\u010dioje bus pateikta kontrasto santykio reik\u0161m\u0117, i\u0161skleiskite j\u0105, kad gautum\u0117te daugiau informacijos. Procesas lygiai toks pat ir \"Firefox\", tik nedidelis santykio skirtumas rodomas spalv\u0173 rinkiklio apa\u010dioje kair\u0117je pus\u0117je.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/app\/uploads\/2024\/05\/02-chrome-color-picker.png\" alt=\"juodas&lt;em&gt;fonas&lt;\/em&gt;su&lt;em&gt;m\u0117lynu&lt;\/em&gt;kodu\" title=\"chromo rinktuvo pavyzdys\"\/><\/figure>\n\n\n\n<p>Jei norite gauti daugiau informacijos apie kontrast\u0105, patikrinkite \u0161\u012f&nbsp;<a href=\"https:\/\/webaim.org\/articles\/contrast\/\" rel=\"nofollow\">Kontrastas ir spalv\u0173 prieinamumas Straipsnis<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Nuorodos teksto problema<\/h2>\n\n\n\n<p>Nuorodos yra svarbi <a href=\"https:\/\/thecodest.co\/lt\/blog\/find-your-ideal-stack-for-web-development\/\">\u017einiatinklio svetain\u0117<\/a> \u0161iais laikais, tod\u0117l labai svarbu, kad jie b\u016bt\u0173 prieinami. Nuoroda turi b\u016bti prasminga ir informuoti naudotoj\u0105 apie jos kontekst\u0105, tod\u0117l neinformatyvi nuoroda su tekstu, pavyzd\u017eiui, skaitykite daugiau, spustel\u0117kite \u010dia, patikrinkite informacij\u0105, n\u0117ra labai naudinga, tod\u0117l u\u017euot prid\u0117j\u0119 \"patikrinkite informacij\u0105\" <a href=\"https:\/\/thecodest.co\/lt\/dictionary\/how-to-make-product\/\">produktas<\/a> pavyzd\u017eiui, geriau ir informatyviau naudoti gaminio pavadinim\u0105, pavyzd\u017eiui, \"Mandalorian \u0161almas\". \u017dod\u017eiai, pvz. <code>Spauskite \u010dia<\/code> arba <code>daugiau apie<\/code> galima praleisti, nes nuoroda pagal nutyl\u0117jim\u0105 yra paspaud\u017eiama, o pavyzd\u017eiui, \"daugiau apie \u0161iandienos naujienas\" galima sutrumpinti iki \"\u0161iandienos naujienos\". Speciali\u0173 taisykli\u0173 ar apribojim\u0173 d\u0117l nuorodos ilgio n\u0117ra. <b>nuoroda turi b\u016bti \u012fskaitoma<\/b> ir pakankamai ilgas, kad b\u016bt\u0173 galima gerai apib\u016bdinti jo paskirt\u012f.<\/p>\n\n\n\n<p>Vaizdai kaip nuorodos yra pla\u010diai naudojamas modelis, tod\u0117l jis turi atitikti tas pa\u010dias taisykles, apie kurias kalb\u0117jome pirmiau. Paveiksl\u0117lio atributas alt atliks nuorodos teksto vaidmen\u012f ir bus skelbiamas ekrano skaitytuv\u0173. Yra keli scenarijai, kai vaizdai traktuojami kaip nuorodos, jei vaizdas yra vienintelis nuorodos turinys, jis turi tur\u0117ti atribut\u0105 alt, jei nuorodoje yra tam tikras tekstas ir vaizdas, tuomet atributo alt galime nepateikti, \u0161tai keletas pavyzd\u017ei\u0173:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">\r&lt;a href=&quot;\/notifications&quot;&gt;\r\n  &lt;img src=&quot;\/img\/notification.png&quot; alt=&quot;Prane&scaron;imai&quot;&gt;\r\n&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<p>\u010cia rasite kelet\u0105 nuorod\u0173 apie nuorod\u0173 prieinamum\u0105:<a href=\"https:\/\/webaim.org\/techniques\/hypertext\/link_text\" rel=\"nofollow\">Nuorodos tekstas ir i\u0161vaizda<\/a>, <a href=\"https:\/\/www.w3.org\/WAI\/tutorials\/images\/functional\/\" rel=\"nofollow\">Funkciniai vaizdai<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Formos \u012fvestis, kurioje tr\u016bksta etiket\u0117s<\/h2>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/app\/uploads\/2024\/05\/03-form-inputs.png\" alt=\"input&lt;em&gt;labels&lt;\/em&gt;with&lt;em&gt;blue&lt;\/em&gt;button\" title=\"\u012fvesties etike\u010di\u0173 pavyzdys \"\/><\/figure>\n\n\n\n<p>Visi jau esame mat\u0119 tokias formos \u012fvestis be etiket\u0117s ir tik su \u012fvesties paskirt\u012f apib\u016bdinan\u010diu pavadinimu. Pirmiausia atkreipkite d\u0117mes\u012f \u012f tai, kad kai tik naudotojas u\u017epildys visas \u012fvestis ir nebeliks vietos \u017eymekli\u0173, nebetur\u0117sime jokio vaizdinio konteksto apie \u012fvesties paskirt\u012f, bet tegul <a href=\"https:\/\/thecodest.co\/lt\/blog\/why-us-companies-are-opting-for-polish-developers\/\">mus<\/a> daugiausia d\u0117mesio skirkite prieinamumui. <\/p>\n\n\n\n<p>Susiejimas su&nbsp;<code>etiket\u0117<\/code>&nbsp;prie \u012fvesties suteikia du pagrindinius privalumus: ekrano skaitytuvas perskaitys etiket\u0119, kai naudotojas sutelks d\u0117mes\u012f \u012f formos \u012fvest\u012f, o spustel\u0117jus etiket\u0119 arba j\u0105 palietus ar palietus, nar\u0161ykl\u0117 perduoda d\u0117mes\u012f susijusiai \u012fvesties \u012fvestiai. Toki\u0105 situacij\u0105 lengva i\u0161spr\u0119sti tiesiog pridedant etiketes taip:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">    Vardas ir pavard\u0117\n\n    \n  \n\n    Pavard\u0117\n\n    \n  \n\n    El. pa\u0161tas\n\n    \n  \n\n    Pateikti\n  \n\n```<\/code><\/pre>\n\n\n\n<p>\u0160tai ir viskas, visi \u012fvesties duomenys turi susijusias etiketes, kad b\u016bt\u0173 prieinami visiems. Galime netgi pa\u0161alinti \u012fvesties \u017eymeklius, kad i\u0161vengtume \u012fvesties paskirties dubliavimo, ta\u010diau visi \u017einome, kad realaus pasaulio scenarijus n\u0117ra toks paprastas - k\u0105 tik gavote projekt\u0105, kuriame \u0161ios formos \u012fvestys yra be etike\u010di\u0173, o klientas nenori keisti \u0161ios dalies. Pirmas sprendimas, kuris ateina \u012f galv\u0105, yra taikyti&nbsp;<code>rodyti: n\u0117ra;<\/code>&nbsp;arba&nbsp;<code>matomumas: pasl\u0117ptas;<\/code>&nbsp;prie m\u016bs\u0173 etike\u010di\u0173, tai jas pasl\u0117ps, bet jos vis tiek bus, tiesa? \u0160ios savyb\u0117s paslepia elementus ne tik ekrane, bet ir ekrano skaitytuv\u0173 naudotojams, tod\u0117l tai nei\u0161spr\u0119s m\u016bs\u0173 problemos.<\/p>\n\n\n\n<p>Galime naudoti&nbsp;<strong>klipo modelis<\/strong>&nbsp;tai i\u0161spr\u0119sti. Tokiu b\u016bdu vizualiai pasl\u0117psime turin\u012f, ta\u010diau j\u012f pateiksime ekrano skaitytojams. Sukursime tok\u012f CSS&nbsp;<code>tik sr<\/code>&nbsp;klas\u0119 ir pritaikykite j\u0105 visoms etiket\u0117ms:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\"><code> .sr-only:not(:focus):not(:active) {\n   clip: rect(0 0 0 0 0);\n   clip-path: inset(50%);\n   height: 1px;\n   overflow: hidden;\n   pozicija: absoliuti;\n   white-space: nowrap;\n   plotis: 1px;\n }\n<\/code><\/code><\/pre>\n\n\n\n<p>Taip bus pasl\u0117ptos m\u016bs\u0173 etiket\u0117s, jos taps prieinamos ekrano skaitytuvams ir atitiks m\u016bs\u0173 dizain\u0105. Svetain\u0117&nbsp;<code>:not(:focus):not(:active)<\/code>&nbsp;pseudoklas\u0117 neleid\u017eia fokusuojamiems elementams, pvz.&nbsp;<code>a<\/code>,&nbsp;<code>Mygtukas<\/code>,&nbsp;<code>\u012fvestis<\/code>&nbsp;nuo pasl\u0117pimo, kai gaunamas d\u0117mesys.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">N\u0117ra fokusavimo indikatoriaus<\/h2>\n\n\n\n<p>Kadaise tai dariau savo visuotiniame CSS stili\u0173 s\u0105ra\u0161e:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">* {\noutline: none; \/* siaubinga klaida *\/\n}<\/code><\/pre>\n\n\n\n<p>Apie 2020 m. pasteb\u0117jau, kad \"Google Chrome\" formos \u012fvesties juodas ribas, rodomas \"Google Chrome\" \u012fvesties \u012fvesties, kai sutelkta arba mygtuk\u0173, kai skirtukas \u012f - tai buvo tikrai keista, nes a\u0161 nesupratau, kad tuo metu, po kai kuri\u0173 tyrim\u0173 a\u0161 su\u017einojau, kad tai yra d\u0117l kont\u016bro CSS savyb\u0117, tod\u0117l pa\u0161alinant i\u0161spr\u0119sti \u0161i\u0105 \"Problema\" man.<\/p>\n\n\n\n<p>Tuo metu netur\u0117jau supratimo, kaip teisingai tai daryti.  Atlik\u0119s tam tikr\u0105 tyrim\u0105 apie tai, kod\u0117l ir kaip tai daroma pagal nutyl\u0117jim\u0105, su\u017einojau, kad kont\u016bras yra elemento fokusavimo indikatorius, o j\u012f pa\u0161alinus turi b\u016bti pateiktas akivaizdus fokusavimo stilius, i\u0161 esm\u0117s tai, k\u0105 dariau, laikoma bloga praktika. Fokusavimo rodiklius galite pritaikyti savo nuo\u017ei\u016bra, ta\u010diau j\u0173 visi\u0161kas pa\u0161alinimas i\u0161 svetain\u0117s yra didel\u0117 prieinamumo problema. Pavyzd\u017eiui, pritaikyti elemento fokusavimo stili\u0173 yra gana paprasta:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\"><code> a:focus {\n   outline: 4px solid #ee7834;\n   outline-offset: 4px;\n }<\/code><\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Prieinamumo \u012frankiai<\/h2>\n\n\n\n<p>Patikrinti visus klausimus, apie kuriuos kalb\u0117jome, gali b\u016bti daug darbo, ypa\u010d \u017einant, kad yra dar daug dalyk\u0173, kuriuos reikia aptarti, tod\u0117l, nor\u0117dami pad\u0117ti spr\u0119sti prieinamumo klausimus, turime 2 puikius nar\u0161ykl\u0117s pl\u0117tinius.<\/p>\n\n\n\n<p><a href=\"https:\/\/wave.webaim.org\/\" rel=\"nofollow\">WAVE vertinimo priemon\u0117<\/a> yra vertinimo \u012franki\u0173 rinkinys, padedantis mums padaryti \u017einiatinklio turin\u012f prieinamesn\u012f. J\u012f galima naudoti \"Google Chrome\" ir \"Firefox\" nar\u0161ykl\u0117se. <\/p>\n\n\n\n<p>I\u0161bandykime j\u012f nedideliame tinklalapyje, kuriame yra navbaras ir \u012fvestis be etiket\u0117s, ir pa\u017ei\u016br\u0117kime, k\u0105 jis gr\u0105\u017eina, \u012ediegus pl\u0117tin\u012f, mums tereikia spustel\u0117ti pl\u0117tinio piktogram\u0105, kad j\u012f naudotume.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/app\/uploads\/2024\/05\/04-wave-errors.png\" alt=\"baltas&lt;em&gt; langas&lt;\/em&gt;su&lt;em&gt;pilkomis&lt;\/em&gt; dalimis\" title=\"bangos klaidos pavyzdys \"\/><\/figure>\n\n\n\n<p>Suvestin\u0117s skirtuke rodoma 1 klaida (formos elementui tr\u016bksta etiket\u0117s), 2 kontrasto klaidos ir 1 \u012fsp\u0117jimas (tr\u016bksta antra\u0161t\u0117s strukt\u016bros); kaip matote, rezultatas yra labai ai\u0161kus ir i\u0161samus. Skirtuke Details (I\u0161sami informacija) pateikiamas vis\u0173 klaid\u0173, \u012fsp\u0117jim\u0173 ir funkcij\u0173 s\u0105ra\u0161as. Taip pat galime tiesiogiai s\u0105veikauti puslapyje spustel\u0117dami tuos raudonus sta\u010diakampius ir patikrinti klaidos apra\u0161ym\u0105 bei tip\u0105.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.deque.com\/axe\/devtools\/\" rel=\"nofollow\">\"Axe DevTools<\/a> yra galingas ir tikslus prieinamumo \u012franki\u0173 rinkinys. J\u012f galima naudoti ir \"Google Chrome\", ir \"Firefox\" nar\u0161ykl\u0117se. \u012edieg\u0119 pl\u0117tin\u012f, tur\u0117sime atidaryti nar\u0161ykl\u0117s pl\u0117tros \u012frankius, pereiti \u012f skirtuk\u0105 axe DevTools ir spustel\u0117ti Scan all of my pages (nuskaityti visus mano puslapius).<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/app\/uploads\/2024\/05\/05-axe-errors.png\" alt=\"DevTools&lt;em&gt;oknas&lt;\/em&gt;su&lt;em&gt;juodomis&lt;\/em&gt;pilkomis sekcijomis\" title=\"kirvio klaid\u0173 pavyzdys \"\/><\/figure>\n\n\n\n<p>Galite matyti, kad \"Axe DevTools\" prane\u0161\u0117 apie tas pa\u010dias problemas, susijusias su \"WAVE\" vertinimo priemone, t. y. kontrasto problemas, formos elemento etiket\u0117s nebuvim\u0105 ir antra\u0161t\u0117s elemento nebuvim\u0105, ir netgi pateik\u0117 kelet\u0105 geriausios praktikos pavyzd\u017ei\u0173, kuri\u0173 reik\u0117t\u0173 laikytis.<\/p>\n\n\n\n<p>Papildomas b\u016bdas patikrinti prieinamum\u0105 - naudoti ekrano skaitytuv\u0105 ir su juo i\u0161bandyti svetain\u0119; yra daugyb\u0117 ekrano skaitytuv\u0173 ir tik keletas i\u0161 j\u0173:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.nvaccess.org\/\" rel=\"nofollow\">NVDA<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/support.apple.com\/guide\/voiceover\/welcome\/mac\" rel=\"nofollow\">VoiceOver<\/a> galima naudoti \"macOs\" \u012frenginiuose.<\/li>\n\n\n\n<li><a href=\"https:\/\/help.gnome.org\/users\/orca\/stable\/introduction.html.en\" rel=\"nofollow\">Orkos<\/a> yra nemokama atvirojo kodo ekrano skaitymo programa, skirta \"Linux\".<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Santrauka<\/h2>\n\n\n\n<p>\u0160iame straipsnyje ap\u017evelg\u0117me kelet\u0105 da\u017eniausiai pasitaikan\u010di\u0173 \u017einiatinklio prieinamumo problem\u0173, j\u0173 sprendimo b\u016bd\u0173 ir puiki\u0173 \u012franki\u0173 \u017einiatinklio prieinamumui tikrinti. Dar daug k\u0105 reikia pasakyti apie toki\u0173 element\u0173 kaip dialog\u0173, akordeon\u0173 ir karuseli\u0173 prieinamum\u0105, ta\u010diau, kaip mat\u0117te \u0161iame straipsnyje, yra daug dokument\u0173 ir \u012franki\u0173, padedan\u010di\u0173 spr\u0119sti prieinamumo problemas.<\/p>\n\n\n\n<p>Keletas svarbiausi\u0173 dalyk\u0173, kuriuos reikia prisiminti:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Visada patikrinkite kontrasto santyk\u012f.<\/li>\n\n\n\n<li>Visada pateikite informatyv\u0173 nuorod\u0173 turin\u012f.<\/li>\n\n\n\n<li>Su formos elementu turi b\u016bti susieta etiket\u0117.<\/li>\n\n\n\n<li>Turi b\u016bti pateiktas akivaizdus d\u0117mesio stilius.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/thecodest.co\/careers\"><img decoding=\"async\" src=\"\/app\/uploads\/2024\/05\/become_a_part_of_the_codest.png\" alt=\"karjera codest\"\/><\/a><\/figure>","protected":false},"excerpt":{"rendered":"<p>\u017diniatinkliu kasdien naudojasi milijonai skirting\u0173 \u017emoni\u0173, tod\u0117l vienas i\u0161 pagrindini\u0173 m\u016bs\u0173, kaip k\u016br\u0117j\u0173, tiksl\u0173 - padaryti \u017einiatinkl\u012f prieinam\u0105 visiems. \u0160iame straipsnyje pristatysime kelet\u0105 da\u017eniausiai pasitaikan\u010di\u0173 \u017einiatinklio prieinamumo problem\u0173 ir j\u0173 sprendimo b\u016bdus.<\/p>","protected":false},"author":2,"featured_media":3143,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8],"tags":[],"class_list":["post-3142","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-software-development"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.3 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>4 Common Web Accessibility Issues to Know - The Codest<\/title>\n<meta name=\"description\" content=\"A guide to common web accessibility issues developers should know, with practical tips to improve usability for users with disabilities.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/thecodest.co\/lt\/tinklarastis\/kontrasto-santykio-problema\/\" \/>\n<meta property=\"og:locale\" content=\"lt_LT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"4 Common Web Accessibility Issues to Know\" \/>\n<meta property=\"og:description\" content=\"A guide to common web accessibility issues developers should know, with practical tips to improve usability for users with disabilities.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/thecodest.co\/lt\/tinklarastis\/kontrasto-santykio-problema\/\" \/>\n<meta property=\"og:site_name\" content=\"The Codest\" \/>\n<meta property=\"article:published_time\" content=\"2022-11-15T10:09:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-09T13:10:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/common_web_accessibility_issues1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"960\" \/>\n\t<meta property=\"og:image:height\" content=\"540\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"thecodest\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"thecodest\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/contrast-ratio-issue\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/contrast-ratio-issue\\\/\"},\"author\":{\"name\":\"thecodest\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/person\\\/7e3fe41dfa4f4e41a7baad4c6e0d4f76\"},\"headline\":\"4 Common Web Accessibility Issues to Know\",\"datePublished\":\"2022-11-15T10:09:22+00:00\",\"dateModified\":\"2026-03-09T13:10:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/contrast-ratio-issue\\\/\"},\"wordCount\":1409,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/contrast-ratio-issue\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/common_web_accessibility_issues1.png\",\"articleSection\":[\"Software Development\"],\"inLanguage\":\"lt-LT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/thecodest.co\\\/blog\\\/contrast-ratio-issue\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/contrast-ratio-issue\\\/\",\"url\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/contrast-ratio-issue\\\/\",\"name\":\"4 Common Web Accessibility Issues to Know - The Codest\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/contrast-ratio-issue\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/contrast-ratio-issue\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/common_web_accessibility_issues1.png\",\"datePublished\":\"2022-11-15T10:09:22+00:00\",\"dateModified\":\"2026-03-09T13:10:53+00:00\",\"description\":\"A guide to common web accessibility issues developers should know, with practical tips to improve usability for users with disabilities.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/contrast-ratio-issue\\\/#breadcrumb\"},\"inLanguage\":\"lt-LT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/thecodest.co\\\/blog\\\/contrast-ratio-issue\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"lt-LT\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/contrast-ratio-issue\\\/#primaryimage\",\"url\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/common_web_accessibility_issues1.png\",\"contentUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/05\\\/common_web_accessibility_issues1.png\",\"width\":960,\"height\":540},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/blog\\\/contrast-ratio-issue\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/thecodest.co\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"4 Common Web Accessibility Issues to Know\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#website\",\"url\":\"https:\\\/\\\/thecodest.co\\\/\",\"name\":\"The Codest\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/thecodest.co\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"lt-LT\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#organization\",\"name\":\"The Codest\",\"url\":\"https:\\\/\\\/thecodest.co\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"lt-LT\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/03\\\/thecodest-logo.svg\",\"contentUrl\":\"https:\\\/\\\/thecodest.co\\\/app\\\/uploads\\\/2024\\\/03\\\/thecodest-logo.svg\",\"width\":144,\"height\":36,\"caption\":\"The Codest\"},\"image\":{\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/pl.linkedin.com\\\/company\\\/codest\",\"https:\\\/\\\/clutch.co\\\/profile\\\/codest\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/thecodest.co\\\/#\\\/schema\\\/person\\\/7e3fe41dfa4f4e41a7baad4c6e0d4f76\",\"name\":\"thecodest\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"lt-LT\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g\",\"caption\":\"thecodest\"},\"url\":\"https:\\\/\\\/thecodest.co\\\/lt\\\/author\\\/thecodest\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"4 da\u017eniausiai pasitaikan\u010dios \u017einiatinklio prieinamumo problemos, kurias reikia \u017einoti - The Codest","description":"Bendr\u0173j\u0173 \u017einiatinklio prieinamumo klausim\u0173 vadovas, kur\u012f tur\u0117t\u0173 \u017einoti k\u016br\u0117jai, ir praktiniai patarimai, kaip pagerinti naudojimo patogum\u0105 ne\u012fgaliems naudotojams.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/thecodest.co\/lt\/tinklarastis\/kontrasto-santykio-problema\/","og_locale":"lt_LT","og_type":"article","og_title":"4 Common Web Accessibility Issues to Know","og_description":"A guide to common web accessibility issues developers should know, with practical tips to improve usability for users with disabilities.","og_url":"https:\/\/thecodest.co\/lt\/tinklarastis\/kontrasto-santykio-problema\/","og_site_name":"The Codest","article_published_time":"2022-11-15T10:09:22+00:00","article_modified_time":"2026-03-09T13:10:53+00:00","og_image":[{"width":960,"height":540,"url":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/common_web_accessibility_issues1.png","type":"image\/png"}],"author":"thecodest","twitter_card":"summary_large_image","twitter_misc":{"Written by":"thecodest","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/thecodest.co\/blog\/contrast-ratio-issue\/#article","isPartOf":{"@id":"https:\/\/thecodest.co\/blog\/contrast-ratio-issue\/"},"author":{"name":"thecodest","@id":"https:\/\/thecodest.co\/#\/schema\/person\/7e3fe41dfa4f4e41a7baad4c6e0d4f76"},"headline":"4 Common Web Accessibility Issues to Know","datePublished":"2022-11-15T10:09:22+00:00","dateModified":"2026-03-09T13:10:53+00:00","mainEntityOfPage":{"@id":"https:\/\/thecodest.co\/blog\/contrast-ratio-issue\/"},"wordCount":1409,"commentCount":0,"publisher":{"@id":"https:\/\/thecodest.co\/#organization"},"image":{"@id":"https:\/\/thecodest.co\/blog\/contrast-ratio-issue\/#primaryimage"},"thumbnailUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/common_web_accessibility_issues1.png","articleSection":["Software Development"],"inLanguage":"lt-LT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/thecodest.co\/blog\/contrast-ratio-issue\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/thecodest.co\/blog\/contrast-ratio-issue\/","url":"https:\/\/thecodest.co\/blog\/contrast-ratio-issue\/","name":"4 da\u017eniausiai pasitaikan\u010dios \u017einiatinklio prieinamumo problemos, kurias reikia \u017einoti - The Codest","isPartOf":{"@id":"https:\/\/thecodest.co\/#website"},"primaryImageOfPage":{"@id":"https:\/\/thecodest.co\/blog\/contrast-ratio-issue\/#primaryimage"},"image":{"@id":"https:\/\/thecodest.co\/blog\/contrast-ratio-issue\/#primaryimage"},"thumbnailUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/common_web_accessibility_issues1.png","datePublished":"2022-11-15T10:09:22+00:00","dateModified":"2026-03-09T13:10:53+00:00","description":"Bendr\u0173j\u0173 \u017einiatinklio prieinamumo klausim\u0173 vadovas, kur\u012f tur\u0117t\u0173 \u017einoti k\u016br\u0117jai, ir praktiniai patarimai, kaip pagerinti naudojimo patogum\u0105 ne\u012fgaliems naudotojams.","breadcrumb":{"@id":"https:\/\/thecodest.co\/blog\/contrast-ratio-issue\/#breadcrumb"},"inLanguage":"lt-LT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/thecodest.co\/blog\/contrast-ratio-issue\/"]}]},{"@type":"ImageObject","inLanguage":"lt-LT","@id":"https:\/\/thecodest.co\/blog\/contrast-ratio-issue\/#primaryimage","url":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/common_web_accessibility_issues1.png","contentUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/05\/common_web_accessibility_issues1.png","width":960,"height":540},{"@type":"BreadcrumbList","@id":"https:\/\/thecodest.co\/blog\/contrast-ratio-issue\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/thecodest.co\/"},{"@type":"ListItem","position":2,"name":"4 Common Web Accessibility Issues to Know"}]},{"@type":"WebSite","@id":"https:\/\/thecodest.co\/#website","url":"https:\/\/thecodest.co\/","name":"The Codest","description":"","publisher":{"@id":"https:\/\/thecodest.co\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/thecodest.co\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"lt-LT"},{"@type":"Organization","@id":"https:\/\/thecodest.co\/#organization","name":"The Codest","url":"https:\/\/thecodest.co\/","logo":{"@type":"ImageObject","inLanguage":"lt-LT","@id":"https:\/\/thecodest.co\/#\/schema\/logo\/image\/","url":"https:\/\/thecodest.co\/app\/uploads\/2024\/03\/thecodest-logo.svg","contentUrl":"https:\/\/thecodest.co\/app\/uploads\/2024\/03\/thecodest-logo.svg","width":144,"height":36,"caption":"The Codest"},"image":{"@id":"https:\/\/thecodest.co\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/pl.linkedin.com\/company\/codest","https:\/\/clutch.co\/profile\/codest"]},{"@type":"Person","@id":"https:\/\/thecodest.co\/#\/schema\/person\/7e3fe41dfa4f4e41a7baad4c6e0d4f76","name":"thecodest","image":{"@type":"ImageObject","inLanguage":"lt-LT","@id":"https:\/\/secure.gravatar.com\/avatar\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5dbfe6a1e8c86e432e8812759e34e6fe82ebac75119ae3237a6c1311fa19caf4?s=96&d=mm&r=g","caption":"thecodest"},"url":"https:\/\/thecodest.co\/lt\/author\/thecodest\/"}]}},"_links":{"self":[{"href":"https:\/\/thecodest.co\/lt\/wp-json\/wp\/v2\/posts\/3142","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thecodest.co\/lt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thecodest.co\/lt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thecodest.co\/lt\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/thecodest.co\/lt\/wp-json\/wp\/v2\/comments?post=3142"}],"version-history":[{"count":11,"href":"https:\/\/thecodest.co\/lt\/wp-json\/wp\/v2\/posts\/3142\/revisions"}],"predecessor-version":[{"id":8518,"href":"https:\/\/thecodest.co\/lt\/wp-json\/wp\/v2\/posts\/3142\/revisions\/8518"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thecodest.co\/lt\/wp-json\/wp\/v2\/media\/3143"}],"wp:attachment":[{"href":"https:\/\/thecodest.co\/lt\/wp-json\/wp\/v2\/media?parent=3142"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thecodest.co\/lt\/wp-json\/wp\/v2\/categories?post=3142"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thecodest.co\/lt\/wp-json\/wp\/v2\/tags?post=3142"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}