Color Contrast and WCAG

Hello, everyone.

I'd like to thank Web Directions for having me speak this year, to the sponsors, speakers, and attendees, thank you as well.

Today, I will be talking to you about the web content accessibility guidelines or WCAG for short, I will also be talking about a critical part of accessibility today- color contrast.

I'll be discussing three criterion you see in the WCAG guidelines, as well as some tips, tricks and tools you can use to ensure good color contrast for your projects.

Success criterion 1.4.3.

Contrast minimum AA is the rule we hear about the most, or at least I do.

The guidelines states the contrast has to be at least 4.5 to one, except for the following, as you can see on the slide.

The rationale behind the guideline was that text that is larger and has wider character strokes is easier to read at lower contrast.

Therefore, the contrast requirement for larger text is lower.

This allows people to use a wider range of color choices for large text.

How to meet success criteria in 1.4.3 18 point text or 14 point bold text was judged to be large enough to require a lower contrast ratio.

18 point is equal to 24 pixels and 14 point is equal to 18.666 pixels.

As you can see on the slide.

For text that's at least 18 point if not bold and at least 14 point if bold.

Different color choices I had seen on a website with this blue background color using different colored fonts at 18 point.

The background is a medium blue color with four different colors of text.

There is quite a difference.

The top font is a lighter blue that has 4.5 to one ratio and is level AA.

The font below is a darker blue font at 2.57 to one.

The font below that is a white font.

That is 6., one or 6.1 to one.

And the last font on the bottom is a lighter blue with a 4.91 to one ratio.

Three of the four pass the contrast requirement, but two of them meet or barely pass.

Make sure your contrast ratios are meeting the 4.5 to one ratio or better regarding this success criterion.

Success criterion 1.4 6 contrast enhanced AAA the visual presentation of text and images of text has a contrast ratio of at least seven to one.

Although a lot of people do not aim for or audit for AAA standards, seven to one is as high as you can go if you want to have three distinct colors.

Why AAA?

Simply put, if more people can read the type and see it, the more people will engage with your site, buy things from your site and they will more than likely will return to your site.

You don't need to get 21 to 0, ratio, which is the most, you can get-white text on black background or vice versa, but sufficiently over AAA to get into that range is fine without causing issues, which I will get into briefly later.

How do you meet success criterion 1.4.6?

Aim for a ratio of seven to one or greater for AAA compliance.If you can.

If you can go further into AAA, then hit that seven to one rate.

Say eight to one or nine to one.

Success criterion 1.4.11 non-text contrast AA says visual presentation of graphical and user interface components have a contrast ratio of at least three to one against adjacent colors.

This slide shows some examples of color contrast using flat radio button components and a few different scenarios.

Not real-world scenarios, mind you, and your mileage may vary.

How do we meet success criteria in 1.4.11?

Make sure your components have the sufficient three to one color contrast ratio against adjacent colors, but try and aim higher than three to one.

Make sure that adjacent colors have enough contrast between them and that they pass color contrast checks.

This is Bob Ross, painter, art instructor, and TV host.

Mr.

Ross once said, "mix up a little more shadow color here, then we can put us a little shadow right in there.

See how you can move things around?

You have unlimited power on this canvas-can literally literally move mountains".

Then Mr.

Ross said all the time, there was a mistake on his show, "we don't make mistakes.

We just have happy accidents".

So a warning to everyone, especially those who might be photo sensitive or have sensitive vision.

This next slide is a real-world example of a successful submission for an email newsletter that I stumbled across.

And it is a very bright yellow.

So if you have sensitive eyes or vision, please turn away.

These are not happy accidents.

Now that you have seen that horrible white font on yellow background.

Move on to the next slide.

I myself had a difficult time reading the placeholders in this form and I have good vision.

So imagine what someone with cataracts or glaucoma would be thinking or the frustration they feel when they stumble upon things like this across the.

It may even cause harm.

Why are we doing this?

What is going on here?

What is the number one common failure in sites today regarding accessibility?

Low contrast text.

Again for the third straight year, low contrast text has been the most common type of WCAG two failures for the third straight year, 86.4% of homepages in 2021, compared to 86.3% last year to 85.3 in 2019, all had contrast errors of some sort, according to the webAIM million report.

So what can we do to make sure we have sufficient color contrast on our sites, in our designs, in our apps, for captions and more?

Tools.

We have the tools to prevent all these errors from happening.

And there are a lot of tools to check for color contrast.

Lea Verou's contrast ratio site is one good one I find when I want to do a quick check online.

Who can use, which is a phenomenal site that also shares statistics on each visual type, the percentage of people in the population that have the visual deficiency and a simulation.

Meanwhile, giving you the contrast ratio figure and whether or not it passes WCAG, AA or AAA.

There are more tools as well.

I think out of the group here on this slide, the WCAG contrast checker is the more reliable checker as far as the rules and guidelines go and is the more accurate checker.

So in this list, there's the WCAG contrast checker, the WebAIM contrast checker, the color contrast site, the randoma11y site and the button contrast checker.

Contrast checkers can round up or down, so your mileage may vary as far as which checker is most reliable to you.

What about browser extensions?

There are a couple that I highly recommend.

We have the WAVE extension for Chrome, Firefox and Edge from WebAIM, along with the Axe extension from Deque systems for Chrome, Firefox and Edge as well.

Other tools include the built in vision simulator in Firefox, where you can view the page as people with different types of visual disabilities would see it like protanopia and tritanopia.

Chrome has a built in accessibility checker for contrast.

You could also turn on the APCA experimental scoring in the experimental tab in the dev tools setting, but that's only if you want to play around and experiment with the future color contrast scoring system coming to WCAG 3.0 Silver.

Here's some apps I use or have used for Mac, Windows and iOS as well.

There's Pika and Contraste for the Mac OS.

There's the Color Contrast Analyzer for Windows and there's the Chromatic Vision Simulator for iOS and Android and VisionSim for iOS.

Some great color palette testing tools I have found and experimented with are Contrast Grid, Accessible Color Pallete Builder, Tanaguru Contrast Finder and the A11y Color Palette.

Some tips for great color contrast that have been something I have tried to practice for better color contrasts are as follows: font, weights, sizes, and colors matter.

Test your color palettes.

Ratios that exceed the minimums of 4.5 to one, three to one or seven to one.

And as I mentioned earlier, avoid stark contrasts with texts, which can result in blurred text.

And if there's one thing I have learned over the past year of producing my own podcast and doing videos that I heard from my friend Meryl Kay Evans is captions.

Meryl says "readability is the most important aspect of captioning in video.

No other rules matter if captions cannot be read".

There is a need to remember that captioning also has contrast issues, especially when dealing with a busy background.

You knew I was going to throw a lobster roll in there, didn't you?

Can you read the caption?

I barely can.

I can barely read it.

Getting close to the screen to read it.

There is a lot going on in the background and most of the time I have found we forget that there are people out there that need to clearly see what is being captioned during a video.

Now with a darker background color, which we see often and captioning it is much more legible and readable, easy to understand what the context of the video is.

Accessibility is a right, not a privilege.

This is something I like to stress to everyone I deal with on an everyday basis when it comes to accessibility.

Accessibility to the Web is a basic human right that we all need to keep in mind, especially when it comes to accessibility and inclusive design.

There's a t-shirt for that, that you can find at the link that I made, which is on the bottom of the slide, the t-shirt can be found at Cotton Bureau.

It reminds me and it reminds people I work with and interact with that we need to be more inclusive and embrace accessibility.

Let's make the web more inclusive for the people that do not have a voice.

The people on the other side of the glass as my friend Mike Monteiro says.

We can start by making our designs and colors more accessible.

And I hope this will give you the aspiration to start today.

Thank you.