- [Jennifer] So hello, my name is Jennifer Dailey.
I am an iOS accessibility expert
and mobile software engineer at Deque Systems.
I have been doing iOS development
for the past couple of years since 2015
and I wanted to share some accessibility tips
with you today. Let's get started.
Today, I wanted to cover
color contrast
and how to make your app more accessible with colors.
What is color contrast? What does it entail?
Basically color contrast just means making sure
that the text, any visible text on your app,
can be seen clearly by any user,
even people with low vision or with color blindness.
Just making sure that the background colors do not interfere
with the text that is behind it.
I have a demo here with some different color contrasts.
There are certain deadlines called WCAG,
which is the Web Content Accessibility Guideline.
They're set by W3C, which is the World Wide Web Consortium.
One of their guidelines to make things more accessible
is to have a four point five to one color contrast ratio
with text and its background.
I'm sure we've all run across apps and websites
where you can't read the text
because the background color is bright blue
and the text is bright red
or something where it's just really hard to read.
And so how do you decide
at what point do we have a good enough contrast
between the text and its color
to make things more accessible?
Or to make things readable by everybody
including those with low vision or with color blindness?
The WCAG, which is the Web Content Accessibility Guidelines,
set by
the W3C, or the World Wide Web Consortion,
has set these guidelines that say
that you need a four point five to one color contrast ratio
between the text and its color
and large text to have
a three point oh to one color contrast
between its text and its background.
Large text is 14 point bold or 18 point
regular
so let's get started with this demo.
So I have a demo here that shows some color contrast issues
and some certain ways that you can fix them.
So the first example here we have a very dark gray on black
which is probably very difficult to read.
We have a default iOS button,
which as it turns out is not accessible per WCAG guidelines
and a lighter gray that actually is accessible
as it has gray, it's a lighter gray
on this black background.
So certain ways that you can test this algorithm
that you hopefully never have to deal with
is you can look for the lightest,
lightest pixel in the text
and the darkest pixel in the background
and we can see that it's a color contrast ratio
of two point seven to one,
which is why it's so difficult to read.
I can show you that the default color of an iOS button
is also not accessible.
We have, that's pretty consistent, we'll go with that color.
And the background is just white
and we can see that it's three point nine to one,
which passes large text as I mentioned earlier
but not the regular sized text.
And we can see that this lighter gray that I chose
for the fixed example, 999 is lighter,
and we have a black background,
it's seven point four to one contrast ratio.
So how you can fix that is,
if you don't have any certain design regulations,
it's quite simple to just change the color to be,
we can change it to be light gray,
we can change it to be white,
let's change it to white.
And then you can just restart the app and see your changes.
But another way that you can do this,
if for whatever reason you have design constraints
and you can't change the color automatically,
is you can actually use a system
that iOS has specifically implemented called darker colors.
In order to take advantage of this,
we have to do some code.
Attach, just do some IBOutlets for the controls
that do not meet the criteria that you're expecting.
Create
a
notification center observer
and listen for the notification UI accessibility
darker system colors status did change.
It's a very long name
but hopefully Xcode will auto complete that for you.
And then you can write a function
where if UI accessibility darker system colors are enabled,
just change the color and I can show that for you right now.
In order to test all you have to do
is
well here I can show you the first. There's the original.
We can go to
home,
go to accessibility
in your settings under general.
We click on increase contrast,
click on darken colors,
and then you can go right back to your app
and there you go, you can see that the button,
which was originally blue, is now black
as we coded in here
and the dark, or the gray that was down here is now white,
which matches the white text above that we
changed.
And that's all that there is to it.
It's not too hard, not too bad.
This may be a small change in, you know changing colors
just maybe a small change but it is a great help
for many people, many, you know, as people age as,
I mean about eight to ten percent of the population
has some sort of color blindness.
The more you can to do help the better.
If you want to learn more about iOS accessibility,
you can visit our website
at Deque dot com, D-E-Q-U-E,
and if we have a free trial of an iOS framework
that'll help you with accessibility
and if you want to learn more about that
you can visit the test webpage on that same site.
Thank you for your time.