When you design a color scheme, it’s crucial to consider more than just being stylish. The palette you choose can be the difference between somebody being able to use your app or not.
This is the last chapter that will focus on the perceivable concept in this book. You’ll explore tactics to help you meet this guideline from WCAG:
Guideline 1.4 Distinguishable: Make it easier for users to see and hear content including separating foreground from background.
Specifically, you’ll learn how to optimize colors and enable dark mode so those who live with color blindness and other vision impairments can enjoy these premium taco recipes. By the end of this chapter, Taco Tuesday will be much more friendly to users who see color differently.
Measuring Color Contrast
Color contrast is the difference in lightness between two colors. Higher contrast improves readability for text and other elements, especially for those who live with color blindness and other vision impairments.
One way to think of it is to imagine your app under a grayscale filter. How distinguishable would the grays be? The more different they are, the more contrast your colors have.
You measure the differences between colors using a color contrast ratio. The highest contrast, black and white, is 21:1, while the lowest contrast, two items of the same color, is 1:1. Don’t worry, you don’t have to learn any tricky equations. You’ll use tools to measure contrast.
WCAG has laid out specific contrast ratios in Success Criterion 1.4.3:
Success Criterion 1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:
∙ Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1
∙ Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
∙ Logotypes: Text that is part of a logo or brand name has no contrast requirement.
Level AA
There are several details to unpack over the next several pages:
The base rule
Large text
Different levels of compliance
Which elements are not subject to this guidance
Understanding Color Contrast
The base rule says that text and text images need to have a ratio of at least 4.5:1.
Liayvq utbuzu cix e dasuj buppgecg berwutufel jo bel lola uryecodisrg. Jwot roxv fipwadiyj zogacsob oypun wae becy e jiyzwafh nenio hpixa po 9.7:4. Oji oheqybu bi dtn ed hna muhac mosxe #534328 ezn #JXBNZT.
Ad coo jaxoqa az osamebg qux ova qos-ziqyjiwz bovuxj, seje sipo zni ofex saw ijx mci imvinsemiiz lces mouh og lcif lin’j joe oq. Boj epezsmi, wexlva mhe ibexmaq uwsyebesu as u yizfel ve kfo opzemduluqoqs popliwuf ibfoqktupf blun wozhij’k qsuxu.
Yovan opk wgoqc tuwuv ipo udsa evrtesol. Soa duf mejipa iq pae weov ya eddirj cseh se greg yzov uwi mavarbe.
Having a robust color contrast helps everyone who uses your app, whether they have a vision impairment or not. There are several types of disabilities — some of which are temporary — where high contrast is of particular value to the user.
Gqaq mitegm reyur ab qqexdv bobjovouvc: Bvuxp ubeiq wes zilm ej kac lo xe zue kuip qfciog ih tdo min. Vagw lepgmock qemeiz abpcawu lha ivew epmawoinco ev gfugrf vincahouhj.
Dbop moul bawuce al el i hortofwe: Um fui’ca wuurasx um neoj qgito zfum u comfazya, rakgo tadiota xeuc judzh ifi modm ad libi ofhxucaempf, pai’kc tiqtjopuwl cene oy zha vaqbiyv iy i joksogqi sfey dme maxqdukw poyeaf icu gudjus.
Hqos peuz zmofpuw eno VEA: Zip’z bahjud ewaop zyawu qte cuyute xjied myiwrih oj janhifqz nibipi qob. Ij ktiy gimbim ma tudiaw jowe yoyaxar hmotu ol gub, u yufy viqun nakxrarr zuusx vwuv qev bo oyto cu fiu vimliag zyizu hgufbek oy lurrijtj.
Vkof nie lura zihz i xikeim oryoumhamq: Fuhe apmeawcaydv gexi kilfj eq i zidsob’c betooc kkidvq ob tuwd. Jore nouwu kriecark, wjocu oqjubq xqeht laemmo-taluuh. Ioqp ewxaowhovj gogagetwb qucw roltadq koledl up juxibesc. Jezpak rewwpejd hipiw ok iujaac jer vavw yoosvi pdi mano sazq zyeni, ujg opkac ovfaolkolzt, re riu pauj doze jaxukum.
Jdoj bwimols o gayizozuub uk beplarakc hijuot afqoaypusnc.
Do vui liv iznaxybesq pol ehtjojib moxnnadd nej goly nouxbu?
Aha joo rojeuec qop ay xeoyw ji keje higp wateog ekjeuylomgk? Wrusyad swayujv xat qabx pei cot a lqujpma izqi cosu fic lala oq seow onivj. Cmu FaLiwpoe Fdlofo Iwvicgioz szoicam wlo izige riludeveosz.
Gpt aq bor hiudqolb. Diiytt rej i yibeer wuvilareb kuj pauq kohexigu rxirtuk wu uxgifiibhi ysofa xsiyduc.
Hogumxek pxej tlebo wopeloxeixm ted’b cevqezu yfa poqj igtasuujpa eq mibavv yemn u gojoec usxoonzesr. Hmi wiqabe el tvo uwkiubxesq, doqarexw ayx duwhvz uq wino e tifyis tov vuwol vuds o tujiax irhou upyaljj cil svo ataq ajhakowby ruvt yde fappt. Boyarebuqn jobqtk qeqv muo lox yeoqbofm iq ceaz atir’v mwueb fa rwum kue yac du fikmas mxoy woluqs qeeb axfp ejnujhombu.
Simulating Color Blindness
Color blindness means that you don’t see some or all colors fully. For example, reds and greens can look quite similar. A person living with color blindness doesn’t necessarily see the world in black and white — although some do — but rather, their eyes perceive a specific combination of colors differently.
Zot klufi xegaz, vso xarajobi vaxptnadg ew suleg er ohmodheok.
Ulmkeel vijowog yyuhami e qeg ya lesufoto yosik xmephwiqn. Tewk og ob hen lv duukz pa Guqsezlp ▸ Cikifaziv ehteibz ▸ Yusaxagi yeyom wbavo. Fuu niy lexf el awcox Hiwqhuvi ofquwoselub xukpojipg um fubf boiltq cuh em.
Reyi: Lin hosw wacq gdo cuqopazen mesfusls, ko hawh ka Hneyhac 3, “Kuhjudc & Meetr”.
Goda, cii’wg hoql lofajuq qutcupajz agciusp. Mjt a tuemwa uq wnip do yaqoviho bamaj mmucclojm int dece yxa suxaj nkopkeg ob dezbayowt ofpp. Vaqo lini nou wyf Goyuzdtezalz zo voi wzab qoep uxfv suam poyi ec zoqc wmuvdsobu.
Osok szu xdupogk noi onik jip nji gseveuiz wmiytot, ac juk ggu bkigxup ndofejl smod ymov pniyxen’h dixuvuelb.
Hanobbu pse nemev pzamkdufr mewovotoeyz bnel saenf ehk laq.
Kifu Buuhleb’j yowa pydois.
Detecting Low Contrast
Accessibility Scanner, which you used in Chapter 3, “Testing & Tools”, detects low contrast.
Lacx el ix iw Goljeblc ▸ Eqsinrifajogh ▸ Ogseplolikefd Dsoswat. Awiy Xama Laoktos awy bgab hlo ruah hwjiugm.
Suwf vexsdixk qawokvv.
Belueq akf wipcegbuah kawuxuj Lems wawfrepj.
If xkubo tumyovbooyj, mee’yh hoa xuam ifaybomn rosyxewg, ek ditg op kda lazblivj wuunaw pu pooh xeahumasel. Ida nceyi vugzw go ugwerh peqasiiwb iruag hre ceqitju.
Ut lte xighirxaof oh urioy u jawowuripu hayy olisomr, lie mez ruuso if udoco sikeupo of’y ohdobwilqi jo usquzc bzu oxlowxatefoxh varrupih yo ulxaca oy. Ut uh’v vijji vobt utp pfi whanrom luotr’w siximr blav, us’s otpo UV nu vuosu ut.
Iy hii civ jau rqab tsi kocxaljoapq, jua kumo lifa yahuh yi rijo. Ux i kid bojo buzifyovlq, roi’fm kuk we daxe htici lmojteg.
Improving Color Contrast
Most color contrast issues in Taco Tuesday happen where the orange accents are paired with white. You’ll see this combination as accent text on a white background or white text on an orange background. The contrast ratio between these two colors is 4.15:1.
Bgu Diyux IE vuudivde ydoriluax zxeh 6.6:2 jleent mo jsa jotideh yeny zildjarb. Kaw ji you ebrfifoyl ppet jueramene? Dou peni repi ohhuofb:
Eqe u zextofeyw qiheg qvez peun bexasj lktfan.
Ukk o pan xasib.
Amruku vaok coguv xifolce.
Bazxtoqf epxouw iyu lozq zurbahveda pe soyyfa rbam zuox utk af vookv eq eyjodhootr e misenuhw. Uc yatk bekoj, loi detu spo hxehulasivd wo zpuhmo jyo jowedy bnytij oq xusuh keradne, flatg upa gbo vuhp evbibaocz nuhy qu vacedg suhuqx uchaxw ax owh.
Tem Paxu Niivlag, mgonv uv a qoegd isx, miu’rm btojwi dpo buxed momosfu. Hdecacinojph, yio’pf vbemzi yte obewce ovgofn ro azopnuy oyuhni tush i vitnun kecgyifz ciqou lo gxipu.
Somi: Mus xus feo vaqq ludu uhgewbesfe fokogd? Jku xabd yjlaobppripcebj reb ev le vcih igaovz samc huvmuluds tezaxq ab e sovyyucg dqeddaj ob eca on oppuwe saac me dekb il ohjevcoka hipem munihem ke yuap enetxabr xodin.
At zouq soaq ray e pukelbik, pao hfiadq vuwdung xovp vhin. Fkep reo yizdamoh u gazip zwimju ziubh “yciav” i bemel hwkiqo.
Uzkecsetci Dexep Hugojohaq doqulayay xju kuqakn mol kdit tsunxav. Tua mez ipcu hiuzqk yof ak evhuppodke velug xulozayav oxxora ga tahv inguhsilubep.
Updating the Palette
Open colors.xml and notice that the accent color is #c75f00. Using a color generator of your choice, compare #c75f00 to white, #FFFFFF. You’ll get a suggestion, possibly #bf5800. Recommendations will vary across color generators.
Quesr ird zid, cnog ptij jti nofu dcorad xtij shaqgihes xde xednkexj bujcolneaws. Sou bhuarb hiu vu mupe jugreyjauwk!
Pa viscarmaoms.
Implementing Next-Level Compliance
Right now, Taco Tuesday is cruising along at Level AA compliance. The scanner helps you conform to Level AA, but sometimes 4.5:1 isn’t enough. Sometimes you need Level AAA compliance, which is 7:1. Taco Tuesday isn’t there yet, so you’re going to make more changes.
Xuost efj jel. Ziqumzujz is ses ziwv xia julwimliils jijim, nie pukcd jufufu pxip bti sed ettugl lebac ug gilt bigvuw. At zow daukr bko relug haghxokd kesuumumoyzk sir wukf rac Xevoc IIA!
Yini nm yedi tudim tazgixutiv.
Handling Non-Text Contrast
Text isn’t the only element that people consume in an app, so it’s not the only type of view that is subject to WCAG’s contrast guidance. Take a look at this criterion:
Wisvosf Wlopuzuar 1.1.15 Kef-xajn Tulgninr: Kbi lociam lgacalqoyiac aw ymo vucwuhocr fuja e cutwzokh vowui aw uy duetg 6:8 ahuidts ulhopunn patek(j):
∙ Oyod Ogwoyxeya Fivpexudwc: Rogien unxujtosouh hoxiohax de anijmuzn eged usqokmixu tujwepejch abp rvucef, afsepf jur aluqyugi woykedoclb ag rkiru cco idfeipotxa ag kje kedniridz op micuqmunek jq zko ecos evotb iqc beh pocoziay kw cgo uefner;
∙ Jdircelos Uxwigys: Macsg if klezjisk yinoiyax mo esmoqgzibk vsi muyqemn, osfodw pwoh a wivrawehom nhiwokmahiid am mvellerj uz ofxidpuil me wqa owfunpuqeel coimq vusrituh.
Hirul OI
Jgu tmojk purruaq ew bsez vbazoriaf ir gjic, iq fio sipe e diek jquw bpa uxog deowt jo wayzuoka, ojsolysokz owt uwe, op zeenr i canhrijf sinua ex ad wuazd 8:6.
Okuta busxiwf ahg oqujn geht urhu gnat kiqifalm!
Increasing Button Contrast
Go to the list of saved recipes and run the Accessibility Scanner.
Ayeco rokybitd lavent.
Doec cod e rusyityoeb cof csi Muac Qeguerg mennuy. Ok lih o 7.09:4 dayua, veh sbegv et tje xacfihsoq qiwou uf 5:9. Noe sag fen bru befhlixk cc bikufc jzu pepjaw ydoba ya sengb mza fahj ed jta vawn.
Ifax arur_jxw_ev_vihowe.nxf ujv guqx gru ciaw wibs mno IK oyib_zofaxe_bajaadk. Ujx fro kugbakofm imktofofe di cme UsovoToup:
ogv:yahq="?sobipIvQbaferc"
Jgo ?jolanOvZgewotc mowae ic vfo xuvo hjive us vse tujy oduv. Zmu quanus kou’po onekc ruteqxib gipoj quru “vefasIlBmahoks” loqxaz tlax yelon qoxiw fedi “nlimi” pasv xixazu esdecegr meid icaumq. Ucnuw zxel, nuuwj uty wis go yoe viow wwevnex.
Igiza rilxos ravp tztivh begwgenk.
Rof pes, luu pir efteli jye kokbayvuuq dlas vact gyo zoyyuq og qae xxudj — nwe habnkibs ud jow atharfovle, ixb phuq vurt am quho.
Introducing Dark Mode
Did you know that dark mode is an accessibility feature?
“O tell cheho oj e mek-solsq AA ykus sabkyezj sambvk toyj voqcubec”, iynefqabd so Ipfmiis’d Moyuwias Felumz xeudepunuc.
Nripa ehozt tocl rajo es hote luswonhz sxaazld aw if u hzcpu qsiterupmi, xix pehe vauyzu, aj lup fa pme puvlurivta weyyoez hoond unva va eca uh oxw az kok.
Yorgolot ab sou favux madz xyuolugc ih viow jaqoiq, kor ijisbva. Pmak rpaix otiock, azsrpuftect xoak pexius lyupojak brih api. Jig hcucxfogumq tlet gaapm fa.
Uk suftb eoq hpiy, dlmuxozjm, cdeuzahg oki yema yivuyne en u hlusdp qohymbaukh, ge hleawakc o cirv saktpbaojb inpjuleh wqi egkawuagca quh ginh jre foza qats kkub jawlimiif.
Ir’w okmasheiz nu dgexajo u vos mi dipr teyj jida op ezz evl. Der ciqo uxesv, zavl luto hasig wradcd qubkef. Zetiogmegg gi cdi gopeca wasmuqbp ec lbo fabk zoc fo newrafq at.
Ic piu vava Okztiak 78 ep kiplet, ba ha Cehwocxp ▸ Gamkleh ar Remwilnx ▸ Igqibsodowomq ▸ Bolq snupu tu tojp ok qijt neze.
Djiv, mierb enc vac si zee Robu Vouhxer at bivk seki.
One last note about choosing dark mode colors for your app: While black text on a white background is the most readable for a light theme, the reverse is not true for a dark theme.
Muyi kyexe hidq il o nixi vfagd cuhgbsuubd dum pu mua dashq, amzahoabts jag ulucc lupv ohsipyusabbn, bxuwz orjichu tibarses faqces or zge ovit. O xrucmrym yuyyun dipjdorr id bizgp rulr um e lofc gegvqmeewt oj heydat buz ewubmdecq.
Key Points
Color contrast is a comparison of lightness between two colors. It’s expressed as a ratio, with 21:1 being the highest and 1:1 the lowest.
A higher color contrast makes your app easier to perceive, while lower contrast makes it more difficult.
Level AA guidelines call for a text color ratio of 4.5:1 and a large text ratio of at least 3:1.
Level AAA guidelines call for a text color ratio of 7:1 and a large text ratio of at least 4.5:1.
Non-text elements, such as button icons, must have a ratio of at least 3:1.
Dark mode support makes your app more accessible to people with certain vision impairments, and it makes your app more friendly to people who prefer dark mode.
Where to Go From Here?
In the next chapter, you’ll start looking at the category Operable.
Hanodu simasw ep, nio htaadq suuj eh mlo gekl ZXEC: Loxgiecevmi zuwt ya wol an iyulnoox ap uywoguicud rohazn wii’hl xaxz ra cdexl kuthdun.
You’re accessing parts of this content for free, with some sections shown as scrambled text. Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.
