{"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":"vandamal-med-birtustigshlutfall","status":"publish","type":"post","link":"https:\/\/thecodest.co\/is\/blog\/contrast-ratio-issue\/","title":{"rendered":"4 algengir a\u00f0gengisvandam\u00e1l \u00e1 vefnum sem vert er a\u00f0 \u00feekkja"},"content":{"rendered":"

Vandam\u00e1l me\u00f0 birtumunshlutfall<\/h2>\n\n\n\n

Algengasta a\u00f0gengisvandam\u00e1li\u00f0 sem \u00e9g hef s\u00e9\u00f0 \u00ed gegnum \u00e1rin er A\u00f0gengisvandam\u00e1l var\u00f0andi m\u00f3tv\u00e6gi og lit<\/b>, sl\u00e6mt birtumunshlutfall gerir \u00fea\u00f0 erfitt a\u00f0 sj\u00e1 efni\u00f0 \u00e1 s\u00ed\u00f0unni \u00feinni og \u00fea\u00f0 mun vera mj\u00f6g ska\u00f0legt notendum \u00fe\u00ednum, \u00fear \u00e1 me\u00f0al \u00feeim sem eru me\u00f0 sj\u00f3nsker\u00f0ingu. <\/p>\n\n\n\n

Kontrast er m\u00e6likvar\u00f0i \u00e1 mismun \u00ed skynja\u00f0ri lj\u00f3sstyrk e\u00f0a birtustigi milli tveggja lita; til d\u00e6mis er hann mismunurinn \u00e1 bakgrunnslit og frambur\u00f0slit efnis s\u00ed\u00f0unnar. Sko\u00f0um \u00feessa navbar.<\/p>\n\n\n\n

\"Lei\u00f0sagnarbar<\/figure>\n\n\n\n

Segjum a\u00f0 vi\u00f0skiptavinur \u00feinn l\u00edki virkilega vel vi\u00f0 \u00feann gr\u00e6nleika og finni hann fr\u00e1b\u00e6ran, en h\u00e9r er vandam\u00e1l me\u00f0 m\u00f3tv\u00e6gi. Vi\u00f0 h\u00f6fum a #FFFFFF<\/code> bakgrunnur me\u00f0 a #83A94C<\/code> leturlitur sem skilar 2,71:1 birtumun, sem er langt undir l\u00e1gmarkinu 4.5:1<\/strong> \u00fearf. Til a\u00f0 greina \u00feetta vandam\u00e1l h\u00f6fum vi\u00f0 nokkrar lausnir: <\/p>\n\n\n\n

    \n
  1. Nota\u00f0u netbundinn m\u00f3tv\u00e6gi\u00f0ssko\u00f0ara eins og the Webaim andst\u00e6\u00f0usko\u00f0ari<\/a>, sem mun reikna birtumunshlutfalli\u00f0 og gefa \u00fe\u00e9r a Ganga framhj\u00e1<\/strong> e\u00f0a Misheppnast<\/strong> einkunn.<\/li>\n\n\n\n
  2. Nota\u00f0u eina af m\u00f6rgum vi\u00f0b\u00f3tum \u00ed vafranum til a\u00f0 athuga kontrast, t.d.: WCAG litamunspr\u00f3funart\u00e6ki<\/a>.<\/li>\n\n\n\n
  3. Reyndu vafrans innbygg\u00f0a m\u00f3tspyrnuvirkjann. Til a\u00f0 nota hann \u00ed Google Chrome, opna\u00f0u \u00fer\u00f3unart\u00f3lin, sko\u00f0a\u00f0u marka\u00f0a einingu (t.d. heimasl\u00f3\u00f0 \u00ed valmyndinni okkar), far\u00f0u \u00ed CSS-litareiginleikann og smelltu \u00e1 litareitinn til a\u00f0 opna litavalara. Ne\u00f0st birtist m\u00f3tspyrnuhlutfall, st\u00e6kka\u00f0u \u00fea\u00f0 til a\u00f0 sj\u00e1 n\u00e1nari uppl\u00fdsingar. Ferli\u00f0 er n\u00e1kv\u00e6mlega \u00fea\u00f0 sama \u00ed Firefox, a\u00f0eins l\u00edtill munur \u00e1 hlutfallinu er s\u00fdndur ne\u00f0st til vinstri \u00ed litavali\u00f0.<\/li>\n<\/ol>\n\n\n\n
    \"svartur<\/figure>\n\n\n\n

    Til a\u00f0 f\u00e1 n\u00e1nari uppl\u00fdsingar um m\u00f3tspil, sko\u00f0a\u00f0u \u00feetta. Grein um a\u00f0gengi a\u00f0 m\u00f3tv\u00e6gi og litum<\/a>.<\/p>\n\n\n\n

    Vandam\u00e1l me\u00f0 tengistexta<\/h2>\n\n\n\n

    Tenglar eru st\u00f3r hluti af vefur<\/a> \u00deessa dagana er \u00fev\u00ed mj\u00f6g mikilv\u00e6gt a\u00f0 gera \u00fe\u00e6r a\u00f0gengilegar. Hlekkur \u00fearf a\u00f0 vera skiljanlegur og uppl\u00fdsa notandann um samhengi sitt, svo \u00f3uppl\u00fdsandi hlekkur me\u00f0 texta eins og \u201clestu meira\u201d, \"smelltu h\u00e9r\", \"sko\u00f0a\u00f0u sm\u00e1atri\u00f0i\" er ekki mj\u00f6g gagnlegur, svo \u00ed sta\u00f0 \u00feess a\u00f0 b\u00e6ta vi\u00f0 \"sko\u00f0a\u00f0u sm\u00e1atri\u00f0i\" fyrir vara<\/a> uppl\u00fdsingar, til d\u00e6mis, me\u00f0 \u00fev\u00ed a\u00f0 nota v\u00f6runafni\u00f0 eins og \u201cThe Mandalorian Helmet\u201d er betra og fr\u00f3\u00f0legra. Or\u00f0 eins og Smelltu h\u00e9r<\/code> e\u00f0a Meira um<\/code> m\u00e1 sleppa \u00fev\u00ed a\u00f0 tengill s\u00e9 smellanlegur sj\u00e1lfgefi\u00f0 og eitthva\u00f0 eins og \u201cmeira um fr\u00e9ttir dagsins\u201d m\u00e1 stytta \u00ed \u201cfr\u00e9ttir dagsins\u201d. \u00dea\u00f0 er engin s\u00e9rst\u00f6k regla n\u00e9 takm\u00f6rk um lengd tengla, the Tengillinn \u00fearf a\u00f0 vera l\u00e6silegur.<\/b> og n\u00e6gilega langt til a\u00f0 gefa g\u00f3\u00f0a l\u00fdsingu \u00e1 tilgangi \u00feess.<\/p>\n\n\n\n

    Myndir sem tenglar eru v\u00ed\u00f0a nota\u00f0 mynstur, svo \u00feetta \u00fearf a\u00f0 fylgja s\u00f6mu reglum sem vi\u00f0 h\u00f6fum r\u00e6tt um h\u00e9r a\u00f0 ofan. alt-eiginleiki myndarinnar mun gegna hlutverki tengilatexta og ver\u00f0a lesinn upp af skj\u00e1lesurum. \u00dea\u00f0 eru nokkrar mismunandi a\u00f0st\u00e6\u00f0ur \u00feegar myndum er komi\u00f0 fyrir sem tenglum: ef myndin er eini innihald tengilsins \u00fearf h\u00fan a\u00f0 hafa alt-eiginleika; ef tengillinn inniheldur b\u00e6\u00f0i texta og mynd getum vi\u00f0 sleppt alt-eiginleikanum. H\u00e9r eru nokkur d\u00e6mi:<\/p>\n\n\n\n

    \r<a href="\/notifications">\r\n  <img src="\/img\/notification.png" alt="Tilkynningar">\r\n<\/a><\/code><\/pre>\n\n\n\n
    K\u00edktu \u00e1 nokkrar kr\u00e6kjur h\u00e9r til a\u00f0 lesa um a\u00f0gengi kr\u00e6kja:Tengistextinn og \u00fatlit<\/a>, Virknimyndir<\/a>.<\/p>\n\n\n\n
    Inntaksreitur \u00e1n merkimi\u00f0a<\/h2>\n\n\n\n
    \"Inntak<\/figure>\n\n\n\n
    Vi\u00f0 h\u00f6fum \u00f6ll s\u00e9\u00f0 \u00feessi forminngangsefni \u00e1\u00f0ur \u00e1n merkimi\u00f0a og me\u00f0 a\u00f0eins sta\u00f0fyllingartexta til a\u00f0 l\u00fdsa tilgangi inntaksins. Fyrsta athugasemd er s\u00fa a\u00f0 um lei\u00f0 og notandinn fyllir \u00fat \u00f6ll innt\u00f6kin og sta\u00f0fyllingartextinn s\u00e9 ekki lengur sj\u00e1anlegur, munum vi\u00f0 ekki hafa neinn sj\u00f3nr\u00e6nan samhengi um tilgang inntaksins, en leyf\u00f0u okkur<\/a> Einbeittu \u00fe\u00e9r a\u00f0 a\u00f0gengileika h\u00e9r. <\/p>\n\n\n\n
    A\u00f0 tengja a merkimi\u00f0i<\/code> A\u00f0 tengja inntak vi\u00f0 merkimi\u00f0a gefur okkur tvo helstu kosti: skj\u00e1lesari les merki\u00f0 \u00feegar notandi hefur f\u00f3kusi\u00f0 \u00e1 forminntakinu, og \u00feegar smellt er \u00e1 merki\u00f0 e\u00f0a \u00fea\u00f0 snert\/tappa \u00e1 \u00fea\u00f0, flytur vafrinn f\u00f3kusinn \u00e1 tengda inntaki\u00f0. Einf\u00f6ld lausn \u00ed \u00feessu tilviki er einfaldlega a\u00f0 b\u00e6ta vi\u00f0 merkimi\u00f0um svona:<\/p>\n\n\n\n
        Fyrsta nafn\n\n\n\n\nEftirnafn\n\n\n\n\nNetfang\n\n\n\n\nSenda\n  \n\n```<\/code><\/pre>\n\n\n\n
    \u00deetta er \u00fea\u00f0, allir innsl\u00e1ttareitir hafa vi\u00f0eigandi merkimi\u00f0a sem gera \u00fe\u00e1 a\u00f0gengilega \u00f6llum. Vi\u00f0 getum jafnvel fjarl\u00e6gt sta\u00f0fyllurnar til a\u00f0 for\u00f0ast a\u00f0 endurtaka tilgang innsl\u00e1ttarins, en vi\u00f0 vitum \u00f6ll a\u00f0 raunverulegar a\u00f0st\u00e6\u00f0ur eru ekki svo au\u00f0veldar \u00ed me\u00f0f\u00f6rum; \u00fe\u00fa hefur n\u00fdlega fengi\u00f0 h\u00f6nnun sem inniheldur \u00feessa ey\u00f0ub\u00f3tareiti \u00e1n merkimi\u00f0a og vi\u00f0skiptavinurinn vill ekki breyta \u00feeim hluta. Fyrsta lausnin sem kemur upp \u00ed hugann er a\u00f0 beita a s\u00fdning: engin;<\/code> e\u00f0a s\u00fdnilegleiki: falinn;<\/code> Fyrir merkimi\u00f0a okkar mun \u00feetta fela \u00fe\u00e1, en \u00feeir eru samt enn\u00fe\u00e1 til sta\u00f0ar, er \u00fea\u00f0 ekki? \u00deessir eiginleikar fela \u00fe\u00e6tti ekki a\u00f0eins \u00e1 skj\u00e1num, heldur einnig fyrir skj\u00e1leskarana, svo \u00feetta mun ekki leysa vandam\u00e1l okkar.<\/p>\n\n\n\n
    Vi\u00f0 getum nota\u00f0 the klippumynstur<\/strong> til a\u00f0 leysa \u00feetta. \u00c1 \u00feennan h\u00e1tt munum vi\u00f0 fela efni\u00f0 sj\u00f3nr\u00e6nt en samt veita \u00fea\u00f0 skj\u00e1lesurum. Vi\u00f0 munum b\u00faa til eftirfarandi CSS a\u00f0eins fyrir eldri systkini<\/code> flokk og beiti\u00f0 \u00fev\u00ed \u00e1 allar merkimi\u00f0ar okkar:<\/p>\n\n\n\n
    .sr-only:not(:focus):not(:active) {\n   clip: rect(0 0 0 0);\n   clip-path: inset(50%);\n   height: 1px;\n   overflow: hidden;\n   position: absolute;\n   white-space: nowrap;\n   width: 1px;\n }\n<\/code>Hlj\u00f3\u00f0skrift<\/pre>\n\n\n\n
    \u00deetta mun fela merkimi\u00f0a okkar, gera \u00fe\u00e1 a\u00f0gengilega fyrir skj\u00e1lesara og samr\u00e6ma h\u00f6nnunina okkar. The ekki \u00ed f\u00f3kus og ekki virkur<\/code> Sl\u00edk pseudo-flokkun kemur \u00ed veg fyrir a\u00f0 einingar sem h\u00e6gt er a\u00f0 beina athyglinni a\u00f0, eins og a<\/code>, hnappur<\/code>, innsl\u00e1ttur<\/code> fr\u00e1 \u00fev\u00ed a\u00f0 vera falin \u00feegar h\u00fan f\u00e6r f\u00f3kus.<\/p>\n\n\n\n
    Enginn f\u00f3kusv\u00edsir<\/h2>\n\n\n\n
    Einu sinni ger\u00f0i \u00e9g \u00feetta \u00ed al\u00fej\u00f3\u00f0legu CSS-st\u00edlskr\u00e1nni minni:<\/p>\n\n\n\n
    * {\noutline: none; \/* hr\u00e6\u00f0ileg mist\u00f6k *\/\n}<\/code><\/pre>\n\n\n\n
    Um 2020 t\u00f3k \u00e9g eftir \u00fev\u00ed a\u00f0 svartar ja\u00f0ar birtust \u00e1 reitum \u00ed Google Chrome \u00feegar \u00feeim var beint athygli a\u00f0 e\u00f0a \u00e1 hn\u00f6ppunum \u00feegar \u00feeim var skipt \u00ed \u2013 \u00fea\u00f0 var mj\u00f6g skr\u00fdti\u00f0 \u00fev\u00ed \u00e9g skildi \u00fea\u00f0 ekki \u00fe\u00e1. Eftir sm\u00e1 ranns\u00f3knir komst \u00e9g a\u00f0 \u00fev\u00ed a\u00f0 \u00fea\u00f0 stafar af outline-CSS-eiginleikanum, svo a\u00f0 fjarl\u00e6gja hann leysti \u00feetta \u2018vandam\u00e1l\u2019 fyrir mig.<\/p>\n\n\n\n
    \u00c1 \u00feeim t\u00edma haf\u00f0i \u00e9g enga hugmynd um hva\u00f0a r\u00e9tta lei\u00f0 v\u00e6ri til a\u00f0 gera \u00fea\u00f0.  Eftir a\u00f0 hafa kanna\u00f0 hvers vegna og hvernig \u00feessi n\u00fdja sj\u00e1lfgefin stilling virkar komst \u00e9g a\u00f0 \u00fev\u00ed a\u00f0 outline er v\u00edsbending um f\u00f3kus \u00e1 \u00fe\u00e1ttum og ef henni er eytt \u00fearf a\u00f0 veita auglj\u00f3sa f\u00f3kusst\u00edl, \u00ed grundvallaratri\u00f0um er \u00fea\u00f0 sem \u00e9g var a\u00f0 gera tali\u00f0 sl\u00e6m vinnubr\u00f6g\u00f0. \u00de\u00fa getur s\u00e9rsni\u00f0i\u00f0 f\u00f3kusv\u00edsbendingar eftir \u00fe\u00f6rfum, en a\u00f0 fjarl\u00e6gja \u00fe\u00e6r alveg af vefs\u00ed\u00f0unni er st\u00f3rt a\u00f0gengisvandam\u00e1l. A\u00f0 s\u00e9rsn\u00ed\u00f0a st\u00edl \u00fe\u00e1ttaf\u00f3kuss er nokku\u00f0 einfalt, til d\u00e6mis:<\/p>\n\n\n\n
    a:focus {\n   outline: 4px solid #ee7834;\n   outline-offset: 4px;\n }<\/code>Hlj\u00f3\u00f0skrift<\/pre>\n\n\n\n
    A\u00f0gengist\u00f3l<\/h2>\n\n\n\n
    A\u00f0 athuga \u00f6ll \u00feau m\u00e1l sem vi\u00f0 h\u00f6fum r\u00e6tt getur veri\u00f0 miki\u00f0 verk, s\u00e9rstaklega \u00fear sem margt fleira er til a\u00f0 fjalla um a\u00f0gengi, svo til a\u00f0 a\u00f0sto\u00f0a okkur vi\u00f0 a\u00f0 takast \u00e1 vi\u00f0 a\u00f0gengi h\u00f6fum vi\u00f0 tv\u00e6r fr\u00e1b\u00e6rar vafravi\u00f0b\u00e6tur.<\/p>\n\n\n\n
    WAVE matst\u00e6ki\u00f0<\/a> er safn matsverkf\u00e6ra sem hj\u00e1lpar okkur a\u00f0 gera vefefni okkar a\u00f0gengilegra. \u00dea\u00f0 er f\u00e1anlegt \u00ed Google Chrome og Firefox. <\/p>\n\n\n\n
    Reynum \u00feetta \u00e1 litlum vefs\u00ed\u00f0u sem inniheldur valmyndabor\u00f0a og innsl\u00e1ttarreit \u00e1n merkis og sj\u00e1um hva\u00f0 hann skilar, eftir a\u00f0 vi\u00f0 h\u00f6fum sett vi\u00f0b\u00f3tina upp \u00feurfum vi\u00f0 bara a\u00f0 smella \u00e1 t\u00e1kni\u00f0 hennar til a\u00f0 nota hana.<\/p>\n\n\n\n
    \"hv\u00edt<\/figure>\n\n\n\n
    Yfirlitsflipanum s\u00fdnir 1 villu (formatri\u00f0i vantar merkimi\u00f0a), 2 kontrastvillur og 1 vi\u00f0v\u00f6run (vantar fyrirsagnaruppbyggingu), eins og sj\u00e1 m\u00e1 er ni\u00f0ursta\u00f0an mj\u00f6g sk\u00fdr og \u00edtarleg. Sm\u00e1atri\u00f0a-flipanum birtir lista yfir allar villur, vi\u00f0varanir og eiginleika. Vi\u00f0 getum einnig haft beina samskipti vi\u00f0 s\u00ed\u00f0una me\u00f0 \u00fev\u00ed a\u00f0 smella \u00e1 \u00feessi rau\u00f0u ferningslaga sv\u00e6\u00f0i til a\u00f0 sko\u00f0a l\u00fdsingu og tegund villunnar.<\/p>\n\n\n\n
    Ey\u00f0a DevTools<\/a> er \u00f6flugt og n\u00e1kv\u00e6mt a\u00f0gengist\u00f3l. \u00dea\u00f0 er f\u00e1anlegt \u00ed Google Chrome og Firefox. Eftir a\u00f0 hafa sett vi\u00f0b\u00f3tina upp \u00feurfum vi\u00f0 a\u00f0 opna \u00fer\u00f3unart\u00f3lin \u00ed vafranum, fara \u00e1 axe DevTools-flipann og smella \u00e1 \"Scan all of my pages\".<\/p>\n\n\n\n
    \"DevTools-gluggi<\/figure>\n\n\n\n
    \u00de\u00fa getur s\u00e9\u00f0 a\u00f0 Axe DevTools hefur greint fr\u00e1 s\u00f6mu vandam\u00e1lum me\u00f0 WAVE Evaluation Tool, sem eru vandam\u00e1l me\u00f0 kontrast, form\u00fe\u00e1tt sem vantar merkimi\u00f0a og vantar fyrirsagnar\u00fe\u00e1tt; \u00fea\u00f0 gaf okkur jafnvel nokkrar bestu vinnubr\u00f6g\u00f0 til a\u00f0 fylgja.<\/p>\n\n\n\n
    \u00d6nnur lei\u00f0 til a\u00f0 pr\u00f3fa a\u00f0gengi er a\u00f0 nota skj\u00e1lesara og pr\u00f3fa vefs\u00ed\u00f0una \u00fe\u00edna me\u00f0 honum. \u00dea\u00f0 eru til margir skj\u00e1lesarar, til a\u00f0 nefna nokkra:<\/p>\n\n\n\n