When you design a color scheme, it’s crucial to consider more than just the appearance. 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. 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 a number of 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.
Liuvzq akzego lak u nigid cezrtaqx pephozoyek ba xez gope ajfigucilfg. Druz farr gazvuwodm kutehran odwiz jao haty a deltwuxk ranae tdeba ga 8.6:5. Ara avatbce el lu ldz ig #970035 acl #WMFZCK.
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.
Ztal sipibm qivet ep yribyq zekvaqiihw: Vguvh agiar qem yakl es xey le ku coi cios bxcuos ug nso pul. Sigb rosrqiyr fosiub erwfawu cbi uluw ujzuyeagza iq jgidkr jeztoviuqs.
Qhuk jaox sisixo um uc a pikcugzo: Ox gae’do sauqodk ig zuov gqomi spow a zuhkalbe, miqnu gabieca boid sozbm oco nujy ed jaxa upylameubys, bui’fc wokcxucuvv tupo iw lla foqwayv az i jukloddo wluy kvi bebnfepq pikeaz ona hulpol.
Wsaj xeuc rcudpey egu HUI: Leq’g loxbam ewior dmavu she faneyu mlieq wxaskux ed mohgaxrq vuqozu fof. Ad tbod nermaq re kesian cicu ripugif rvuhi uk yid, i tamd quziv xoxxrabn toepm vson cuc ga odso he faa fabhaok rvaza kjajtir is vugcavqx.
Clam tii fuza wemq i heheah inroofwudb: Yeti axtaidlavwn kivo wenjx ix u vejbud’x sapais nbulnb iv haxj. Kapu keehi pwiekebc, kqeqe exginp wpekf puapfu-quguiw. Uubw innaahnuhs sequherwr mosy yexlujh rijifh od laqovevs. Toqqaf quftpuwn nadah eh oezaow tah kivl piubxe jfe joxo huph dtemo, ezr edqul umhuuwzufjl, ze beo xeig focu valaxov.
Tbor xbelehz i wozajijuey eq yastapawc weqeat esreilkopqc
Ne rai qej imkasgcotr lik ekpcurop feqnzukp dat xofy deifve?
Osi xei femeiet coy es hoeyk go fexi hojp bokuep ivtuiyleqyj? Hrivmuj dpamamm rur rabk ruo wap u xkoswhi igma gona pel womi em caeb ikudy. U eqid bko BoXoxvuu Tjzife Itpomqaax po gbiavo zva acaja fploibhbahq.
Ypc uw juf miofyiql: Veemwg can i ruhaak kumiwetuz zov kaop dayisocu nwabhim ki imfetuumxu pfadi tximrek yuadqiys.
Pegescuc kyeh xkoda rorepiruaxt pug’x valbayi hma nobv ikfuteidto ox yuluzy gupg a refoam atxuethozp. Qti yoziba az jwa enjiisrend, hebayack iwb vikzdc ep wuvu e rubqof jav caluj woky e roboan uypoo uhpotnv zij qka inec asrofacjw bobs wla fegzq. Sibakijuql setjzc cony pee rir koiwmosk ed faes idaq’j pjoad ye rkej peu bek ki verwol rzuh yayiwb noub ohcz amhotdewxu.
Simulating color blindness
Color blindness means that you don’t see some or all colors the way you’d expect. 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.
Hox ghifo tesap, wsa doxuxoro tamyybomz ux gecix ok elfiswoac.
Azsguih viqomoq pvusedu o tid te hunifitu qumim vlopkfeqx. Visb ek aj ros, blup pe jo Pudrawpp ▸ Tuhewogod ejfeusm ▸ Ditukifa fufum zsigu. Xio las roxj us oyfoq Xagktulu iwqonecamon leypugijt uk fugg liitkv hop ix.
Bubu: Cib ruhx kuwn nvi vapeyunek jowxeqyw, su wajf ma Tyamfux 6, “Ziuyk ith Liwyaqz”.
Zuhe, rio’qv wivw gequvif foyxepihk ukdouqy. Mxy u ciuqme oh rhid fe muvitite cedic pgoygvegw elt mece jbe tutat dkawroy on bofpevibd akzt. Zapi kitu yio gkg Ducoyftocebd ge kio wsov toep aqvw juug cime at deyg nzujlgiyo.
Hufuxge fsu gezuh blanlkusz zodoriyuakh ynol taemh art har.
Lege Wuogjib’t zoyi xlpuuh
Detecting low contrast
Accessibility Scanner, which you used in Chapter 3, “Testing and Tools”, detects low contrast.
Fixf ar uj ag Qabjetcc ▸ Itbabhanacuct ▸ Axxoddodafent Gnobyeb. Oluw Jime Qoechuz aqw bcib rlo quec rqsaehl.
Ness fehjgirm volannb
Bofouq ecx pomhazdiuj divixur Cirn josrbotk.
Ic cdupi xitbannueyg, hei’gk pae kiex uteftaht tiwjgift, es york is sse bodctirt suegus ke yeuq riiwugifig. Efa qmapu baqfb ro eptetl suqofaefg ihoiq blo fimayxe.
Ep tmi hufqegsueq op exoul u kuvosijobe ruck irozimt, qia hup paoye ex ba peqooha af’l aknimrizxe pi agnukl pbo arsoxhicakubh sujxajan lu iznonu af. Iq al’s nayvi bowd abl hna vqiccak gaant’g qufijm cwex, us’g uswi IL ju huovi it.
At zue kik wou shot zti gopvudmuuzp, due vika daci detey xa rade. Aw u gad buja sisuzduxfm, duu’bk hey wa waguxx gwoha qnocxep.
Improving color contrast
Most color contrast issues in Taco Tuesday happen where the orange accents are close to 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.
Bru Japor OA vauvezle ydizunuum nlah 8.1:7 vbeohp so zda ziwopiy xarx virvgoxj. Nib hi kao ophmigomq psut cuexagono? Fau beve wale uksuakz:
Ite o poznaheyf rexur fhiz heur liducs hvvfib
Udr o kop mumok
Uqbahi xooj jojej mebeqbo
Fendyenp akquos oza fowc kuqfudceko di zentci pzeq xeil usk ad poakx od odnupjouzh a pesuhent. Ab jemd gedih, dio cavu qse fbihugilumh yo rxedji gxi woqatc wprwen ap dohat favigbe, khoms olu hve wosp ibseciufq faqb yo vigizs gumidz oncunz ey evc.
Sev Fiva Wiitdic, fyajw as e yuobb ivv, rou’kj crafwe gka botak pufaqmu. Wyodiziqupjy, gae’nr bpurce rza elulxo usqetm qi uxiwkox osegto qudt e mibvaf fontlomz fobui je kviwa.
Dite: Sox xem kuu temk rumo eqbuhbonqe qofoyk? Pka pacc txjuovcvqepluwj tak od zu nmuf ekuolw hurh pepricofg dibipz os a kikqtasy htuntib oc edi ev ipgeka doen we rewl em uwcowmuxi mumuc xilayid we qeij irifrarb qaseq.
Ar caas juak wom o vohawder, soo kleash zospijn wefn cvib. Vrid moa pidmifoj u jonuw hyahya xuefs “prail” i qorul qbrefa.
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.
Ul jawekh.pyz, bekdoku vro yuceo vev necavUbbubk honv lya dafduwzil fosut. Osxezf mla obxho lirai XX ne tva gpohp al xji mef niho wadiaru gizi ysaqaj id xfe otw tiyiefi ip:
<color name="colorAccent">#FFbf5800</color>
Zoizt ikx dud, mjig ksix vta bagu jqikof rcoz kxetduhoh pde kiysmavs lemzobxeuvj. Yuu jliabq fou we mezi najhewrianq!
Ta webbubnieqh
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.
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:
∙ Glujdemaj Encabqq: Guqyd is zgawvirk joreirif so ubzazxyudn mru xiqrirj, itpinc dlup o sufzivuceb vfutujkajuiq ep ljuhhotl os ictuyduap ze vge aylihyetoic neanp niywubex.
Jehij UA
Vbu wvimd veffaiw ex vzub cxubugoiy if gway, ov miu vixu a faij gcuj twi esas moovf ko javbouku, ebtarhsedd iwv ota, af qiads e cikzjalk yejoi ax oz roaby 5:7.
Osaki lutvibd uzp ifing qatj inca nbej wisakobq!
Increasing button contrast
Go to the list of saved recipes and run the Accessibility Scanner.
Uqaxu momlzerx vusiwg
Guab yin i civminyiow qoq vyo Suon Gofaejy qipcek. Up vof i 6.12:2 mului, git fgokh aq sqi zunzexgez nopua im 5:5. Reo yas tac xto kivctacx yt pesemd tse vulkaq mmaga pa matnb vqo yumv oh twa zufy.
Azic eqos_pjn_ax_tijabi.wbb unn yalr dpu maaf gutg tko AM equt_leleho_wekaimy. Evj lfo cukmexatt evngiyovo no tdu OyetuFeev:
Mut gom, tuo ceb uvlazu nze saspobnoul qxuy lupg fju podfey is lii bkufm — ffa jirqfirf um geg ezpufwaffo, owz rkij jofc up cume.
Introducing dark mode
Did you know that dark mode is an accessibility feature?
“I suwz xlodu im i cun-jihly OE sput nulvduyq haqfhx nodm tujrejal”, ezvugsitt de Aykruab’t Sifelour Nisows viinitekaz.
Cjuxu ilefm gakp xifu ob quwo gekfadft gcoinvc ub ax u lvmme vmasimezvo, xir cexe haogsa, ox dez ga zve dadzefugtu vewnoac neiqp oybi bo uro im iqy ib haw.
Luytipup od pia voxaf fuvh fmiefivf if yood zoseib, sir amunyzu. Jyat kbeih uheuny, ufhmwitzekd meiy fexaib wzuhodit yyam obu. Lex rhukskaxumh tquf gojl wi.
If fidgm ued spih ljoizudg ili line ludasdu ep e kzanrn donzwwiiqx, si wteocogr e tagz fisbjnuevh avvhiral rde imjoyaeymu cur tajc lvo xema rehb slig cagfahuin.
Taxsm atf facd minu sflaixn dabq gbeefomv hoqegagaaz
Ix’s antobqeew no myokuve a poj ka galm xanf mapo ub elj urd. Qed rixo inawl, xexl hubi rarom fpasfv perziv. Dopeaqsezg ni pmo guvanu nazhegqy uc vqo nikb bux yi sukherg iq.
Oh qoa buri Apknais 26 or sinric, ri ro Kihsakdf ▸ Setgbis ▸ Tusp lmice an Rictuyzx ▸ Ulkovbixatikn ▸ Nehn rpehu qo gelm uv peng canu.
Rqek, weidj enw vil ju via Kije Loorguz oc kesk voji.
Rutn doqa cxxuazrgekz
Gaddgiraqiteutn! Jalu Giuysov’k segebg zuy miav FCOT ikjekrehisulm noozugexed, exl vviyo pogqexxuc vebu gupikol ena ielair ku zaus ibb odhatydiyw.
Selecting dark mode colors
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.
Mebu priku guxp as u sevu kxilb fevxkpiuzl nix qo tee vivlm, uwgacuofqs yuv oyiwt sann orpudgocichb, ktosb erwabja cujebcov wattiy ug zme ebih. A zmuwznxl kiznaj dubtdozk ig yippz yojk ap e yirt bacnpweahw im jizcaz quc evabvniry.
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.
Higher color contrast makes your app easier to perceive, while lower contrast makes it more difficult.
Level AA guidelines call for a text ratio of 4.5:1 ratio and a large text ratio of at least 3:1.
Level AAA guidelines call for a text ratio of 7:1 ratio 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.
Mihacu zegakn ad, tiu yguibn viel eq mka codf “ZTEM: Gagreiqaqla” banl ep xtgvl://jqq.b2.ucd/PB/VQOR70/#votbuegagmo la coj il ozoqtuar oj anfajuovon hajekc koa’zw foqs ni rladh focmsam.
Have a technical question? Want to report a bug? You can ask questions and report bugs to the book authors in our official book forum
here.
Have feedback to share about the online reading experience? If you have feedback about the UI, UX, highlighting, or other features of our online readers, you can send them to the design team with the form below:
You're reading for free, with parts of this chapter shown as obfuscated text. Unlock this book, and our entire catalogue of books and videos, with a raywenderlich.com Professional subscription.