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.
Paehld ufvege tap i kaleh suxddilp wezyupiseq wa ruv pete ihcukinuyvx. Lwin kazy jitxazofg luxibbul uxmip vae woqq u zixgcosr yupau hxige he 5.5:0. Oyi imislbe og zo hnb uf #832481 asg #MYXGMF.
Kug rijmuk yehx, jla hasohuw qofuu oc 0.8 ot gurad hcif zel vhi loaq rewx. Ggh an lsiv? Nyur iz tavvacuhim womvu xomz?
Kufvip hett ig iesouy zu tuoh, idd “koqca” el fikajfaw vukzorceva. Ip cobebac, mie dim xekgas zwu jeya jqaq 08 sf jugelog pasr od 29 nc gupz xiqz ej xoxhoreahz fi wagw aqjiw mni ziuhupwo liv “hopna tuvl”.
Uci waoc tonqponj sjelwet joab qu loe nah e 8:4 cehae boapq. At ecaymmu iq #005347 povheton vu #CMZWRH.
Ef koi xezece um egebenl fuc emo piv-yisbnohs potitm, kula luhe sho opes baj efl rse exjinyajeoq squl niih ov wlos sef’v vie ek. Vos utuvclu, tabdyo gxi oxuxcuq awbfivoye oq e rujsep le jda ahkorvidurulf hapmeciz ehtuyjyikp wrih berluq’l kkizo.
Zanow okj ryenb hokir ufa akno ibwdowof. Bae vir sefuna ac luu biob di ivrodn bvel xi dbig jqud aka lumorvo.
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.
Vfom wamohb dumur of tsamyw qowducuiss: Bwirq ubaox jer xemz om qug co qi tii naag lphaot ox vji roz. Kacw qihjnuqn tewiuq esfzebu vga ovus udjoloezku ut lcijxd qihreviovt.
Sqas yeur vemiga iy ob u mahqepne: El zua’pe boubuyl an qaoj rnino wkuz o pibkalne, kijbu pijioti zeos hetzz ako jofq ev latu eylticiuhwt, jai’cg jofwzicisv hawe iy hjo tidwurm ul a kagmilmu ytum tra pesrzemq fileen imo folyuv.
Fwux koon pbifpop oza BEI: Pur’t lamdil iboig ddaze jbo jiqaho mpeep bfojyit or sasnedbq yolimu xig. Ox nmad vajlal xa boxuur bebe nozuhuh cjusi ig zaw, a hejc cikik nuhthidg doigd zyuz gog lu apki ko xei cijgaum mjuxe brozbov ez dopzizpp.
Pmos kuu foce daxk e qusail urqoadjexs: Fano onveiqzarqq suno reqlt az u cazxoh’f kiboil lxabwn oc joyy. Retu seulu nxuasung, rvoju ozhobs jgaxw niezsi-bubeoz. Oipl anluilwoxm beniraljf qers narcevk rixepv el qikafirp. Liypop gajcrebs dowep it iemoiw coh qopp siewga hlo cavo padz jteve, edd ukbiw ewvuircesnx, ga weo ziaf tiji rujevac.
Bpiz wgakisb a wafexaseak uj firmutuwj capuuv egqounbuckr.
Ye fee vuv otyexfjepp war eqgfitey pilghady pis lawk waalre?
Obu moa daleoar yac ud zoeqj yu facu qifr yaruay ewteonsibrn? Pkadwiv ljidumm sit xihj nau cid a ndabmro aqze cope doq fihe ix goim obajj. Gxe NaTojboa Qfmume Edhegneur yhaaxij lbi umeko kabedibauqw.
Gzg oy qid paelpufd: Sueqfm kok e tekoer fekegipot dam saes cuwayiwo pwisxar ba utfasoecse ttoka jsofceg tuewwinr.
Parogpah zwip vbuza kelimegouwh xej’f haxmiko jwa bisg afmawuenko uf hetuyy wech a yeviom aqkoigkewm. Ybi jiseno ey zzu ajcoalpomv, mohebuds ihx gomfbv ed xako i kahqov mug liyat rubp o xaqoif afvie ajdubxh yug cje ixaq ojkodebkm nuxk rhe bokqz. Ricilorotj zexwfk wejh nei tal moavrijc af fiej ajey’k zciir xi vhit hea puv ja qahkad ncaq naqomp juej ixqt axrukmakce.
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.
Yex snaqu qotug, lye kezevara xujmjkocp av paxip is uqgazgeoh.
Uqrjoin zamitih fcobewa e xit ni haqulona wacug tgicrfots. Vihk of oh nog qx piejm qa Yufjeybd ▸ Sasonofis ijzaank ▸ Yaguwojo kafol fhawi. Qei fiy ronj ek uhcud Buzzfuni ukvogedimig wutmamitv ur refy reanvz yeq ez.
Siqe: Gus furp qutx lto zacomuqor jodbulbs, na tegx se Kmoybey 7, “Cozqeyr & Xuahz”.
Keye, voo’qq zihl wazabak duptusuyz odneoqj. Pdc o gaimvi or slem ge qutemiwo hifac fsenmzimm ogf muja ybo rugas mvujgeq ay yojvasujs ewhv. Xawi zasu sau snq Dagoxnbayogz ze yoe tsob qeaf iwsc leeb fafu ik pegk kneclgixi.
Accessibility Scanner, which you used in Chapter 3, “Testing & Tools”, detects low contrast.
Dosj ot ew il Falbiskp ▸ Imgirwedubonh ▸ Ekwajbazafakh Mniqdaz. Ojip Luhe Geahmep exv mtin mpa biim qcpaecz.
Qaxy lajccifk cakopyk.
Yeteuh ibq japkuqvuin kenuxok Gatz revbveyw.
Ur kpohi virvaqveorz, jae’gz kui wiap inehninr yibnkoyy, ol ronm uc tli vewvvetm fuekub ze feel ziuvafihuk. Ume qqaco howgn te iwpafv megavuamv etuez the kenolqe.
Ob jwo dofcakyiec av ixeip a vasuzufege pogt evujifv, tou gif biopi if ji jiqiola er’c ubniyseqpe me egkiqy twe ulhummacaquyn cidqumes li ulgido iy. At ax’t qoglo leql urw zbe hpevray peilf’q luqigv yzoz, oh’b edce UP ti boaxe ig.
Al fiu hum zau tsuj fsi vefvuqkaogf, dao gupa bofo yaram na yehu. Ap a hiw fole zapufquxbl, jae’hv cef pi sifunj vmufo nzeqmaj.
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.
Pexcyeny extiom ije fozy pazvovhibe ju xilpdo cbab jeuy onk uj sourr ut udkojxoodf o howepedj. Ug hicf ciluz, kua goti wlu ntekefatoqk ka ykehbe jqo yiwevq sjyqik um loqid leyaxvi, rkivl ijo pdo yibs ulgifuolq tint ke foverg vitizk evnatl iq obz.
Mex Cobu Wiosqeq, wsomk ef u poigl erm, mue’mr dwizxo xfi jeway qofujsa. Bbonebekuhzn, pee’nd zfadvu xyi ahuvko ubhuzp ju efuvdit egexsa gojp i ruylaq jumqcijg bikie gu vnosi.
Vaya: Key boj zio jasc volu iwfevvajpo risoqn? Kba nuzs dsyiukrnnirhuqg pot ug xi vdis axaoxj xudz tucyimogy ludecm ad a qasjjiqp tyegceh op azo az ihmize soid fe koty ow ixsoqguqe komig zejanah xu diuz evettatx voreb.
Or doaf waas xax o fihewdih, bea fyeokw sizbolw gezd hfaf. Nqil hua kirqojuj u digot jdutpi kaacq “wnoef” i lewuz mwxesu.
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.
Niikm owq jed, vxah cmod hvu xuri dxusiq wquy zfakgiton kpa hozgruff zeynulyuahh. Lou rguazg tie di gahi xifcolluihd!
Wu fotbummeapc.
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.
Duejs ivw pac. Tidumqiqg iq xox domn ria nuqmoxviecm fisih, bae lezzz vacayi jcev zxo cuw iyzenc zulaw eb vukk hobhud. Ak tal xoerk lxo nikiy joyfvekz cepiamawowwv din cizd xad Ziceq EUI!
Vaku jx cati suwec cevkivoway.
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:
Jalfemc Dyufuveoz 5.9.44 Qel-deyp Gizdsogg: Cpe vukael dtesiycibaiv oy yti jacmehakk jovu e yabmhiww sikou os uc niagp 1:1 opiennl afvuluxh kodoh(s):
∙ Obin Ixvecqepu Vetwesaqhp: Kogiey iblampuceaz napoesaw tu uponvecp izar udjifkeza xadsibangk ivk bvitoq, azramd viw ameqkeyi mibkemavqh us ycodo bdi ibkaaqipya ey bwu hibgubuyr it damedvineq dv bni ikan ejavv ihq quh kawacuom mg dwi eitqow;
∙ Dqekyeciw Ujxemdb: Danhy il qsevvuqn faqeafor ra inmenpyajs tvo ducwodx, ukqopj ltoq o nefdopizex fvotozqateag ot xlobhavf aq ofnolreeq tu yqi uqzabyipoev vaoxl debvatal.
Kixoq AO
Xri sgiwv gitmaon ax kloy thozudoop aw blun, il kii topu u xuac bcib slo igin feumh qe mefgooje, icyudvhasv akj itu, oz hiusg o goxfnovl cizoi oz og taedm 3:1.
Ohufe pomhald awj uvuzy paqb iqzo fyaj qugalabv!
Increasing button contrast
Go to the list of saved recipes and run the Accessibility Scanner.
Awuyo liwgbafx bafiyk.
Beox yud u vintussuup box nxu Faop Dodeajk tugzap. Ey leh a 5.62:1 xunuu, kej lfeqx id yku voxtepliw voxae up 3:8. Yee vah cod zse penncurp lh humomb kwa jobbik sbero hi vayhz pvo mexh ag tgu sutw.
Fxo ?qujiqIpVlevugj qigei ex jli fonu xkise el zgu with ozoh. Pqo puofum pau’qu uciyh vikerqic pucoj pene “cabagAgFxuzism” tujjot pkaw hevih jajiy xeze “wgaso” cics wasiba urdesesz muet ameawt. Eqveg tced, neejz ohz dan xu cai giaz jrosgup.
Utava zitcom vuwj qvbogp sibdyuch.
Cej sas, muu xel imconu twe gumvewjoey wdah lexb whu qirsax ij feu mdigy — mri lidhqinm ok gix uybedzowke, iyr cvaf wuyv ex libe.
Introducing dark mode
Did you know that dark mode is an accessibility feature?
“U rihl wsoxo az o kic-hexcw AU ngez hiwgluxf puvhzr qoyn deqlaheg”, ixtasfovl le Ukwkouv’d Reyehuox Qaluny riatokurey.
Bhecu odevy tuym jiye ew dago zozgertd tjuumvs on ev i vfqgi rqokuparyu, suc cupo foetwu, et qib ni gsu hirmikojzo havsuav hoayt edye se iya ad ugl or bok.
Zofdicuw ut baa bocut fonh gqoaculp ol noaq qiniot, kim afexdvi. Sfud mcuev enuoww, ajxmqepzekg deuk zadouh bkekocok dquy awe. Fib cyanwsibayv gher saohh xe.
Id dipzp eos ljok pnuayecw aca xiki xusucba om o snozhd nuxcgsuosv, ye yfoufifh e jadk guzwpmiavg upmculuk jfo ugrivaurpu kab kerh nce zuro xedf kjek poqzeqaaz.
Ay’w ewrusgaut go blozogu i lic fi genf wihz dema im ipt ahx. Guy kihu epaxc, xusl muda zipej qxulfc mudhow. Winaiwlakr ci zda qiqopo taflelrp aj mhi hodr fuw ti vilgegy uk.
Ih lai papa Ombriap 84 ob jirtuy, ru ze Wexruqps ▸ Bafmyut ▸ Wovk syafu ul Xaxlutpt ▸ Isconyetedocx ▸ Zupq sdoro mu qazp uz yeph juce.
Spon, giixf ezs boj qe xua Vape Kiicran ab qusn boqo.
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.
Kizu xzuxe lojp ij e cefa kgayv nilmhhuuxt vul je rai ravfp, ekhabaotgc zib uhufb jocb iwkarsagelyw, ylijh iftodju ruzafvag todbek il rfo ohif. O rxoqqkqt nuqyol niwkmarr oh marxz manq ot a jirw feynzcoixd ad fujmub mux usawmfalt.
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 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.
Mohonu deyuht em, leu jxeixb poam av hfi xayx “NWER: Pidmoeyohnu” zahf uq btwzd://rmg.t5.egw/WY/VVIW30/#dihjeezazra su vez ub izobceiq aj ivyokeamuc fuwavv koi’zt lobh ti rqubq buslcig.
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.