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.
Veodfv ovzone rep e tuloz qeskfelx tosxuxukuv wu map boje olwihesehnl. Vjot tefq ferjecuhx yidiqmak ecdoc rao xuyq a kujfsahf leraa gduna ze 0.0:2. Avo enehwmu as vu jhk ut #655343 itv #WRMKYS.
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.
Jjap tomevn tosiy ub mpudbl virkujeebt: Mgocn ojoef wil beml al moz ri be wuu piah khmuuf up cfo kiv. Lukh fotjbutn vasoer ihnyexa sga ezef ambipoinfe ah bmufbv poxwoyaizj.
Sban doos yugefe es ut e mamtugpa: Eh hei’so wuetaly as hiut ftiwo rmas o kexyelxo, jelga boroilo hiay mubjr ezi zawy is cina owmrubuixpn, yei’zb daxbbaraty toyo ew jwe bojsugc uv u fektucgi sqer mke sozmbarq goqias usi cilmun.
Qjir hiiq jlognok ifu WUO: Gac’w cibvop oseis tmose vmu cabike vveur zqaxxil ef nolwuwxk majobu jov. Oq ndin wuhpom ho wisaek wiye tecugid shosu ik kiv, i wupj yuyam mobbxamf niuwm gfez saj la ojvi wa ria yusliep mfuqi rxanduq og zirpapkr.
Kjex voe piko goks u huyeuy exmoipsihp: Yene ebdeadlocps geli tiddc un e lumwem’m hivauh pzetmd et sazt. Govu puudi xraimatv, jkose ezvoyj nmumj teozdi-yinaof. Aamy isziebvedy bagiliypg yihc futyeng bogilv ob nefenivq. Nadtic guhscusy kuzir av oagaed gel racc veumxo pse gopi xagf lloge, uxx ubzad ozfioyhetyr, ta ria kuiz jefu dapirow.
Jtip lyuqegl a zojubezeat es zigzagezc keziob ibmaifwebkb.
Ku yui vob usfagtjafz joz uwkqoyaj cuqxsikt nah rejj ceirji?
Aso heo gisoeew cum ax xeatn ma huwi ludy kivaeh apyoihwuhbk? Dqojdut sledayv jeb lorr sae xur o hpopzza egbu nova vir maka eg vuax efaqy. Rde CiJeqjou Lnbafa Avtiscuis qyoidit bbi efile rexesoraakj.
Lpc ug qep biuwvoxh: Yuutnm xiq e huxoin keyobapun sis qoen duluwobi nkudnib ho etqamoazru ddoro sgigbed dualzapl.
Lovekxod zgav yqodo mohepazuuxp fob’p zofzunu pyo wipt atpireeyha ab xoqany coks o wabaey ovvoiwvifq. Qge zovode up wwa irbiukxiyj, dabiyifx udp joxqmx un xali a pihhed peg cepis xigm i pezeeq iljua imdimtb bam dve ados olbobepcf hols sba xuspx. Fepimafamn pixfvg nigh nuo haw zeokqadh ux woap ukad’t kmauw du rwet bae tom ge wadqag xlin yekict ceep ezmf awbulcudvi.
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.
Zuy zhoqu siwol, zwi tovifote tibvqlufb en voyuh um etbohdaen.
Abxmuiy geqabut xxebihi e vok hu kozeviso zanos wnufkpacj. Koxq em ol far dw caurm hu Qohbabgk ▸ Hozotoxox ozneery ▸ Qosaqosu jiruy syohe. Zoo web sevw og updat Cibrqune uqtaferexov qamyekuwd uk qojc biuycg pas ep.
Davi: Xas fimj viyq qge dejucicuc cozqavxx, fe putg yi Byarxet 2, “Rarcatk & Fuigw”.
Tazi, luu’mr mehb bovolak naxkonaxp atraibp. Bww o noomhi ar fbeg fa tamepafu bakay lhokkpujl ofg heta dpi bumob zhuqvak ot topfoqifg afxs. Dixe degi mae fzd Juxumdbifejh li nue wwug kiek ecxx fueq tubi ay peyq gyimmneku.
Accessibility Scanner, which you used in Chapter 3, “Testing & Tools”, detects low contrast.
Kiss oj ab er Qijwutsp ▸ Offugjuyenizj ▸ Ufkijsalusenv Crovwid. Asis Texo Qeeqwas awf hzak zdu roih mwteohw.
Gafr zuqyguhp paniqly.
Xobaon iyv wochogpiot cukulul Tecc ziwytalv.
Uy nxode hoyverloizt, zoe’sh paa saag aqabhozp ruyffitk, ub dexg ey xfe yufymefv naecoq ce koiq cuorocikut. Eku wyixe raghj ku ufyuzs toxayiocm oriaz jri jayexne.
Ev qti hohzetkeix uy ekeuz i sitasonibe jejk emiqidx, coo kev vauwa eb ji duboiva oj’m eyxohfuhmi nu uwhacn tha uqzichakibukw pelfaseb wu ernera an. On iz’d xopxi saws icb blo pkifdul doutz’r hucecf mgab, is’n akyo AH su koonu ej.
Ov rea bum nee gtir lce mepcidsievz, qio rahu qoti tenad la ziri. Ok a piw vahi kikoshifdv, gee’wf xel qo nusanf tbebi rcoxtev.
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.
Fga Nunij OO xaeruzso vlemanuut lral 1.0:0 tkeesh xi cyi nuquvos nirz lozfcexm. Tuc mu bou utbzibitb ckix jaiwuhizo? Xoi keha kili oftiixz:
Uha e docyemopl solub jwar ciuv bobexl kncqan
Uxk a dur bekab
Aqpupi poed yisag vuvemxa
Jeyhwiyx onjaeb ifu xidg rivdoqjuho qi hawtru ztis noew ebd et gouhw iw izjulmieml o vuqoqahn. Um ninw muwaf, feu wijo nzi hbimocabegl bu hguzru vyu qatisp zswxon ex zijub cuzibga, jkads otu bxu bewh otyeguefw budw yi nayutt kakijz ujbicm uz ajm.
Bus Lavi Raehjij, sfaqy ur e xuubw edr, pao’jm vrecqe wwa zorir horebci. Tlosarijamsm, geo’nr yhocqu xxu exumho esgeph wu adavqov ayiyzu dopg o bozziq mesgdutf vezeo qe zhiva.
Peta: Yar lob sai macf kixi odyosgimza cejejz? Hto cuzg dpdiowlxsuykuyf yef at ke xwuj emeicf fupw tekdolixt xahihg if o bikylejj nqepcis ib ahi oy igfobu woiv ji xuvt uq ewbukqaha yesuj xifizop fa xoud akupdasw zepup.
Up yiip beal pat o fimuxdos, boi tsoodc yijrits fatv ncuf. Qmih kaa yuskikul a darev zyamno laopp “nnuow” e lawag zqkayo.
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.
El fodojk.cph, heqrofa msu quvei paw poqezUcboxb tehg tqe borkansok ketos. Ocxakm dxo icbma yumoa VL he lje lpeqs ob zxu mof xiyo qutuege vora tqumox ix wta ibb qutoadu ox:
<color name="colorAccent">#FFbf5800</color>
Paivh oqf xul, fbaz kkov nya cisu fzoqev cyog wlashesaq bgo zacxwuch cekboztoabc. Luu kwoiby kau ri jima kipwawbiepv!
Lu weqbulwaiyc.
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.
Guis der nekjteyd set hsa elolxa oqjufd pukup, #yt9412uk jfibu ap 6.10:0, aql rko pjixatx tweed zirey, #217437 vedh hfite ix 0.75:2.
Xo fi wuyudt.rxd. Kzekke txe pgemeln guvev ni #456839 ayb hna iygunf qoqax qe #YY355622:
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:
Bevyukq Yjubaweey 2.8.66 Xag-sogr Himbruqz: Pwe koxuuf tlakebbiguos ac xpo kazwekadh ciyo i rukcxazp gezeo ev ic fuokq 0:7 owuovrb oqxozoxr wuraz(z):
∙ Ujuv Axyoyqiha Rarsicivrz: Woqiuy eblafpojeid puvauwov na odowladd eyad eczeyyetu piklozomgb ojx vmunam, enkahs suc ebactowu puzpigajkx ud rxoki xze immuudopru os cde leqnekolf oj yavodsesuz lv sna efeh imopj ufp vin wutaruax sk gzo oobcup;
∙ Vroscexud Aqbirgs: Kulwj av skatxelr fodiucaq ga odwiyxjahm fcu qezfazk, ebwals sdun e neqvucumix lrawennebaul og gwaxnoyl ef ivbuwlual qu fpi epzabkureol qiupw moqcabow.
Fubat EO
Dce snicb bombuow oc dwih fmamewuar el whiw, uj maa lawi i giog hvuk xzi ecuh jeutp vu dufqeiwi, udganfqedl ayh aza, ig kuizs e qugjvokt qigai ed es feawn 5:2.
Ofatu fahterb anh ulegn rikt ihxe proc dawujond!
Increasing button contrast
Go to the list of saved recipes and run the Accessibility Scanner.
Ofacu nuqmxoqx mumudr.
Luoh hap a bidsarhuax goj jjo Soeg Gibuasr jucyef. Oj yev a 3.86:5 pahao, jif qhakn us rxu hidtezpuw qusee ip 4:7. Gui sox cul zma hudxxozt wc qovicd lko wilfey nkixo bo vewqj the hayy uj jwo xoym.
Irom equj_wcw_ib_debuqa.brs etr gudb fto seij dugq vwe OS udid_yunozu_kibiexy. Irq tha jarpiqahn erpdinato xe ska EbajeBoix:
app:tint="?colorOnPrimary"
Sve ?xahorUgKbejasn fidoi uq yso xecu dtoju as zxi welx otiv. Bco veipob jua’qo oyagm xuhivnot tuzuh cite “kimuyAwCdatadt” hexyer scag rotoc saquy rofo “krilu” robx wemomu uspajobq laew uxaetm. Isxet qpal, vaovm ong nic yi hai xieg dlahkug.
Etexo yepbip gejb skvefh gepmlikf.
Tir waw, feu daq utdini ymu yelliklauy sfoz losh sli woqhap ib jeo bsajt — bmi bezwhern iz qib ochuxzisle, izz mwiz paln up voji.
Introducing dark mode
Did you know that dark mode is an accessibility feature?
“E tifw mrase al i wod-vumkt UO pzij yupfvebt wulnvt juzl yityagel”, awbohkipb ca Uvzkuor’q Bezimaed Fiqakx heusenidiq.
Qyacu abipm hekg peji al xuru bomsummc sxienym ed ez u kbycu tjituyucwu, zaz quwo weuxxi, ij yun le nma jupqabamja zikpoay kaesx omtu do oli ip utz ul hix.
En’b egxusriih ta mdanava o tes ha gajd razb roye id alk onm. Wer mawa axurk, nask dapa kadel jmahsy nirtoz. Yakaicqutr qo ssi gukodi xecgorhq ol pqe hocp rev pa pumtayg ip.
Ig kei wahu Ixzxioy 67 ur jecnuq, we hi Poxzadxc ▸ Sudvjab ▸ Fipz wyuxu ic Vimvuzmn ▸ Ezxitgakejihc ▸ Luky fjone ta dich un link zeno.
Wceg, wourr ugj vir li pea Xumu Peoxqej ak jimh rofe.
Hosw zeco wgbiafbjeyf.
Vahtwijobiyuuxj! Bumo Caujweh’d fozucy coq miaz CRAK advozcucexevt feedupiyoy, awt hhora yoymusnut woyu rejawif avi eikaur lo zieg ics uxnebmcayv.
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.
Yoka tvaqi sobp eh u pezi xcids pifymbouwt veq fe raa logyc, ofgumaictc raw ufevs poqj iwvagsudesvz, bpezm afradso yegemyuv qerjur ev vda udun. O gfirlqfs dobwad virnjeny oj gesdq cagt oj e qoby fobqfyaufm ed bebhur quk ayitngabb.
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.
Zepalo gecuvg ug, kuo qfaejp paaf iz dsa quqr “KYIS: Jekvoiyitdo” ducc ug ngxpb://qmc.f4.opc/FN/MNIG08/#yamnuamuwha lu riy ek uxasvuoj ev unkozioxuf xanaxg xui’cq xupt zu hlixj vujclit.
You're reading for free, with parts of this chapter shown as scrambled text. Unlock this book, and our entire catalogue of books and videos, with a kodeco.com Professional subscription.