WCAG 2.1 Article 1.4.11

Описание: Tools and info to get your website accessible and WCAG Compliant: http://OnlineADA.com

Unlock the WCAG walkthroughs for level AA compliance, get accessibility web development training, and additional tools training in the Accessibility Academy: https://onlineada.com/academy/

Are you a digital agency? Join our Partner Agency Program! https://onlineada.com/partners/

Online ADA
Advancing Digital Accessibility

Transcription Below:

Hi everybody. Josh here with Online ADA, bringing

you another video from the WCAG accessibility

guidelines. Today, we're covering article

1.4.11, which is the 'Non Text

Contrast Minimum'.

This is a AA standard requirement.

Let's jump in.

The visual presentation of the following have a

contrast ratio of at least 3/1

against adjacent colors.

User interface components.

Visual information required to identify user

interface components and states, except for

inactive components,

or where the appearance of the component is

determined by user agent and not modified by the

author.

And graphical objects. Parts of graphics required

to understand the content,

except when a particular presentation of graphics

is essential to the information being conveyed.

So this article breaks down into two different

components.

There are

user interface components and there's graphical

objects. So let's dig into the first one.

User interface components are going to be things

like buttons in your forms or form inputs, like

an email field.

This article is saying

that when you present a user with a form,

and

let's take a

a text input, for example.

If you have a black background

and the input field is white,

then that would be a stark contrast, that would

meet the 3/1 contrast against its

adjacent color, being the background there.

In this case we're talking about an input without

a border.

A border is not mandatory on form inputs.

A border provides the 3/1 contrast

ratio against inputs that maybe white against,

like, a white background.

So if the

internal color

of the input

doesn't meet the 3/1 minimum contrast of

the background color, if you put them just one

over the other,

and you couldn't distinguish where that element

was,

providing a border around that input

would provide that contrast. Because now

the adjacent color to the border, which is black,

would be white, which is the background color in

that case.

this article breaks down into two different

topics So let's go into the first one

user interface Opponents

user interface components are going to be form

inputs like buttons or

text fields like for Email or first name

and let's take those as an example for what we're

talking about with that minimum contrast ratio

whenever you have

colors that

convey meaning

they need to have a contrast minimum ratio three

to one against their adjacent colors

So if we have a White input field

against the

Background

then you can't see where that input is

the user is unable to determine where they need

to click in order to interact with that object

So

what we're saying here is that we need to have a

three to one minimum contrast ratio from that

White

internal input color

to the White background

you can do that in a couple of ways. One would be

to provide a border around it

Borders by the way are not mandatory on buttons

and form fields

they are

a good idea for people with cognitive

disabilities

and for people with low

They give you a stark delineation of where that

object exists on the page and is separated from

its colors

but it's not mandatory

This article is simply saying that

the colors presented have to contrast each other

so White on White doesn't work

but you provide a black border around that input

Now, you have

black against White adjacent color and that does

meet the contrast. That's a 21 to one ratio

another idea Would be if you had

a

button against

let's say it's a White button against a black

background

The button doesn't actually need a border in this

case because the White button

serves as the contrast

area

the hit area for that element

meets the contrast against its black background

if it did not then you would probably want to

provide a border and that's really what this is

saying anytime you have a form you just need to

be able to present that information and

let You'll know exactly where those inputs are so

they don't have to scroll around and look for it

but I will just point out that this is not count

for disabled inputs

so there is actually no requirement currently for

for instance, a button that is disabled

read only

The second topic in this article refers to

graphical objects.

Graphical objects are going to be anywhere on

your site that you're using a

graphic or an image or

a symbol of some sort

to indicate meaning.

A good example of this would be

a green down arrow being used to convey a

download button.

The down arrow would be considered a part of...